Chrome扩展程序开发文档（中文译文）

最新推荐文章于 2024-03-21 21:13:00 发布

DavidLuo216

最新推荐文章于 2024-03-21 21:13:00 发布

阅读量6.4k

点赞数 4

分类专栏： Chrome扩展程序开发文章标签： chrome

原文链接：https://developer.chrome.com/docs/extensions/

版权

Chrome扩展程序开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

翻译自Chrome开发者网站扩展程序开发文档。英文文档链接： Chrome Developers - Extensions
第一次翻译英文开发文档，同时自己也是在边学习边翻译，因此对于译文中存在的理解偏差与翻译不到位还请谅解。文中的链接依旧是英文原文档的链接，需要到外网访问。目前仅翻译至原文 Getting Started 章节，该章节包含了一个简要的入门示例。后续章节或许会继续翻译。

欢迎

学习如何为Chrome开发扩展程序

更新于2020年11月09日（UTC+8）

如下页面包含给想要为Chrome浏览器创造扩展程序的开发者提供的引导和参考信息。如果您不确定从何开始，可以查看如下的新手页面：

什么是扩展程序？帮助您理解一个扩展程序到底是什么。
起步教程如果您已经准备开始编码。

除此之外，您或许能在以下页面发现有用的入手点：

了解不同组成部分的作用域扩展程序开发概述
从示例页面挑选一些示例扩展程序，安装，然后开始“破解”它们
在扩展程序开发问答页寻求答案

除了此处的文档，许多开发者能在下面找到有用的社区内容：

Chromium扩展程序 Google群组
Stack Overflow google-chrome extension 标签内容

感谢成为扩展程序开发社区的一员。我们很高兴在此见到您！

Chrome扩展程序的新特性

阅读本页内容了解Chrome扩展程序平台的变动，包括文档、相关政策或其他变更。

2021.01.19：Manifest V3发布

发布于2021年02月25日（UTC+8）

随着Chrome 88的发布，扩展程序平台现在支持由Manifest v3构建的扩展程序，并且您还可以将它们上传到Chrome网上应用商店。Manifest v3是一个新的扩展程序平台，能使Chrome扩展程序在默认情况下更安全、高效及隐私友好。

查看欢迎使用Manifest V3 以获取关于Manifest V3更加全面的信息，以及如何为其构建或迁移扩展程序。

起步

更新于2020年11月18日（UTC+8）

扩展程序由不同但相互协作的组件所组成。组件可以包括后台脚本（background scripts）、内容脚本（content scripts）、一个选项页面（options page）、UI元素和各种逻辑文件（UI elements）。扩展程序组件通过web开发技术创建：HTML、CSS和JavaScript。一个扩展程序的组件构成取决于它的功能，并不要求包括所有选项。

本教程将构建一个扩展程序，允许用户改变当前聚焦页面的背景颜色。它将用到许多扩展程序平台的组件以作为它们之间关系的一个介绍性演示。

作为起步，创建一个新目录以存放扩展程序的文件。

完整的扩展程序可从此处下载。

创建manifest文件

扩展程序从它们的manifest文件开始。创建一个manifest.json文件并引入如下代码：

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3
}

现在，包含了manifest文件的目录能在开发者模式下作为一个扩展程序被添加。

在Chrome地址栏中键入 chrome://extensions 以导航到扩展程序管理界面。
- 可选地，可以点击扩展程序菜单按钮并选择菜单底部的管理扩展程序项。
- 可选地，可以点击Chrome菜单，鼠标悬停在更多工具然后选择扩展程序。
点击开发者模式旁的开关按钮以开启开发者模式。
点击加载已解压的扩展程序按钮，选择刚刚创建的扩展程序目录。

在这里插入图片描述

铛铛！扩展程序已经被成功安装了。因为没有图标在manifest文件中被引用，所以会为扩展程序创建一个默认图标。

添加功能

现在已经安装好扩展程序，但是它目前不会做任何事情，因为我们还没告诉它做什么以及什么时候去做。让我们添加一些代码来存储一个背景颜色值以解决这个问题。

