Chrome 扩展开发概览

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页面相同的标签来添加扩展资源，内容脚本也可以访问扩展资源，例如图像
  字体等，但需要额外的步骤。

原文地址：https://www.cnblogs.com/xiaodi-js/p/17077058.html