1. Chrome 扩展的结构组成
- Chrome扩展的文件结构
- extension-smaple/
- manifest.json
- service-worker.js
- scripts/
- content-script.js
- popup/
- popup.css
- popup.js
- popup.html
- options/
- options.css
- options.js
- options.html
- icons/
- 16.png
- 32.png
- 48.png
- 128.png
- manifest 文件 (manifest.json)
manifest.json 是Chrome扩展的配置文件，它是必须要有的，并且必须位于项目的根目录中。它为浏览器
扩展提供了重要的基础信息，包括：
1. 扩展名，功能描述，当前版本号以及要使用的图标。
2. 扩展所需的Chrome API以及权限配置
3. 为扩展指定的相关文件，例如servicer worker， content script， popup HTML 以及options HTML。
-
扩展服务工作者 （service-worker.js）
扩展服务工作者是浏览器在后台运行的基于事件的脚本。它通常用于处理数据，协调扩展程序不同部分的任务，
以及作为扩展程序的事件管理器。Service Worker 可以访问所有扩展API，但它不能使用文档的全局window对象
提供的DOM API，它在自己的环境中运行，因此不能直接修改网页内容。 -
内容脚本 （content-scripts.js）
扩展使用内容脚本将代码注入主机页面。主机页面是内容脚本与之交互的网站。扩展可以通过指定匹配模式来
选择内容脚本应该在哪些网站上运行。
内容脚本允许扩展程序与浏览器中的页面进行交互和修改。例如它们可以在页面中插入新元素，
更改网站样式，修改DOM元素等。
内容脚本与主机页面共享对同一DOM树的访问，但在单独的javascript环境中运行。它们还可以访问有限数量
的Chrome API。 -
扩展HTML 页面
根据设计扩展可以有不同的HTML页面，所有扩展HTML文件都可以使用Chrome API，但不能包含内联javascript，
它必须指向一个javascript文件，最常见的HTML页面是：
1. 弹出页 (popup.html)
许多扩展使用弹出窗口来提供功能，用户可以通过单击扩展工具栏图标轻松找到它。当用户离开时，它
会自动关闭。
2. 选项页 (options.html)
选项页为用户提供了一种自定义扩展的方法，例如选择扩展将在哪些站点上运行。
其他扩展HTML页面包括Chrome覆盖页面，沙盒页面或为特定目的而包含的任何自定义页面。
2. Chrome 扩展各组件协同工作
-
传递信息
很多时候，内容脚本或其他扩展页面需要从扩展服务工作者发送和接受信息。在这些情况下，任何一方都可以
侦听另一端发送的消息，并在同一通道作出响应。扩展可以发送一次性请求或建立长期连接以支持多条消息。 -
存储数据
Chrome 为扩展提供了专门的存储API，可以用于所有扩展组件。它包括四个用于特定用例的独立存储区域和
一个在数据更新时进行跟踪的事件侦听器。例如当你在弹出窗口中保存更改时，扩展服务工作者可以使用指定
的逻辑进行响应。 -
引用扩展资源
扩展HTML页面可以使用与常规HTML页面相同的标签来添加扩展资源，内容脚本也可以访问扩展资源，例如图像
字体等，但需要额外的步骤。