Chrome插件项目结构和配置

📂 项目文件结构

基本文件结构

manifest.json（配置文件）
popup（弹出窗口）
- popup.html
- popup.css
- popup.js
background（后台脚本）
- background.js
content（内容脚本）
- content.js
- content.css
icons（图标文件夹）
- icon16.png
- icon48.png
- icon128.png

每个文件的作用：

manifest.json：插件的配置文件，定义插件的各种属性和权限
popup：点击插件图标时显示的弹出窗口
background：在后台运行的脚本，可以监听浏览器事件
content：注入到网页中的脚本，可以修改网页内容
icons：插件的图标，不同尺寸用在不同地方

⚙️ 配置文件详解

manifest.json基本配置

{
  "manifest_version": 3,          // 必须是3，表示使用最新版本
  "name": "插件名称",            // 显示在插件列表中的名称
  "version": "1.0",             // 插件版本号
  "description": "插件描述",     // 插件的功能说明
  
  "icons": {                    // 插件的图标
    "16": "icons/icon16.png",   // 在插件列表中显示
    "48": "icons/icon48.png",   // 在安装页面显示
    "128": "icons/icon128.png"  // 在Chrome商店显示
  },

  "action": {                   // 浏览器工具栏的按钮
    "default_popup": "popup/popup.html",  // 点击按钮显示的页面
    "default_icon": "icons/icon48.png"    // 按钮上显示的图标
  }
}

权限配置

{
  "permissions": [              // 插件需要的权限
    "storage",                  // 使用存储功能
    "tabs",                     // 操作标签页
    "activeTab"                 // 访问当前标签页
  ],
  
  "host_permissions": [         // 可以访问的网站
    "https://*.example.com/*"   // 例如：允许访问example.com的所有子域名
  ]
}

只申请必要的权限，过多的权限会增加用户的顾虑。

📜 插件功能说明

1. 弹出窗口

当用户点击浏览器工具栏上的插件图标时显示的页面，可以放置一些常用功能按钮。

2. 后台功能

插件在后台运行的功能，比如监听用户是否访问了某个网站，或者定时执行某些任务。

3. 网页功能

可以修改用户正在浏览的网页，比如修改页面样式、添加新的按钮等。

这些功能可以组合使用，让你的插件变得更加强大。

💡 开发建议

先想好你要开发的插件能解决什么问题
从简单的功能开始做起
多看看其他优秀插件是怎么做的
记得经常测试你的插件