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: 定义注入到网页中的脚本。

通过以上介绍，您应该对 chatgpt-chrome-extension 项目的目录结构、启动文件和配置文件有了基本的了解。接下来，您可以根据这些信息进一步开发和定制您的 Chrome 扩展。

登录后查看全文

ChatGPT Chrome 扩展项目教程

1. 项目目录结构及介绍

2. 项目启动文件介绍

background.js

content.js

popup.html

3. 项目配置文件介绍

manifest.json

热门内容推荐

最新内容推荐

项目优选

ChatGPT Chrome 扩展项目教程

1. 项目目录结构及介绍

2. 项目启动文件介绍

background.js

content.js

popup.html

3. 项目配置文件介绍

manifest.json

相关内容推荐

热门内容推荐

最新内容推荐

项目优选