在 Manifest V2 版本中，后台页面 background pages 是扩展程序中的一个独立页面，一般设置事件监听，以响应用户的操作，但是它会长期驻留后台影响性能。在 Manifest V3 版本中，后台脚本迁移到 Service Workers 中运行以提供性能，其中有两个特点：

• Service Workers 在执行事件处理函数后终止，并在新的事件触发下重新运行
• 它是一种 JavaScript Worker，无法直接访问 DOM。

如果需要使用 service workers，则需要先在配置清单 manifest.json 的选项 background.service_worker 中声明/注册，该选项的属性值指定需要执行的一个 JavaScript 文档的路径（它必须在项目的根目录下）。

{
  // ...
  "background": {
    "service_worker": "background.js"
  },
}

后台脚本在 Service Workers 中运行基于监听事件-响应模型来执行操作，因此逻辑代码的编写也应该遵循该模型以优化性能：

• 在事件循环的第一轮中完成事件监听的注册，即将事件监听程序写在后台脚本最顶层的作用域中，而不应该内嵌在其他的逻辑代码中（因为 Service Workers 执行完代码会终止而不会长期驻留，当有事件需要分派时它才再次运行，如果未能在第一次事件轮询中注册监听器，这就无法响应事件）。
  background.js

  js

  chrome.storage.local.get(["badgeText"], ({ badgeText }) => {
    chrome.action.setBadgeText({ text: badgeText });
  });
  
  // Listener is registered on startup
  chrome.action.onClicked.addListener(handleActionClick);
  
  function handleActionClick() {
      // ...
  }
  

• 由于 Service Workers 生命周期是短期的，如果需要持久化的数据（例如需要将用户输入的内容作为变量），可以使用 Chrome 为扩展程序提供的 Storage API
  background.js

  js

  chrome.runtime.onMessage.addListener(({ type, name }) => {
    if (type === "set-name") {
      chrome.storage.local.set({ name });
    }
  });
  
  chrome.action.onClicked.addListener((tab) => {
    chrome.storage.local.get(["name"], ({ name }) => {
      chrome.tabs.sendMessage(tab.id, { name });
    });
  });
  

• 在 Manifest V2 版本中使用 setTimeout 或 setInterval 实现延迟或定期操作，在 Manifest V3 版本的 Service Workers 中并不可行，因为 Service Worker 并不会长期驻留后台，当它终止时调度程序会注销计时器。
  应该使用 Alarms API 来替代，它用以安排代码定期运行或在未来的指定时间运行。它也需要在后台脚本最顶层的作用域中注册。
  background.js

  js

  // set an alarm, which will dispatch onAlarm event after 3 mins
  chrome.alarms.create({ delayInMinutes: 3 });
  
  // listen the onAlarm event and react to it
  chrome.alarms.onAlarm.addListener(() => {
    chrome.action.setIcon({
      path: getRandomIconPath(),
    });
  });
  

Service Worker 实际上是一个 web worker，在浏览器中可以独立于网页运行，一般网页的执行上下文中都有全局变量 window，可以通过它访问一些浏览器提供的 API，例如 IndexedDB、cookie、localStorage 等，但在 Service Worker 中没有该对象，因此有诸多限制，例如在该环境中无法访问 DOM，无法发起 XMLHttpRequest（但支持 fetch 功能），以下是应对限制的一些解决方法：

• 由于 Service Workers 无法访问 DOMParser API 以解析 HTML，我们可以通过 chrome.windows.create() 和 chrome.tabs.create() API 创建一个标签页，以提供一个具有 window 对象的环境，或借助一些库（如 jsdom 或 undom）弥补这个缺失。
• 在 Service Workers 中无法播放或捕获多媒体资源，可以通过 chrome.windows.create() 和 chrome.tabs.create() API 创建一个标签页，以提供一个具有 window 对象的环境，然后可以通过消息传递 message passing 在 service worker 中控制页面的多媒体播放。
• 虽然在 Service Worker 中无法访问 DOM，但对于 <canvas> 画布元素，可以通过 OffscreenCanvas API 创建一个 canvas。关于 OffscreenCanvas 相关信息可以参考这里。
  background.js

  js

  // for MV3 service workers
  function buildCanvas(width, height) {
    const canvas = new OffscreenCanvas(width, height);
    return canvas;
  }
  

注入到页面的脚本 content scripts 是在网页运行的，它「脱离」了扩展程序，但可以使用信息传递 message passing （让运行在 web page 的页面脚本 content script 和扩展程序之间）进行沟通。

Chrome 除了提供简单的 API 进行一次性的请求-响应通讯，也提供复杂的 API 进行长连接通讯，还可以基于 ID 进行跨扩展程序的通讯，甚至可以与本机系统进行通讯。

// 在页面脚本 content script 发送信息
chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
  // 接收并处理返回的信息
  console.log(response.farewell);
});

// 在扩展程序发送信息
// 在后台代码 background script 中编写代码
// 需要先使用 query 获取 tabId，以指定该请求发送给哪个特定的 tab 标签页面
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  // 该示例将信息发送到当前激活的标签页面
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    // 接收并处理返回的信息
    console.log(response.farewell);
  });
});

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
  console.log(sender.tab ?
    "from a content script:" + sender.tab.url :
    "from the extension");
  if (message.greeting === "hello")
    sendResponse({farewell: "goodbye"});
  }
);

/**
 * 发起端
 */
// 该代码片段编写在页面脚本 content script
// 以建立长连接的信息通道
// 传递参数，为信息通道 channel 设置名称，以区别其他的通道
// （也就是说扩展程序可以同时建立多个信息通道）
var port = chrome.runtime.connect({name: "knock-knock"});
// 通过该端口发送信息
port.postMessage({joke: "Knock knock"});
// 设置事件监听器，通过该端口接收信息
// 接收到的信息会作为回调函数的入参
port.onMessage.addListener(function(msg) {
  if (msg.question === "Who's there?")
    port.postMessage({answer: "Madame"});
  else if (msg.question === "Madame who?")
    port.postMessage({answer: "Madame... Bovary"});
});

/**
 * 接收端
 */
chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name === "knock-knock");
  port.onMessage.addListener(function(msg) {
    if (msg.joke === "Knock knock")
      port.postMessage({question: "Who's there?"});
    else if (msg.answer === "Madame")
      port.postMessage({question: "Madame who?"});
    else if (msg.answer === "Madame... Bovary")
      port.postMessage({question: "I don't get it."});
  });
});

// The ID of the extension we want to talk to.
var laserExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(laserExtensionId, {getTargetData: true},
  function(response) {
    if (targetInRange(response.targetData))
      // 发送请求信息时，必须提供扩展程序的 ID，以便其他扩展程序可以进行判断，是否作出响应
      chrome.runtime.sendMessage(laserExtensionId, {activateLasers: true});
  }
);

// Start a long-running conversation:
var port = chrome.runtime.connect(laserExtensionId);
port.postMessage(...);

// For simple requests:
chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.id === blocklistedExtension)
      return;  // don't allow this extension access
    else if (request.getTargetData)
      sendResponse({targetData: targetData});
    else if (request.activateLasers) {
      var success = activateLasers();
      sendResponse({activateLasers: success});
    }
  });

// For long-lived connections:
chrome.runtime.onConnectExternal.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
    // See other examples for sample onMessage handlers.
  });
});

{
  // ...
  "externally_connectable": {
    "matches": ["https://*.example.com/*"]
  }
}

// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";

// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
  function(response) {
    if (!response.success) handleError(url);
});

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (sender.url === blocklistedWebsite)
      return;  // don't allow this web page access
    if (request.openUrlInEditor) openUrl(request.openUrlInEditor);
});

扩展程序的设置页面 Options Page 一般是让用户设置扩展程序的参数，以调整扩展程序的行为方式，以更符合自己的使用习惯。

如果要为扩展程序添加设置页面，需要先在配置清单 manifest.json 的中进行声明/注册，有两种类型的设置页面：

• Full page options 整页的设置页面，需要打开一个标签页
  在配置清单的选项 options_page 中声明/注册作为设置页面的 HTML 文档的路径
  json

  {
    // ...
    "options_page": "options.html",
  }
  

  
  然后用户可以在浏览器工具栏的扩展程序图标右键点击选择「选项」打开设置页面
  

  

  
  或者在扩展程序的「详情」页面中选择「扩展程序选项」打开设置页面
  

  

• Embedded Options 内嵌的设置页面，以弹出式 modal 模态框的形式展示设置页面
  提示

  模态框的大小会根据页面内容自动调整，但有时候可能并不奏效，此时可以为设置页面先提供一个最小的尺寸，以保证布局正常显示。

  
  在配置清单的选项 options_ui.page 中指向相应的 HTML 文档路径，并将选项 option_ui.open_in_tab 设置为 false，表示采用内嵌式的设置页面（如果设置为 true 就会打开新的标签页来展示设置页面）。
  json

  {
    // ...
    "options_ui": {
      "page": "options.html",
      "open_in_tab": false
    },
  }
  

  
  然后用户就可以在在浏览器工具栏的扩展程序图标右键点击选择「选项」，会跳转到相应扩展程序的详情页，同时打开模态框展示设置页面；或者在扩展程序的「详情」页面中选择「扩展程序选项」，打开模态框展示设置页面。
  

  

<!-- 点击按钮打开扩展程序的设置页面 -->
<button id="go-to-options">Go to options</button>

document.querySelector('#go-to-options').addEventListener('click', function() {
  // 先判断浏览器是否支持该方法
  if (chrome.runtime.openOptionsPage) {
    chrome.runtime.openOptionsPage();
  } else {
    // 如果不支持就手动基于页面路径打开设置页面
    window.open(chrome.runtime.getURL('options.html'));
  }
});

虽然两种方式都可以供用户设置参数，但是有一些不同：

• 对于内嵌型的设置页面，不支持部分 Tabs 相关的 API
  • 无法使用方法 chrome.tabs.query() 通过设置页面的 URL 找到对应的 tab
  • 打开设置页面时，标签创建事件 chrome.tabs.onCreated.addListener() 无法被监听到
  • 当设置页面刷新/重载时，更新事件 chrome.tabs.onUpdated.addListener() 无法被监听到
• 无法使用 chrome.tabs.connect() 方法和 chrome.tabs.sendMessage() 方法，❓ 即无法从扩展程序向设置页面发送信息
  但 chrome.runtime.connect() 方法和 chrome.runtime.sendMessage() 方法并不受限，即可从设置页面向扩展程序发送信息
  说明

  如果设置页面使用方法 chrome.runtime.connect() 或方法 chrome.runtime.sendMessage() 传递信息，接收者并不能读取发送者 sender 的 tab 信息，只能读取到发送者的 url 信息（设置页面文档的路径）

限制扩展程序的权限，不仅可以降低扩展程序被恶意程序利用的可能性；还可以让用户有主动选择权，决定应该给扩展程序授予哪些权限

扩展程序为了可以使用部分 Chrome APIs 或访问外部网页，需要先在配置清单 manifest.json 中进行显式声明，在配置清单 manifest 中有三种不同的选项以声明不同类型的权限

• permissions 选项：以数组的形式列出所需的权限，用于设置必要权限许可 required permissions 为了实现扩展程序的基本功能，会在安装时询问用户获取授权
  提示

  所有可以在 permissions 选项中声明的权限可以查看官方文档）

• optional_permissions 选项：以数组的形式列出所需的权限，用于设置可选权限 optional permissions 为了实现某些可选的功能（一般是访问特定的数据或资源），在扩展程序运行时才询问用户，以获取权限许可
  注意

  在 permissions 选项中声明的权限大部分也适用于optional_permissions 选项，部分权限除外，即它们并不能作为 optional_permissions 可选权限

  • debugger
  • declarativeNetRequest
  • devtools
  • experimental
  • geolocation
  • mdns
  • proxy
  • tts
  • ttsEngine
  • wallpaper
  提示

  除了可以在配置清单 manifest.json 中设置所需的可选权限，还可以在扩展程序的逻辑代码中使用方法 chrome.permissions.request() 动态申请，这样就可用基于用户主动交互，例如在按钮的点击事件的处理函数中，按需获取权限

  如果申请的权限会触发警告提示，则会弹出一个权限提示框询问用户许可，并等待结果返回再执行后续的代码

  js

  document.querySelector('#my-button').addEventListener('click', (event) => {
    // Permissions must be requested from inside a user gesture, like a button's
    // click handler.
    chrome.permissions.request({
      permissions: ['tabs'],
      origins: ['https://www.google.com/']
    }, (granted) => {
      // The callback argument will be true if the user granted the permissions.
      if (granted) {
        doSomething();
      } else {
        doSomethingElse();
      }
    });
  });
  

