Chrome 扩展（插件）开发官方入门教程

译自：https://developer.chrome.com/extensions/getstarted

入门教程

扩展由不同但相互联系的组件组成。组件可以包括后台脚本，内容脚本，选项页，交互页面 和各种逻辑文件。扩展组件是使用 Web 开发技术创建的：HTML，CSS 和 JavaScript。扩展的组件各有其功能，并且是可选的。

本教程将构建一个扩展，允许用户更改 developer.chrome.com 上任何页面的背景颜色。我们将使用许多核心组件来介绍它们之间的关系。

首先，创建一个新目录来保存扩展名的文件。

创建 Manifest

扩展始于 manifest ，我们先创建一个 manifest.json 文件，包含如下代码。

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
  }

包含 manifest 文件的目录可在开发人员模式下以其当前状态添加为扩展。

在浏览器地址栏中输入 chrome://extensions, 打开扩展管理页面。

也可以通过单击 Chrome 菜单，将鼠标悬停在更多工具上，然后选择扩展程序来打开扩展程序管理页面。

通过单击开发人员模式旁边的切换开关启用开发人员模式。

单击加载已解压的扩展程序按钮，然后选择扩展目录。

该扩展程序已成功安装。由于 manifest 中未包含任何图标，因此将为扩展名创建通用工具栏图标。

增加指令

尽管已安装完扩展，但还没有程序逻辑。通过创建名为 background.js 的文件并将其放置在扩展目录中，来引入后台脚本。

后台脚本和许多其他重要组件一样必须在 manifest 中注册。在 manifest 中注册后台脚本会告诉扩展要引用哪个文件，以及该文件的行为。

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "manifest_version": 2
  }

现在，该扩展程序知道它包含一个非持久性后台脚本，并将扫描注册文件中需要监听的重要事件。

该插件监听被安装后，来自持久化变量的消息。首先在后台脚本中包含一个 runtime.onInstalled 的监听事件。在 onInstalled 监听器内部，扩展使用 storage API 设置一个值。这将允许多个扩展组件访问该值并进行更新。

chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

大部分 API，包括 storage api，必须被注册在 manifest 的 permissions 字段中给插件使用。