引言：
在 Chrome 扩展的世界里，Action 是构建用户交互的关键元素之一。它犹如一座桥梁，将用户与扩展的各种功能紧密相连。
用Action可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。
可以通过chrome.action.enable() 和 chrome.action.disable() API来启用或禁用action。
Manifest
{
"name": "Action API Demo",
"version": "1.0",
"description": "Uses the Action API to change the badge text, icon, hover text, or popup page.",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_title": "Default Title",
"default_popup": "popups/popup.html",
"default_icon": {
"32": "icons/32.png",
"72": "icons/72.png",
"128": "icons/128.png",
"512": "icons/512.png"
}
},
"icons": {
"32": "icons/32.png",
"72": "icons/72.png",
"128": "icons/128.png",
"512": "icons/512.png"
}
}
UI的组成部分
一个 browser action 可以拥有一个icon、tooltip、badge、popup。
Icon
Browser action图标推荐使用宽高都为19像素，更大的图标会被缩小。
你可以用两种方式来设置图标: 使用一个静态图片或者使用HTML5canvas element。 使用静态图片适用于简单的应用程序，你也可以创建诸如平滑的动画之类更丰富的动态UI(如canvas element)。
静态图片可以是任意WebKit支持的格式，包括 BMP，GIF，ICO，JPEG或 PNG。
修改browser_action的manifest中 default_icon字段，或者调用setIcon()方法。
API
chrome.action.setIcon({ imageData })
示例
let lastIconIndex = 0;
const EMOJI = ['confetti', 'suit', 'bow', 'dog', 'skull', 'yoyo', 'cat'];
document
.getElementById('set-icon-button')
.addEventListener('click', async () => {
chrome.action.setBadgeText({ text: '' });
let index = lastIconIndex;
index = Math.floor(Math.random() * EMOJI.length);
if (index === lastIconIndex) {
index = (index + 1) % EMOJI.length;
}
const emojiFile = `images/emoji-${EMOJI[index]}.png`;
lastIconIndex = index;
const response = await fetch(chrome.runtime.getURL(emojiFile));
const blob = await response.blob();
const imageBitmap = await createImageBitmap(blob);
const osc = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
let ctx = osc.getContext('2d');
ctx.drawImage(imageBitmap, 0, 0);
const imageData = ctx.getImageData(0, 0, osc.width, osc.height);
chrome.action.setIcon({ imageData });
});
ToolTip
修改browser_action的manifest中default_title字段，或者调用setTitle()方法。你可以为default_title字段指定本地化的字符串；点击Internationalization查看详情。
API
chrome.action.getTitle({})
chrome.action.setTitle({ title })
示例
const titleInput = document.getElementById('title-input');
titleInput.addEventListener(
'input',
debounce(200, async (event) => {
const title = event.target.value;
chrome.action.setTitle({ title });
showActionTitle();
})
);
Badge
Browser action可以选择性的显示一个badge在图标上显示一些文本。Badges 可以很简单的为browser action更新一些小的扩展状态提示信息。
因为badge空间有限，所以只支持4个以下的字符。
设置badge文字和颜色可以分别使用setBadgeText() and setBadgeBackgroundColor()。
API
chrome.action.getBadgeText({})
chrome.action.setBadgeText({ text })
chrome.action.getBadgeTextColor({})
chrome.action.setBadgeTextColor({ color })
示例
document
.getElementById('badge-text-input')
.addEventListener('input', async (event) => {
const text = event.target.value;
await chrome.action.setBadgeText({ text });
showBadgeText();
});
Popup
如果browser action拥有一个popup，popup会在用户点击图标后出现。popup可以包含任意你想要的HTML内容，并且会自适应大小。
在你的browser action中添加一个popup，创建弹出的内容的HTML文件。 修改browser_action的manifest中default_popup字段来指定HTML文件， 或者调用setPopup()方法。
API
chrome.action.getPopup({})
chrome.action.setPopup({ popup })
示例
document
.getElementById('popup-options')
.addEventListener('change', async (event) => {
const popup = event.target.value;
await chrome.action.setPopup({ popup });
await getCurrentPopup();
});