要完成这个任务，我们需要创建一个后台脚本并在扩展程序的manifest文件中引入它。先在扩展程序目录下创建脚本文件background.js，并更新manifest文件。

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3,
  "background": {
    "service_worker": "background.js"
  }
}

后台脚本就如其他重要的组件一样，必须在manifest文件中被引入。通过在manifest文件中引入一个后台脚本，能告诉扩展程序引用哪个文件，以及指定该文件的行为。
Chrome现在知道该扩展程序包括了一个 service worker。当你重载此扩展程序，Chrome将会扫描指定的文件以引入新增的指令，例如它需要监听的重要事件。

这个扩展程序将会需要在安装之际就从持久化的变量中获取信息。通过在后台脚本中引入监听事件runtime.onInstalled满足该需求。在onInstalled监听器内部，扩展程序使用 storage API 来设定一个数值。这将允许不同扩展程序组件访问与更新该数值。

let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({ color });
  console.log('默认背景颜色设置为%cgreen', `color: ${color}`);
});

包括 storage 的大多数API都必须在manifest文件中的 “permissions” 字段下引入，以使扩展程序能够使用它们。

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"]
}

导航回扩展程序管理界面并点击重载按钮。一个新的选项查看视图出现，并带有一个蓝色链接Service Worker。

在这里插入图片描述

点击链接以查看后台脚本的控制台日志输出：“默认背景颜色设置为green”。

引入一个用户界面

扩展程序可以拥有许多不同形式的用户界面，本示例将采用一个弹框界面（popup）。在扩展程序目录下创建文件 popup.html 。此扩展程序使用一个按钮来改变背景颜色。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>

同于后台脚本，这个文件必须在manifest文件中声明以使Chrome在扩展程序的弹框中展示它。为了达成这个目的，在manifest文件中添加一个动作（action）字段，并且设置popup.html文件作为动作字段的默认弹框（default_popup）。

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html"
  }
}

HTML文件 popup.html 引用了一个外部的CSS文件 button.css 。为此在扩展程序目录下添加一个新的文件并以此命名，在文件中键入以下代码：

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}
button.current {
  box-shadow: 0 0 0 2px white,0 0 0 4px black;
}

工具栏图标的指定也包括在动作字段下的 default_icons 项。从此处下载图片文件夹，解压它，然后将它放在扩展程序目录。更新manifest文件以使扩展程序知道如何使用这些图片。

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "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文件中的 icons 字段设置。

{
  "name": "起步示例",
  "description":"构建一个Chrome扩展！",
  "version":"1.0",
  "manifest_version":3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage"],
  "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"
  }
}

如果扩展程序在这个阶段重载，它将会包含提供的图标图片而不是采用默认图标，并且点击扩展程序图标将打开一个弹窗，内含一个默认颜色的按钮。

在这里插入图片描述

构建弹框UI的最后一步是添加颜色到按钮。在扩展程序目录下创建文件popup.js键入以下代码：

// 以用户偏好的颜色初始化按钮
let changeColor = document.getElementById("changeColor");
chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
})

以上代码从 popup.html 中获取按钮并从存储中获取颜色数值。接着，它将获取的色值应用到按钮的背景颜色上。在popup.html中添加一个 script 标签以引入脚本文件popup.js。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

重载扩展程序以查看设置好的绿色按钮。

在这里插入图片描述

层逻辑

扩展程序现在拥有一个自定义图标和一个弹框了，并且它根据保存在扩展程序存储中的色值为弹框中的按钮着色。接下来，它需要与用户进一步交互的逻辑。更新popup.js文件，在其尾部追加以下代码：

// 当点击按钮，将 setPageBackgroundColor 函数注入到当前页面
changeColor.addEventListener("click", async () => {
  let [tab] = await chrome.tabs.query({ active: true, currentWindow: true});
  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});
// 该函数的主体会作为内容脚本在当前页面内被执行
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  })
}

更新后的代码在按钮上添加了一个 click 事件监听器，它会触发一个以编程方式注入的内容脚本。这会将页面的背景颜色变为按钮的颜色。使用以编程方式注入允许用户调用的内容脚本，而不是自动插入不想要的代码到网页。
现在manifest文件需要 activeTab 权限以允许扩展程序暂时性地访问当前页面，以及 scripting 权限以使用 Scripting API 的 executeScript 方法。