• host_permissions 选项：以数组的形式列出一系列正则表达式，它们是用于匹配 url 的，用于声明扩展程序可以去访问哪些主机

然后浏览器会在扩展程序安装时或在运行时，询问用户是否允许它获取相应的权限、访问特定的资源，让用户可以有主动权去保护自己的数据

{
  // ...
  "permissions": [
    "tabs",
    "bookmarks",
    "unlimitedStorage"
  ],
  "optional_permissions": [
    "unlimitedStorage"
  ],
  "host_permissions": [
    "http://www.blogger.com/",
    "http://*.google.com/"
  ],
}

chrome.permissions.contains({
  permissions: ['tabs'],
  origins: ['https://www.google.com/']
}, (result) => {
  if (result) {
    // The extension has the permissions.
  } else {
    // The extension doesn't have the permissions.
  }
});

chrome.permissions.remove({
  permissions: ['tabs'],
  origins: ['https://www.google.com/']
}, (removed) => {
  if (removed) {
    // The permissions have been removed.
  } else {
    // The permissions have not been removed (e.g., you tried to remove
    // required permissions).
  }
});

最佳实践

有一些权限在获取时会弹出警告提示，询问用户以获取授权

最佳实践

具体哪些权限会通知用户，或是询问让用户主动授权，可以查看官方文档中最佳实践的相关内容

在安装扩展程序时，如果弹出过多的警告会影响用户体验，还可能降低安装量，所以在配置清单 manifest.json 的选项 permissions 中应该只声明核心功能所必需的权限

而那些需要弹出警告提示来获取的权限，则应该在选项 optional_permissions 中声明，然后使用交互控件，如按钮或 checkbox，让用户主动激活可选功能，此时才弹出权限警告框，让用户主动选择是否授权，这样的交互体验会更佳

另外如果更新扩展程序时，新增 permissions 可能会导致扩展程序临时无法激活，需要用户再起允许授权才可以，如果将这些新增的 permissions 放在选项 optional_permissions 则可以避免这个不好的体验

推荐使用 activeTab 权限（以替代 <all_urls> 权限），该权限支持临时获取（作为可选权限），以访问当前激活的标签页，并在当前页面使用 tabs 相关的 API（当导航到其他 url 或关闭当前页面后，该路径的可访问性就失效），不会在安装扩展程序时弹出警告

说明

对于在「开发者模式」下「加载已解压的扩展程序」，并不会展示权限警告提示。如果希望查看警告提示的效果，可以相对开发的扩展程序进行打包，具体步骤请参考官方指南。

扩展程序可以在浏览器中存储和检索数据。

Chrome 浏览器为拓展出现提供数据存储 API chrome.storeage ，该 API 提供类似 localStorage 的功能，但也有一些不同：

• 使用 chrome.storage.sync 相关方法，就可以利用 Chrome 的同步功能，实现同一账户下的扩展程序数据在多个设备之间同步
  说明

  如果已登录账户的 Chrome 处于离线状态，则需要同步存储的数据会先进行本地存储，等待浏览器上线后再进行同步。

  如果用户在 Chrome 设置中取消了数据同步功能，那么 chrome.storage.sync 相关方法的作用和 chrome.storage.local 一样

• 批量的读取和写入数据操作是异步执行的，因此与 localStorage（该方法是同步执行的，会引起的阻塞和串行）相比，该 API 的操作更快
• 存储的数据类型可以是对象，而 localStorage 只允许存储字符串
• Enterprise policies configured by the administrator for the extension can be read (using storage.managed with a schema). The storage.managed storage is read-only

有三种不同的存储域 ❓ StorageArea

• sync 同步存储的数据
• local 本地存储的数据
• session 会话存储的数据（存储在内存里）
• managed 管理员设置的数据，只读

如果要使用该 API 需要先在配置清单 manifest.json 的选项 permissions 中声明/注册相应的权限

{
  // ...
  "permissions": [
    "storage"
  ],
}

该 API 所允许存储的数据并不大

• 对于 sync 同步存储的数据，允许总大小为 100KB，最多存储 512 个数据项，每项大小为 8KB
• 对于 local 本地存储的数据，允许总大小为 5MB（类似于 localStorage 的存储限制），因此它们一般用作存储、同步扩展程序的设置
• 对于 session 会话存储的数据，允许总大小为 10MB，但是该类型的数据只会保留在内存中，并不会持久化地写入硬盘里

// sync
chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

// local
chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

