ChatGPT Chrome 扩展项目教程

2024-09-17 15:23:15作者：郁楠烈Hubert

1. 项目目录结构及介绍

chatgpt-chrome-extension/
├── assets/
│   ├── icon.png
│   └── logo.png
├── background.js
├── content.js
├── manifest.json
├── options.html
├── popup.html
├── README.md
└── styles.css

assets/: 存放项目的静态资源文件，如图标和Logo。
background.js: 扩展的后台脚本，负责处理扩展的生命周期事件。
content.js: 注入到网页中的脚本，用于与网页内容交互。
manifest.json: 扩展的配置文件，定义了扩展的基本信息、权限和文件结构。
options.html: 扩展的选项页面，用户可以在这里配置扩展的设置。
popup.html: 扩展的弹出页面，用户点击扩展图标时显示。
README.md: 项目的说明文档，通常包含项目的介绍、安装和使用说明。
styles.css: 扩展的样式文件，定义了扩展页面的外观。

2. 项目启动文件介绍

background.js

background.js 是 Chrome 扩展的后台脚本，负责处理扩展的生命周期事件。它通常用于监听浏览器事件、管理扩展的状态和执行后台任务。

// background.js
chrome.runtime.onInstalled.addListener(() => {
  console.log('ChatGPT Chrome Extension installed.');
});

chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.create({ url: 'popup.html' });
});

content.js

content.js 是注入到网页中的脚本，用于与网页内容交互。它可以在网页加载时执行，并修改网页的DOM结构。

// content.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Content script loaded.');
  // 在这里添加与网页交互的代码
});

popup.html

popup.html 是扩展的弹出页面，用户点击扩展图标时显示。它通常包含一些简单的UI元素，如按钮和表单。

<!DOCTYPE html>
<html>
<head>
  <title>ChatGPT Extension</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>ChatGPT Extension</h1>
  <button id="openOptions">Options</button>
  <script src="popup.js"></script>
</body>
</html>

3. 项目配置文件介绍

manifest.json

manifest.json 是 Chrome 扩展的配置文件，定义了扩展的基本信息、权限和文件结构。

{
  "manifest_version": 2,
  "name": "ChatGPT Chrome Extension",
  "version": "1.0",
  "description": "A Chrome extension that integrates ChatGPT into your browsing experience.",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "assets/icon.png",
      "48": "assets/icon.png",
      "128": "assets/icon.png"
    }
  },
  "options_page": "options.html",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

manifest_version: 指定 manifest 文件的版本，当前为 2。
name: 扩展的名称。
version: 扩展的版本号。
description: 扩展的描述。
permissions: 扩展所需的权限，如 activeTab 和 storage。
background: 定义后台脚本。
browser_action: 定义扩展的图标和弹出页面。
options_page: 定义扩展的选项页面。
content_scripts: 定义注入到网页中的脚本。