{
  "name": "起步示例",
  ...
  "permissions": ["storage", "activeTab", "scripting"],
  ...
}

至此，扩展程序实现了全部的功能！重载该扩展程序，刷新页面，打开弹框并点击按钮来使页面背景变绿！但是，有些用户或许想要将背景颜色变为另一个不同的颜色。

在这里插入图片描述

为用户提供选项

现在扩展程序只允许用户将背景颜色变为绿色。引入一个选项页面以提供用户对该扩展程序更多的控制权，进一步客制化他们的浏览体验。

作为开始，在目录下创建文件 options.html 并键入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <div id="buttonDiv">
    </div>
    <div>
      <p>选择一个不同的背景颜色！</p>
    </div>
  </body>
  <script src="options.js"></script>
</html>

然后在manifest文件中引入该选项页面：

{
  "name": "起步示例",
  ...
  "options_page": "options.html"
}

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

在这里插入图片描述

向下滑动详细信息页面，然后选择扩展程序选项以浏览选项页面。

在这里插入图片描述

最后一步是添加上选项逻辑。在扩展程序目录下新建文件 options.js 并键入以下代码：

let page = document.getElementById("buttonDiv");
let selectedClassName = "current";
const presetButtonColors = ["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];
// 对按钮点击事件做出响应，包括标记选中的按钮以及保存选中项
function handleButtonClick(event) {
  // 移除先前选中颜色的样式
  let current = event.target.parentElement.querySelector(
    `.${selectedClassName}`
  );
  if (current && current != event.target ) {
    current.classList.remove(selectedClassName);
  }
  
  // 标记按钮为选中状态
  let color = event.target.dataset.color;
  event.target.classList.add(selectedClassName);
  chrome.storage.sync.set({ color });
}
// 在页面上为每个提供的颜色添加一个按钮
function constructOptions(buttonColors) {
  chrome.storage.sync.get("color", (data) => {
    let currentColor = data.color;
    // 对于我们提供的每一种颜色...
    for (let buttonColor of buttonColors) {
        // ...创建一个对应颜色的按钮...
        let button = document.createElement("button");
        button.dataset.color = buttonColor;
        button.style.backgroundColor = buttonColor;
        
        // ...标记当前选中的颜色...
        if (buttonColor === currentColor) {
          button.classList.add(selectedClassName);
        }
    
        // ...注册一个监听按钮点击事件的监听器
        button.addEventListener("click", handleButtonClick);
        page.appendChild(button);
    }
  });
}
// 初始化页面中的颜色选项按钮
constructOptions(presetButtonColors);

提供了四种颜色选项并在选项页生成了对应按钮并监听点击事件。当用户点击一个按钮，它将更新扩展程序存储中的颜色数值。因为扩展程序中所有的编码文件都是从该存储中获取此颜色信息，因此不需要更新其他数值。

在这里插入图片描述

进一步学习

祝贺！至此目录下已包含一个虽然简单但功能完全的Chrome扩展程序。

下一步该做什么？

Chrome扩展程序概述包含了许多信息，有许多关于扩展程序总体架构的详细信息，以及一些开发者想要熟悉的特定概念的说明。
学习有关调试扩展程序的可用选项调试教程
Chrome扩展程序访问了许多强大的API包括并不限于在开发网络中的可用API。chrome.* APIs 文档详细阐述了每个API。
开发者引导中拥有许多额外地址链接到与高级扩展程序开发相关的文档。

DavidLuo216

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
Chrome扩展程序开发文档（中文译文）

翻译自Chrome开发者网站扩展程序开发文档。英文文档链接： Chrome Developers - Extensions第一次翻译英文开发文档，同时自己也是在边学习边翻译，因此对于译文中存在的理解偏差与翻译不到位还请谅解。文中的链接依旧是英文原文档的链接，需要到外网访问。目前仅翻译至原文 Getting Started 章节，该章节包含了一个简要的入门示例。后续章节或许会继续翻译。欢迎学习如何为Chrome开发扩展程序更新于2020年11月09日（UTC+8）如下页面包含给想要为Chrome浏览
复制链接

扫一扫