文章目录
- [什么是 Chrome 浏览器插件？](#什么是 Chrome 浏览器插件？)
- 项目结构
- 创建插件清单文件manifest.json
-
- 示例
-
- [manifest_version,name,version, description](#manifest_version,name,version, description)
- [action : 声明插件图标和点击后展示的页面](#action : 声明插件图标和点击后展示的页面)
- content_scripts
- [Background - Service Worker](#Background - Service Worker)
-
- 示例
-
- [service_worker type](#service_worker type)
- popup.html
- popup.js
- "permissions"
- icons
- 消息通信
-
- [Action（popup） 和 content 通信](#Action（popup） 和 content 通信)
- 加载插件
- 调试插件
参考链接
chrome插件开发流程（超全）
Chrome 插件开发入门教程--带项目结构
chrome浏览器插件
什么是 Chrome 浏览器插件？
项目结构
项目文件和目录结构
在 my-chrome-extension 文件夹中创建以下文件和目录。这些文件将包含插件的配置、脚本、HTML 和其他资源：
my-chrome-extension/
├── manifest.json. ---------------------- chrome 插件配置文件
├── background.js ---------------------- service work
├── content.js ---------------------- 注入脚本
├── popup.html ---------------------- 插件弹框页面
├── popup.js ---------------------- 插件弹框 js
└── images/ ---------------------- 插件图标
├── icon-16.png
├── icon-48.png
└── icon-128.png
创建插件清单文件manifest.json
Chrome 插件的清单是唯一且必须具有特定文件名的必需文件：manifest.json；且位于项目根目录
示例
{
"manifest_version": 3,
"name": "My Chrome Extension",
"version": "0.0.1",
"description": "My Chrome Extension Description",
"icons": {
"16": "images/icon_16.png",
"32": "images/icon_32.png",
"48": "images/icon_48.png",
"128": "images/icon_128.png"
}
}manifest_version,name,version, description
manifest_version：用于指定插件使用的清单文件格式版本，目前是 3
name：插件名称，一般情况下 hover 插件图标展示的文案也是 name
version：插件版本
action : 声明插件图标和点击后展示的页面
浏览器工具栏中显示的图标或按钮，用户可以单击该图标或按钮来执行插件提供的功能或操作
示例
{
"action": {
"default_icon": "icons/icon.png",
"default_title": "Popup Title",
"default_popup": "popup.html"
}
}default_icon,default_title,default_popup
content_scripts
内容脚本（content script）是"跑在网页里的插件代码"，能读取/修改网页 DOM
内容脚本是在网页环境中运行的文件，可以直接访问和修改网页的 DOM。内容脚本通常用于实现与网页交互的功能，例如高亮显示文本、修改页面内容或收集页面数据。
示例
"content_scripts": [
{
"matches": ["https://www.taobao.com/"],
"js": ["content_scripts.js"]
}
]matches,js
- matches：指定内容脚本将注入哪些页面，这里使用 "<all_urls>" 表示所有页面。
- js：指定内容脚本文件。
- 注意：matches里面匹配的网址后面要带*，除非你只在这个网站某个固定网址使用，否则都加*，不然会出现content.js加载失败，无法插入到该网站中，如果要支持所有网站，则设置"matches": ["<all_urls>"]
Background - Service Worker
Service Worker 在后台运行并处理浏览器事件
在 V3 中使用 service worker 替换 background 页面
service_worker : 在后台监听浏览器事件（service_worker是特殊的javascript环境，加载它处理事件并在不需要时终止）
示例
{
"background": {
"service_worker": "service_worker.js",
"type": "module"
}
}service_worker type
service_worker：指定后台脚本文件，,后台脚本 会在插件安装时运行。
module:把service_worker.js 当作 ES Module（JavaScript 模块）来加载，而不是传统的"脚本"（classic script）。
popup.html
点击插件图标时会弹出 popup.html 文件中的内容(插件弹窗的 HTML 文件，定义了插件弹窗的结构和样式)
popup.js
处理插件弹窗中的交互逻辑
"permissions"
permissions：我要用哪些功能按钮（API）
optional_permissions：这些功能先不拿，用到再问
host_permissions：我可以访问哪些网站域名
optional_host_permissions：这些网站先不访问，用到再问
content_scripts.matches：我把"网页内脚本"注入到哪些网页里
tabs
icons
定义插件的图标文件路径，支持多个尺寸。
消息通信
Action（popup） 和 content 通信
https://18055975947.github.io/extension/core/message.html
加载插件
打开 Chrome 浏览器的扩展程序管理页面
- 在 Chrome 浏览器中，点击右上角的三点菜单（更多），选择"更多工具" -> "扩展程序"。
- 或者，直接在地址栏输入
chrome://extensions/ 并按回车键
启用开发者模式
在扩展程序管理页面的右上角，找到并启用"开发者模式"开关。这将允许你加载未发布的插件和查看详细的调试信息。
加载插件
- 点击"加载已解压的扩展程序"按钮。
- 选择你插件文件夹，然后点击"选择文件夹"
更新插件
如果你对插件进行了修改，返回到扩展程序管理页面，点击"刷新"按钮（一个箭头的图标）来更新插件
调试插件
调试后台脚本
在扩展程序管理页面，点击背景页链接（通常显示为Service Worker）以打开开发者工具。这将允许你查看和调试后台脚本的日志、错误和其他信息。
你可以在控制台标签页中查看日志消息，使用断点调试代码
调试内容脚本
- 内容脚本运行在网页的上下文中，因此需要打开相应的网页来调试它。
- 在开发者工具中，切换到源代码标签页，找到内容脚本文件并设置断点。
- 你可以在控制台标签页中查看内容脚本的日志和错误信息。
调试插件弹窗
- 鼠标点击插件，点击右键菜单会出现"审查弹出内容"，即可进行调试
- 或者
- 点击浏览器工具栏中的插件图标，打开插件弹窗。
- 在插件弹窗打开的状态下，右键单击插件弹窗并选择检查打开开发者工具。
- 在开发者工具中，你可以查看和调试插件弹窗的 HTML、CSS 和 JavaScript 文件
