实现操作

操作是指用户点击工具栏图标(通常称为扩展程序的操作图标)后所发生的情况。某项操作使用 Action API 调用扩展程序功能或打开弹出式窗口。本页面介绍了如何调用扩展程序功能。如需使用弹出式窗口,请参阅添加弹出式窗口

注册操作

如需使用 chrome.action API,请将 "action" 键添加到扩展程序的清单文件中。如需查看此字段的可选属性的完整说明,请参阅 chrome.action API 参考文档的清单部分

manifest.json:

{
  "name": "My Awesome action Extension",
 ...
  "action": {
   ...
  }
 ...
}

响应操作

注册 onClicked 处理程序,以便在用户点击操作图标时使用。如果在 manifest.json 文件中注册了弹出式窗口,则不会触发此事件。

service-worker.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.action.setTitle({
    tabId: tab.id,
    title: `You are on tab: ${tab.id}`});
});

有条件地激活操作

借助 chrome.declarativeContent API,您可以根据网页网址或在 CSS 选择器与网页上的元素匹配时启用扩展程序的操作图标。如果某个扩展程序的操作图标被停用,则该图标会灰显。如果用户点击已停用的图标,系统就会显示该扩展程序的上下文菜单。

<ph type="x-smartling-placeholder">
</ph> “已停用”操作图标 <ph type="x-smartling-placeholder">
</ph> “已停用”操作图标。

行动徽章

标记是放置在操作图标顶部的一些格式化文本,用于指示扩展程序状态或用户需要执行的操作等信息。为了演示这一点,饮水示例会显示一个带有“开启”的标志向用户显示他们已成功设置闹钟,并且在扩展程序空闲时不显示任何内容。标记最多可包含四个字符。

<ph type="x-smartling-placeholder">
</ph> 不带标志但带有标志的扩展程序图标。
不带徽章(左)和带徽章(右)的扩展程序图标。

通过调用 chrome.action.setBadgeText() 设置徽章的文本,并通过调用 chrome.action.setBadgeBackgroundColor()` 设置背景颜色。

service-worker.js:

chrome.action.setBadgeText({text: 'ON'});
chrome.action.setBadgeBackgroundColor({color: '#4688F1'});

提示

在 manifest.json 文件中的 "action" 键下的 "default_title" 字段中注册提示。

manifest.json:

{
  "name": "Tab Flipper",
 ...
  "action": {
    "default_title": "Press Ctrl(Win)/Command(Mac)+Shift+Right/Left to flip tabs"
  }
...
}

您还可以通过调用 action.setTitle() 来设置或更新提示。如果未设置提示,系统会显示扩展程序的名称。