action 工具栏

官方文档

控制工具栏中扩展程序的图标，manifest.json必须配置action字段

icon图标

// manifest.json
{
  "action": {
    "default_icon": "icon-48.png"
  }
}

// background.js
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,
  // path: 相对图像路径
  path: {
    "48": "icon-48.png",
    "128": "icon-128.png"
  }
}, () => { 
  /* callback */ 
});

Tooltip(Title)提示

当用户将鼠标指针悬停在工具栏中的扩展图标上时，将显示工具提示或标题

// manifest.json
{
  "action": {
    "default_title": "Click here!"
  }
}

// background.js
chrome.action.setTitle({
  title: 'Hello World!'
}, () => {  /* ... */ });

Badge徽章

在工具栏图标上显示徽章，徽章是一个小的文本标签，用于显示有关扩展程序的信息，例如未读消息数

提示

在哪个部分设置Badge?

// 设置徽章背景颜色
chrome.action.setBadgeBackgroundColor({
  color: '#FF0000'
}, () => {  /* ... */ });

// 设置徽章文本
chrome.action.setBadgeText({
  text: 'Hello World!',
  // 每个选项卡的扩展操作可以具有不同的状态
  // 如果省略该 tabId 属性，则将该设置视为全局设置
  tabId: getTabId(),
}, () => {  /* ... */ });

// 设置徽章文本颜色
chrome.action.setBadgeTextColor({
  color: '#ffffff'
}, () => {  /* ... */ });

Popup弹窗/onClicked事件

点击工具栏图标时，显示弹窗，回调方法参数为当前tab信息

// manifest.json
{
  "action": {
    "default_popup": "popup.html"
  }
}

// background.js
// 监听popup图标点击事件
chrome.action.onClicked.addListener((tab) => {
  // 打开popup弹窗
  chrome.action.openPopup();

  // 将内容脚本注入到当前页面中
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['content.js']
  });

  // 打开新页面
  chrome.tabs.create({ url: 'index.html' });
});

disabled()/enable()方法

禁用（不可点击） / 启用

// 禁用
chrome.action.disable(tabId, () => {  /* ... */ });

// 启用
chrome.action.enable(tabId, () => {  /* ... */ });

// 获取当前状态
chrome.action.isEnabled({tabId}, (result) => {  /* ... */ });