此页面由 Cloud Translation API 翻译。

开始使用

扩展程序由不同但共同的组件组成。组件可以包含后台脚本、内容脚本、选项页面、界面元素和各种逻辑文件。扩展程序组件是使用网络开发技术（HTML、CSS 和 JavaScript）创建的。扩展程序的组件将取决于其功能，不一定需要所有选项。

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

首先，请创建一个新目录来存放扩展程序的文件。

您可以在此处找到完成后的扩展程序。

创建清单

扩展程序从其清单开始。创建一个名为 manifest.json 的文件，并在该文件中添加以下代码。

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

在开发者模式下，可将存放清单文件的目录添加为扩展程序（处于当前状态）。

前往 chrome://extensions，打开“扩展程序管理”页面。
- 您也可通过以下方式打开“扩展程序管理”页面：点击 Chrome 菜单，将光标悬停在更多工具上，然后选择扩展程序。
点击开发者模式旁边的切换开关以启用开发者模式。
点击加载未封装按钮，然后选择扩展程序目录。

加载扩展程序

搞定！该扩展程序已成功安装。由于清单中未包含任何图标，因此系统将为该扩展程序创建一个通用工具栏图标。

添加说明

虽然该扩展程序已安装，但没有任何说明。通过创建一个名为 background.js 的文件并将其置于扩展程序目录中，来引入后台脚本。

后台脚本和许多其他重要组件必须在清单中注册。在清单中注册后台脚本可告知扩展程序要引用哪个文件，以及该文件的行为方式。

{
  "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）都必须在清单中的 "permissions" 字段下注册，这样扩展程序才能使用它们。

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

返回扩展程序管理页面并点击重新加载链接。新增了一个 Inspect views 字段，其中包含蓝色链接 background page。

检查视图

点击链接即可查看后台脚本的控制台日志“The color is green.”

引入界面

扩展程序可以具有多种形式的界面，但这种界面会使用弹出式窗口。创建一个名为 popup.html 的文件并将其添加到目录中。此扩展程序使用一个按钮来更改背景颜色。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
      }
    </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

与后台脚本一样，需要在清单中的 page_action 下将此文件指定为弹出式窗口。

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

工具栏图标的标识也包括在 default_icons 字段中的 page_action 下。在此处下载图片文件夹，将其解压缩，然后放置在该扩展程序的目录中。请更新清单，以便扩展程序知道如何使用这些图片。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}

扩展程序还会在扩展程序管理页面、权限警告和网站图标上显示图片。这些映像在清单中的 icons 下指定。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "icons": {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
  "manifest_version": 2
}

如果在此阶段重新加载该扩展程序，它将包含灰度图标，但没有任何功能差异。由于清单中声明了 page_action，因此由扩展程序决定何时告知浏览器用户何时可以与 popup.html 互动。

使用 runtime.onInstalled 监听器事件中的 declarativeContent API 向后台脚本添加声明的规则。

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
          actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

此扩展程序需要有权访问其清单中的 declarativeContent API。

{
  "name": "Getting Started Example",
...
  "permissions": ["declarativeContent", "storage"],
...
}

弹出式窗口

现在，当用户导航到包含 "developer.chrome.com" 的网址时，浏览器会在浏览器工具栏中显示全彩页面操作图标。当该图标为全彩图标时，用户可以点击它查看 pop.html。

弹出式界面的最后一步是为按钮添加颜色。创建一个名为 popup.js 的文件，并将以下代码添加到扩展程序目录中。

let changeColor = document.getElementById('changeColor');

chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});

此代码会从 popup.html 获取按钮，并从存储空间请求颜色值。然后，它会将该颜色用作按钮的背景。在 popup.html 中向 popup.js 添加脚本标记。

<!DOCTYPE html>
<html>
...
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

请重新加载该扩展程序以查看绿色按钮。

层逻辑

该扩展程序现在知道该弹出式窗口应该可供 developer.chrome.com 上用户访问，并会显示彩色按钮，但还需要相应的逻辑才能实现进一步的用户互动。更新 popup.js 以包含以下代码。

let changeColor = document.getElementById('changeColor');
...
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};

更新后的代码会在按钮上添加一个 onclick 事件，该事件会触发以编程方式注入的内容脚本。这会将网页的背景颜色变成与按钮相同的颜色。利用程序化注入，您可以实现由用户调用的内容脚本，而不是将不需要的代码自动插入网页。

清单需要有 activeTab 权限，才能允许扩展程序临时访问 tabs API。这样一来，此扩展程序就可以调用 tabs.executeScript。

{
  "name": "Getting Started Example",
...
  "permissions": ["activeTab", "declarativeContent", "storage"],
...
}

该扩展程序现已完全正常运行！重新加载扩展程序，刷新此页面，打开弹出式窗口，然后点击按钮将其变为绿色！不过，某些用户可能需要将背景更改为其他颜色。

为用户提供选项

该扩展程序目前只允许用户将背景更改为绿色。添加选项页面可让用户更好地控制该扩展程序的功能，从而进一步自定义其浏览体验。

首先，在名为 options.html 的目录中创建一个名为 options.html 的文件，并添加以下代码。

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>Choose a different background color!</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

然后在清单中注册选项页面

{
  "name": "Getting Started Example",
  ...
  "options_page": "options.html",
  ...
  "manifest_version": 2
}

重新加载该扩展程序，然后点击详细信息。

检查视图

向下滚动详情页面，然后选择 Extension options 以查看选项页面，不过该页面当前会显示为空白。

扩展程序选项

最后一步是添加选项逻辑。使用以下代码在扩展程序目录中创建一个名为 options.js 的文件。

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

然后，在选项页面上以按钮的形式提供了四种颜色选项，其中包含 onClick 事件监听器。当用户点击某个按钮时，该按钮会更新扩展程序的全局存储空间中的颜色值。由于扩展程序的所有文件都会从全局存储空间中提取颜色信息，因此无需更新其他值。

更进一步

恭喜！该目录现在包含一个功能完备的 Chrome 扩展程序，尽管很简单。

后续操作

Chrome 扩展程序概览略有回溯，并详细说明了扩展程序架构的总体详情，并提供了开发者可能希望熟悉的一些具体概念。
如需了解可用于调试扩展程序的选项，请参阅调试教程。
Chrome 扩展程序可以访问强大的 API，远不止于开放 Web 提供的 API。 chrome.* API 文档将逐步介绍每个 API。
开发者指南还有数十个其他链接，分别指向与创建高级扩展程序相关的文档。