chrome.storage.onChanged.addListener(function (changes, namespace) {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Storage key "${key}" in namespace "${namespace}" changed.`,
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

可及性，又称为 a11y，是指一系列的设计指南，以便残障人士更易于使用扩展程序，例如快捷键命令可以让视觉障碍人士更方便地使用扩展程序，字幕和翻译功能对视觉障碍人士和外语者有帮助。

开发者可以遵循以下建议，以提高扩展程序的可及性 accessible：

• 使用正确的语义化 HTML 元素搭建 UI 控件，以便保障可及性。这些控件保证了可以通过键盘（Tab 键）访问操作，且它们的语义性让屏幕阅读器更容易理解。
  

  

• 如果需要使用非语义化的 HTML 元素或 JavaScript 构建 UI 控件时，可以通过 WAI-ARIA，Web Accessibility Initiative - Accessible Rich Internet Applications，一个由 W3C 制定的规范，它通过给 DOM 元素添加一些规定的属性，让我们的开发的网页应用更具语义化。
  提示

  WAI-ARIA 属性不会对 web 页面有任何影响，只是让浏览器暴露更多的信息给无障碍 API，例如屏幕阅读器。

  
  该规范中三个主要的特性：
  • 声明元素的角色和功能，例如 role="navigation" 表示该元素的作用是导航
  • 为元素定义额外的属性，例如 aria-require=true 告知用户该表单是必添的
  • 设定元素的状态，例如 aria-disable="true" 表示该表单禁止输入
  Tip

  状态和属性的差异之处就是：属性在应用的生命周期中不会改变，而状态可以，用编程的方法改变。

  html

  <div role="toolbar" tabindex="0" aria-activedescendant="button1">
    <img src="buttoncut.png" role="button" alt="cut" id="button1">
    <img src="buttoncopy.png" role="button" alt="copy" id="button2">
    <img src="buttonpaste.png" role="button" alt="paste" id="button3">
  </div>
  

  
  以上示例中，属性 tabindex="0" 让该元素可以聚焦，并且可以通过键盘来导航，其聚焦顺序由 DOM 结构决定；属性 aria-activedescendant 指定该元素聚焦时，其子代哪一个元素先进行聚焦。
• 元素可聚焦让用户仅通过键盘也能操作扩展程序页面，应该保证按钮、菜单栏等元素可以聚焦。默认情况下，只有锚标签、按钮、表单控件可以通过键盘聚焦，但是我们可以通过为元素添加属性 tabIndex="0" 让任意元素可以聚焦；也可以通过添加属性 tabIndex="-1" 让该元素无法通过键盘聚焦（但仍可以通过 JavaScript 编程聚焦 elem.focus()）。
• 与通过 Tab 键聚焦元素相比，快捷键可以让用户更方便地操作扩展程序页面的元素，可以参考官方示例如何用快捷键进行导航。如果在扩展程序的页面内提供了快捷键，应该在设置页面 options page 中告知用户。
• 以下设置可以完善内容的可访问性
  • 文本：选择合适的字体和字号大小以确保文本内容的可读性，而且应该考虑视觉障碍者的使用体验，他们可能需要设置更大的字体，避免将自定义的快捷键与页面缩放的快捷键相冲突。为了确保版型的稳定，应该测试缩放至 200%，查看页面是否还显示正常。应该避免将文字嵌入到图片中，这样不仅无法调整字体，还无法让屏幕阅读器识别；如果必须将文字嵌入图片中，应该在图片的可替代文字（属性 alt）中包含这些文字内容，相关指南可以参考这里。
  • 颜色：背景和内容的颜色应该有足够的对比度，可以使用 Colour Contrast Check 工具检查。对于颜色丰富的图表，可以使用色弱模拟器 Coblis 来查看它在不同程度的色弱症人士眼里的效果，调整图表的配色，以使扩展程序对于这些用户更友好。可以考虑为提供不同的色彩主题，或允许自定义配色方案，以便用户有更好的体验。
  • 声音：如果扩展程序需要声音和视频传达信息，应该提供字幕和翻译功能，关于多媒体字幕的相关指南参考这里。
  • 图片：为图片提供可替代文字，即属性 alt（文字内容应该用于阐明图像的目的，而不是描述图片的细节），而对于占位图和纯装饰作用的图片，应该将该属性值留空 ""，或使用 CSS 来实现（而不是用 DOM）
    html

    <img src="img.jpg" alt="The logo for the extension">
    

更多相关资源

• Accessibility Technical Documentation
• A11ycasts with Rob Dodson

国际化 I18N 是指在开发扩展程序时，可以让用户按需切换语言

为了让扩展程序更方便地实现国际化，需要遵循以下建议：

• 将所有用户可见的内容（文本）放在一个 messages.json 文档中，并将该文档放在 _locales/_localeCode_ 相应的目录下（其中 _localeCode_ 是一个语言编码，例如英语就应该使用 en 表示）。
  提示

  如果项目中有 _locales 目录，需要在配置清单 manifest.json 的选项 default_locale 中声明默认语言，可以在这里查看具体的语言代码。

  
  在 messages.json 文档中，它以键值对的形式来定义内容，每一个键都包含一个需要国际化的项（大小写敏感），值是一个对象，其中常用的属性如下：
  • 属性 message 是需要显示的内容
  • （可选）属性 description 是对该项的描述，便于告知翻译者该项的意义。
  messages.json

  json

  {
    "search_string": {
      "message": "hello%20world",
      "description": "The string we search for. Put %20 between words that go together."
    },
    //  ...
  }
  

  提示

  键名不能以 @@ 开头，这一类的键名是保留预定义的项，常用的预定义 message 项如下：

  Message 键名	解释
  @@extension_id	扩展程序的 ID，对于非国际化的扩展程序该 message 项也可用，💡 但不能用于 manifest.json 中
  @@ui_locale	当前使用的语言
  @@bidi_dir	当前的文字方向，ltr 表示从左往右书写的文字，rtl 表示从右往左书写的文字

  例如在 CSS 中使用扩展程序中的静态图片作为背景

  css

  body {
    background-image:url('chrome-extension://__MSG_@@extension_id__/background.png');
  }
  

• 然后就可以在项目的其他文档中，通过 message 项来使用相应的数据：
  • 在 manifest.json 或 CSS 文档中，通过 __MEG_messagename__ 来使用 message 相应的项 messagename
  • 在扩展程序页面或 JavaScript 脚本中，通过方法 chrome.i18n.getMessage("messagename") 获取相应的项 messagename
  
  

  

  Tip

  每次新增一种语言，就需要新增一个 message 文件到 _locales/_localeCode_ 目录里。每一种语言中，不必包含与默认语言中定义的全部 message 项。

  
  

  

  
  以上示例是支持英语、西班牙语、韩语的扩展程序项目文件结构
  Tip

  浏览器会基于用户的语言设置和扩展程序的 default_locale 设置来自动选择采用哪一个 messages.json 文档

扩展程序可以基于 OAuth 2.0 获取授权，访问 Chrome 用户信息，具体参考 chrome.identity API

管理已安装和正在运行的扩展程序，具体参考 chrome.management API。

该交互控件是指在浏览器工具栏的扩展程序图标，供用户点击，可以执行预定的操作。

它也可以作为唤起其他交互控件的入口，例如通过适当的配置，在悬停时可以显示提示框 tooltip，在点击时可以弹出弹出框 popup。

如果要使用该控件，需要先在配置清单 manifest.json 的选项 action 中进行声明/注册，例如指定所使用的图标文件的路径，如果与该控件交互时，使用了 popup 弹出页面，则还需要要指定弹出页面相对应的 HTML 文件

{
  // ...
  "action": {
    // 图标文件
    "default_icon": {              // optional
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
    // 提示框
    "default_title": "Click Me",   // optional, shown in tooltip
    // 弹出框
    "default_popup": "popup.html"  // optional
  },
}

const canvas = new OffscreenCanvas(16, 16);
const context = canvas.getContext('2d');
context.clearRect(0, 0, 16, 16);
context.fillStyle = '#00FF00';  // Green
context.fillRect(0, 0, 16, 16);
const imageData = context.getImageData(0, 0, 16, 16);
chrome.action.setIcon({imageData: imageData}, () => { /* ... */ });

chrome.action.setTitle({title: 'this is tooltip content'})

chrome.storage.local.get('signed_in', (data) => {
  if (data.signed_in) {
    chrome.action.setPopup({popup: 'popup.html'});
  } else {
    chrome.action.setPopup({popup: 'popup_sign_in.html'});
  }
});

// 设置 badge 文字内容
chrome.action.setBadgeText(
  // 配置对象
  {
    // 标记内容
    text: 'NEW'
  }
);

// 通过多种方式设置 badge 背景颜色
chrome.action.setBadgeBackgroundColor(
  // 配置对象
  {
    // 支持以数组表示 RGBA 颜色
    color: [0, 255, 0, 0] // Green
  },
  // callbackFn 回调函数
  () => { /* ... */ },
);


chrome.action.setBadgeBackgroundColor(
  {
    // 支持 HEX 表示颜色
    color: '#00FF00', // Also green
  }
  () => { /* ... */ },
);

chrome.action.setBadgeBackgroundColor(
  {
    // 支持以颜色名称指定颜色
    color: 'green' // Also, also green
  },
  () => { /* ... */ }, // callbackFn
);

function getTabId() { /* ... */}
function getTabBadge() { /* ... */}

chrome.action.setBadgeText(
  {
    text: getTabBadge(tabId),
    tabId: getTabId(),
  },
  () => { ... }
);

该交互控件是指浏览器的右键菜单，可以通过扩展程序往其中添加选项，除了可以针对整个页面，还可以针对特定的 DOM 元素，或 action 图标，添加右键菜单项。

如果要使用该控件，需要先在配置清单 manifest.json 的选项 permissions 中进行声明/注册相关的权限。而且为了便于将菜单选项（通过图标指示）与扩展程序相匹配，需要在配置清单的选项 icons 中指定图标文件，最好提供多种尺寸的图片文件

{
  // ...
  "permissions": [
    "contextMenus"
  ],
  "icons": {
    "16": "icon-bitty.png",
    "48": "icon-small.png",
    "128": "icon-large.png"
  },
}

// background.js
chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({
    id: key,
    title: 'context menu demo',
    type: 'normal',
    contexts: ['selection'],
  });
});

该交互控件是指地址栏上的搜索关键词，当用户在地址栏输入相应的关键词，就会触发 Omnibox（唤起相应的扩展程序），接下来用户在地址栏中输入内容是直接与该扩展程序进行交互。一般会在扩展程序中预先设置一系列的搜索建议，当用户输入的内容模糊匹配成功时，就会在一个 dropdown 中显示相应的搜索建议。

如果要使用该控件，需要先在配置清单 manifest.json 的选项 omnibox 中进行声明注册。当 Omnibox 被触发时，扩展程序图标（以灰阶的形式展示）和名称会显示在地址栏的左侧，了便于识别所以需要在配置清单的选项 icons 中指定图标文件，最好提供多种尺寸的图片文件（默认使用高和宽为 16px 的图标）

处理该控件的交互逻辑的代码则是在后台脚本 background script的 service worker 中设置，基于事件监听-响应的原理

{
  // ...
  "background": {
    "service_worker": "background.js"
  },
  "omnibox": { "keyword" : "demo" },
  "icons": {
    "16": "icon-bitty.png",
    "48": "icon-small.png",
    "128": "icon-large.png"
  },
}

以上示例将扩展程序的 Omnibox 触发关键词设定为 demo，那么当用户在地址栏输入 demo 时，就会在下拉框显示一个扩展程序名称的选项，可以点击该选项、或按 Tab 键、或键入空格 Space，即可触发该扩展程序的 Omnibox

Omnibox 交互控件一般是通过监听相关的事件实现的

chrome.omnibox.onInputChanged.addListener((text, suggest) => {
  if(!text) return;
  suggest([
      {
          content: text,
          description: `search for ${text}`
      }
  ])
});

chrome.omnibox.onInputEntered.addListener((text, disposition) => {
  if(!text) return;
  console.log('inputEntered: ' + text);
  // Encode user input for special characters , / ? : @ & = + $ #
  var newURL = 'https://www.google.com/search?q=' + encodeURIComponent(text);
  chrome.tabs.create({ url: newURL });
  console.log(disposition)
});

该交互控件是通过覆写页面实现的，扩展程序可以覆写三个 Chrome 的特殊页面：

• Bookmark Manager：书签管理页面 chrome://bookmarks
• History：历史记录页面 chrome://history
• New Tab：新建标签页 chrome://newtab

如果要使用该控件，需要先在配置清单 manifest.json 的选项 chrome_url_overrides 中进行声明/注册，指定需要覆写的页面（bookmarks、history、newtab 三者之一）

{
  // ...
  "chrome_url_overrides" : {
    "newTab": "newPage.html" // 覆写新建标签页
  },
  ...
}

为了提供更好的用户体验，用于替换页面的 HTML 文档应该遵循以下指引：

• 页面文件大小应该较小，便于快速加载显示，避免使用同步访问网络或数据库资源，导致渲染阻塞
• 包含明确的信息，告知用户当前浏览的是 Chrome 的特殊页面
• 不要在新建标签页使用输入框聚焦功能，因为新建页面时，标签页的地址栏会首先获取焦点

该交互控件是指使用快捷键操作扩展程序，可以通过快捷键激活 action 或执行特定的命令

如果要使用该控件，需要先将这些快捷键在配置清单 manifest.json 的选项 commands 中进行声明/注册。

该选项的值是一个对象，每一个属性对应于一个命令，其属性名称是一个用于描述命令的名称，属性值则是一个对象用于描述该命令的相关信息

命令描述对象包含了关于快捷键定义的信息，该对象一般有两个选项

• suggested_key（可选）声明默认的快捷键
  其值可以是一个表示（跨平台适用的）快捷键的字符串，或是一个对象（以便针对不同的系统平台设定不同的快捷键，其中系统平台支持 default、chromeos、linus、mac、windows）
  如果该选项省略，则该命令默认没有相应的触发快捷键，相应等待用户来设定后再生效
• description 一段告知用户该快捷键功能作用的字符串，它会显示在扩展程序的快捷键管理界面中 chrome://extensions/shortcuts，对于标准快捷键 standard commands 它是必须的，对于 action commands 是可选的。

{
  // ...
  "commands": {
    "run-foo": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Run \"foo\" on the current page."
    },
    "_execute_action": {
      "suggested_key": {
        "windows": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y",
        "chromeos": "Ctrl+Shift+U",
        "linux": "Ctrl+Shift+J"
      }
    },
  },
}

响应快捷键的逻辑代码一般编写在后台脚本 background script中，使用 chrome.commands.onCommand.addListener() API 监听快捷键，并触发相应的回调函数

{
  "name": "Tab Flipper",
  // ...
  "commands": {
    "flip-tabs-forward": {
      "suggested_key": {
        "default": "Ctrl+Shift+Right",
        "mac": "Command+Shift+Right"
      },
      "description": "Flip tabs forward"
    },
    "flip-tabs-backwards": {
      "suggested_key": {
        "default": "Ctrl+Shift+Left",
        "mac": "Command+Shift+Left"
      },
      "description": "Flip tabs backwards"
    }
  }
  // ...
}

chrome.commands.onCommand.addListener(command => {
  // 如果用户触发了扩展程序所注册的快捷键，则监听器会触发回调函数
  // 回调函数传入的参数 command 是命令的名称
  // command will be "flip-tabs-forward" or "flip-tabs-backwards"
  chrome.tabs.query({currentWindow: true}, tabs => {
    // Sort tabs according to their index in the window.
    tabs.sort((a, b) => a.index - b.index);
    const activeIndex = tabs.findIndex((tab) => tab.active);
    const lastTab = tabs.length - 1;
    let newIndex = -1;
    if (command === 'flip-tabs-forward') {
      newIndex = activeIndex === 0 ? lastTab : activeIndex - 1;
    } else {  // 'flip-tabs-backwards'
      newIndex = activeIndex === lastTab ? 0 : activeIndex + 1;
    }
    chrome.tabs.update(tabs[newIndex].id, {active: true, highlighted: true});
  });
});

// Only use this function during the initial install phase.
// After installation the user may have intentionally unassigned commands.
// 在扩展程序安装完成后执行
chrome.runtime.onInstalled.addListener((reason) => {
  if (reason === chrome.runtime.OnInstalledReason.INSTALL) {
    checkCommandShortcuts();
  }
});

// 检查是否存在快捷键冲突
function checkCommandShortcuts() {
  // 获取当前的扩展程序所有命令
  chrome.commands.getAll((commands) => {
    let missingShortcuts = [];

    for (let {name, shortcut} of commands) {
      // 如果存在快捷键冲突
      // 则有些命令的快捷键的默认值就无法设置，即 shortcut 值为空字符串
      if (shortcut === '') {
        missingShortcuts.push(name);
      }
    }

    // 如果该扩展程序与其他扩展程序真的存在快捷键冲突
    if (missingShortcuts.length > 0) {
      // Update the extension UI to inform the user that one or more
      // commands are currently unassigned.
      // 以可视化的元素，如弹出通知，来告知用户
    }
  });
}

在为扩展程序设置（默认的）快捷键时，应该注意以下几点

• 快捷键必须包含 Ctrl 或 Alt 两者之一，对大小写敏感，支持使用以下按键组合为快捷键：
  • 字母键 A-Z
  • 数字键 0~9
  • 标准的功能键
    • 通用键 Comma, Period, Home, End, PageUp, PageDown, Space, Insert, Delete
    • 方向键 Up, Down, Left, Right
  • 修饰键 Ctrl, Alt, Shift, MacCtrl (macOS only), Command (macOS only), Search (Chrome OS only)
  注意

  不支持 Tab 键，媒体键不能与修饰键组合

• 为了响应用户按下快捷键，需要在后台脚本 background script中使用 chrome.commands.onCommand.addListener API 进行监听。但是和标准的快捷键 standard commands 不同，对于激活 action 的快捷键，无法通过以上方法进行监听。
  可以在弹出框 popup 的脚本文件中，监听 DOMContentLoaded 事件来替代
• 默认情况下，注册的快捷键是 Chrome 浏览器的局部快捷键，即只有当浏览器是当前系统的激活应用时（浏览器被选中的状态下），按下快捷键，扩展程序才响应
  也可以在快捷键定义对象中，通过属性 global: true 将该命令所对应的快捷键设定为全局快捷键
  建议

  建议注册全局快捷键限制在 Ctrl+Shift+[0..9] 这样的快捷键组合中，以避免覆盖掉其他系统级别的快捷键

  manifest.json

  json

  {
    // ...
    "commands": {
      "toggle-feature-foo": {
        "suggested_key": {
          "default": "Ctrl+Shift+5"
        },
        "description": "Toggle feature foo",
        "global": true
      }
    },
  }
  

  但是 Chrome OS 不支持扩展程序设定全局快捷键

可以使用扩展程序定制浏览器的书签管理行为。除了可以使用覆写页面 Override Page 的方式定制书签管理页面，还可以使用 Chrome.bookmarks 一些列 API 操作书签。

如果要使用 Chrome.bookmarks API，需要先在配置清单 manifest.json 的选项 permissions 中进行相应的权限声明/注册

{
  // ...
  "permissions": ["bookmarks"]
}

书签数据是以树形结构组织的，每一个节点对象 bookmarks.BookmarkTreeNode 是一个书签或一个文件夹（也称为组），它具有多种属性，以下列出常用的几个：

• id （必须）该节点的唯一标识符
• title （必须）节点所展示的名称
• children 所包含的子节点（数组）
• index 该节点在父级文件夹中的索引（从 0 开始）
• parentId 父级文件夹的唯一标识符（如果是根节点，则会省略该属性）
• url 书签的链接，如果节点表示的是文件夹，则可以省略该属性

使用方法 chrome.bookmarks.create() 创建一个书签节点

该方法接收两个参数

• 第一个是节点的属性对象
• 第二个（可选）参数是回调函数

// 创建一个文件夹
// 文件夹名称为 Extension bookmarks
chrome.bookmarks.create(
  {
    'parentId': bookmarkBar.id,
    'title': 'Extension bookmarks'
  },
  function(newFolder) {
    console.log("added folder: " + newFolder.title);
  },
);

// 创建一个书签
// 书签名称为 Extensions doc，指向的链接为 https://developer.chrome.com/docs/extensions
chrome.bookmarks.create({
  'parentId': extensionsFolderId,
  'title': 'Extensions doc',
  'url': 'https://developer.chrome.com/docs/extensions',
});

扩展程序可以删除特定时间段的用户浏览数据。

如果要使用 Chrome.browsingData API，需要先在配置清单 manifest.json 的选项 permissions 中进行相应权限声明/注册

{
  // ...
  "permissions": ["browsingData"]
}

使用方法 chrome.browsingData.remove() 删除用户浏览数据。

// 删除一周以来的数据
const millisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
const oneWeekAgo = (new Date()).getTime() - millisecondsPerWeek;

// 删除所有类型的数据
chrome.browsingData.removeCookies({
  "since": oneWeekAgo
}, callback);

const callback = function () {
  // Do something clever here once data has been removed.
};

// 或删除指定类型的的浏览数据
chrome.browsingData.remove({
  "since": oneWeekAgo
}, {
  "appcache": true,
  "cache": true,
  "cacheStorage": true,
  "cookies": true,
  "downloads": true,
  "fileSystems": true,
  "formData": true,
  "history": true,
  "indexedDB": true,
  "localStorage": true,
  "passwords": true,
  "serviceWorkers": true,
  "webSQL": true
}, callback);

还可以在该方法的第一个参数中设置属性 origins 或 excludeOrigins 以删除指定网页（或不包含指定网页）下的用户数据（适用于cookies、cache、storage (CacheStorage, FileSystems, IndexedDB, LocalStorage, ServiceWorkers, and WebSQL) 类型的数据）

chrome.browsingData.remove({
  "origins": ["https://www.example.com"]
}, {
  "cacheStorage": true,
  "cookies": true,
  "fileSystems": true,
  "indexedDB": true,
  "localStorage": true,
  "serviceWorkers": true,
  "webSQL": true
}, callback);

由于删除用户数据可能需要较长的时间（基于用户产生了多少操作历史数据），因此推荐设置回调函数（它在清除完成后执行），以可视化的信息提示，告知用户最新的状态。

扩展程序可以对浏览器中的下载功能进行操作，通过 chrome.downloads API 可以启动、监控、操作和搜索下载项。

如果要使用 Chrome.downloads API，需要先在配置清单 manifest.json 的选项 permissions 中进行相应权限声明/注册

{
  // ...
  "permissions": ["downloads"]
}

扩展程序可以操作浏览器的历史记录。除了可以使用覆写页面 Override Page 的方式定制历史记录页面，还可以使用 Chrome.history 一些列 API 操作历史记录。

如果要使用 Chrome.history API，需要先在配置清单 manifest.json 的选项 permissions 中进行相应权限声明/注册

{
  // ...
  "permissions": ["history"]
}

扩展程序可以创建、修改、重排标签页。

虽然使用 Chrome.tabs 部分的 API 可以不进行权限声明就直接使用，但是仍推荐在配置清单 manifest.json 的选项 permissions 中进行相应的权限声明/注册，因为需要访问标签的属性 url、pendingUrl、title、favIconUrl 时，仍然需要权限许可的。

{
  // ...
  "permissions": ["tabs"]
}

以下是一些常见的应用场景

• 使用方法 chrome.tabs.create() 在新的标签页打开一个网页
  background.js

  js

  // 可以在安装成功后，打开扩展程序的 onboard 介绍页面
  chrome.runtime.onInstalled.addListener((reason) => {
    if (reason === chrome.runtime.OnInstalledReason.INSTALL) {
      chrome.tabs.create({
        url: 'onboarding.html'
      });
    }
  });
  

  注意

  在内容脚本 content scripts 中不能使用 chrome.tabs.create() 方法

• 使用方法 chrome.tabs.query({ active: true, currentWindow: true }) 查询/获取符合条件的标签页
  background.js

  js

  async function getCurrentTab() {
    // 查询的条件 queryOptions 是当前的窗口正激活/选中的标签页
    let queryOptions = { active: true, currentWindow: true };
    // 查询并返回符合条件的标签页对象列表
    // 由于这里查询返回的页面只有一个，所以可以直接用解构来获取该标签页对象
    let [tab] = await chrome.tabs.query(queryOptions);
    return tab;
  }
  

  注意

  在内容脚本 content scripts 中不能使用 chrome.tabs.query() 方法

• 使用方法 chrome.tabs.update() 更新标签页面的状态
  background.js

  js

  function toggleMuteState(tabId) {
    chrome.tabs.get(tabId, async (tab) => {
      // 获取标签页的静音状态，并进行切换
      let muted = !tab.mutedInfo.muted;
      // 更新标签页的静音状态
      await chrome.tabs.update(tabId, { muted });
      console.log(`Tab ${tab.id} is ${ muted ? 'muted' : 'unmuted' }`);
    });
  }
  

  注意

  在内容脚本 content scripts 中不能使用 chrome.tabs.get() 方法和 chrome.tabs.update() 方法

• 使用方法 chrome.tabs.move() 重排标签页
  background.js

  js

  // 监听标签页激活事件（点击浏览器最顶部一栏进行激活标签页切换时会触发该事件）
  chrome.tabs.onActivated.addListener(activeInfo => move(activeInfo));
  
  // 将激活的标签页移到第一的位置
  async function move(activeInfo) {
    try {
      await chrome.tabs.move(activeInfo.tabId, {index: 0});
      console.log('Success.');
    } catch (error) {
      // 如果用户在拖拽标签页时
      if (error == 'Error: Tabs cannot be edited right now (user may be dragging a tab).') {
        setTimeout(() => move(activeInfo), 50);
      }
    }
  }
  

扩展程序可以创建、修改、重排浏览器窗口

由于使用 Chrome.windows API 时，会获取标签页的相关信息 ，所以需要先在配置清单 manifest.json 的选项 permissions 中进行 tabs 的权限声明

{
  // ...
  "permissions": ["tabs"],
}

在配置清单 manifest.json 的选项 permissions 中声明 activeTab 权限，可以临时获取许可，以访问当前激活的标签页，并在当前页面使用 tabs 相关的 API。

{
  // ...
  "permissions": ["activeTab"]
}

由于扩展程序的很多使用场景都只需临时访问当前激活的标签页，而不是针对特定的网页，所以与基于 URL 规则获取的永久访问权限相比，该类型的权限更常用。

该权限基于用户的主动请求临时获取的（例如通过点击 Action 控件），而且仅限制在当前激活页面，相对而言更安全。

支持多种用户交互方式激活 activeTab 权限，以与当前激活的标签页进行交互

• 通过 Action
  js

  // 点击浏览器工具栏上的扩展程序图标
  chrome.action.onClicked.addListener((tab) => {
    // 获取当前激活的标签页对象
    // 并植入内容脚本
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: reddenPage
    });
  });
  
  // 将网页背景色变为绿色
  function reddenPage() {
    document.body.style.backgroundColor = 'green';
  }
  

• 通过 Context Menu
• 通过 Commands
• 通过 Omnibox

该权限一般用以替代在配置清单 manifest.json 的选项 host_permissions 中声明的 <all_urls> 权限，达到访问（任意 url）当前页面的效果，而且不会在安装扩展程序时弹出警告。

内容脚本 content script 是运行在网页中的 JavaScript 代码，它除了可以访问页面的 DOM 对象，还可以以通过信息传递 message passing 的方式与扩展程序进行通讯，可以将它看作是页面与扩展程序之间的桥梁角色。

// Code for displaying <extensionDir>/images/myimage.png

// 访问扩展程序的静态资源（图片）
var imgURL = chrome.runtime.getURL("images/myimage.png");
// 将图片展示在运行着内容脚本的页面上
document.getElementById("someImage").src = imgURL;

<html>
  <button id="mybutton">click me</button>
  <script>
    const greeting = "hello, ";
    const button = document.getElementById("mybutton");
    button.person_name = "Bob";
    button.addEventListener("click", () =>
      alert(greeting + button.person_name + ".")
    , false);
  </script>
</html>

const greeting = "hola, ";
const button = document.getElementById("mybutton");
button.person_name = "Roberto";
button.addEventListener("click", () =>
  alert(greeting + button.person_name + ".")
, false);

{
  // ...
  "content_scripts": [
    {
      "matches": ["https://*.nytimes.com/*"],
      "css": ["my-styles.css"],
      "js": ["content-script.js"]
    }
  ],
}

{
  // ...
  "permissions": ["scripting"],
}

{
  // ...
  "permissions": [
    "scripting",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  }
}

// 需要植入的代码
document.body.style.backgroundColor = 'orange';

chrome.action.onClicked.addListener((tab) => {
  // 在指定的标签页中植入指定的脚本或样式文件
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: ['content-script.js']
  });
});

const css = 'body { background-color: red; }';
const tabId = getTabId();
chrome.scripting.insertCSS(
  {
    target: {tabId: tabId},
    css: css,
  },
  () => { ... }
);

// content scripts
const port = chrome.runtime.connect();

window.addEventListener("message", (event) => {
  // We only accept messages from ourselves
  if (event.source != window) {
    return;
  }

  if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Content script received: " + event.data.text);
    port.postMessage(event.data.text);
  }
}, false);

<!-- web page -->
<button>send message</button>

<script>
document.getElementById("theButton").addEventListener("click", () => {
  window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
}, false);
</script>

内容脚本 content script 以植入网页的方式运行，因此它受到同源策略的限制

由于内容脚本 content scripts 受到同源政策的限制，可以通过信息传递 message passing 借助扩展程序来 fetch 相应的服务器获取数据。

chrome.runtime.sendMessage(
  {
    contentScriptQuery: 'fetchUrl',
    url: 'https://another-site.com/price-query?itemId=' +
              encodeURIComponent(request.itemId)},
  response => parsePrice(response.text())
);

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'fetchUrl') {
      // WARNING: SECURITY PROBLEM - a malicious web page may abuse
      // the message handler to get access to arbitrary cross-origin
      // resources.
      fetch(request.url)
        .then(response => response.text())
        .then(text => sendResponse(text))
        .catch(error => ...)
    return true;  // Will respond asynchronously.
  }
});

// content-script.js
chrome.runtime.sendMessage(
  {
    contentScriptQuery: 'queryPrice',
    itemId: 12345
  },
  price => {...}
);

// backgound.js
chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.contentScriptQuery == 'queryPrice') {
      var url = 'https://another-site.com/price-query?itemId=' +
            encodeURIComponent(request.itemId);
      fetch(url)
        .then(response => response.text())
        .then(text => parsePrice(text))
        .then(price => sendResponse(price))
        .catch(error => ...)
    return true;  // Will respond asynchronously.
  }
});

在扩展程序中使用从外部服务器的返回的数据时，需要谨慎处理，应该更安全的逻辑代码 和 API。

例如对于以下不安全的处理方法

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be evaluating an evil script!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be injecting a malicious script!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();