通常来说的page action,是添加到浏览器地址栏中的按钮。用户通过点击这个按钮与你的扩展进行交互。
地址栏按钮(Page actions)和工具栏按钮( browser actions)
地址栏按钮(或 page action) 与工具栏按钮(或 browser action)非常相似。
其不同之处为:
- 位置:
- 地址栏按钮是显示在浏览器的地址栏内;
- 工具栏按钮不是显示在地址栏内,而是在浏览器的工具栏上。
- 可见性:
- 地址栏按钮默认是隐藏的(尽管可以通过manifest中“show_matches和hide_matches来改变),而你可以在特定tabs中调用pageAction.show()和pageAction.hide()来显示或隐藏它。
- 工具栏按钮总是可见的。
当动作(行为)与当前页面关联时,使用地址栏按钮,而当动作(行为)与浏览器相关或与多个页面相关时使用工具栏按钮。例如:
类型 | 书签动作 | 内容动作 | 标签操作 |
---|---|---|---|
page action | 将本页面保存到书签 | Reddit enhancement | Send tab |
browser action | 显示所有书签 | 使能ad-blocking | 同步所有打开的标签 |
定义地址栏按钮
你可以在manifest.json中使用page_action键定义地址栏按钮的属性:
"page_action": {
"browser_style": true,
"default_icon": {
"19": "button/geo-19.png",
"38": "button/geo-38.png"
},
"default_title": "Whereami?"
}
仅default_icon是强制(必需)的。
有两种方式定义地址栏按钮:带popup窗口和无popup窗口。如果你没有指定一个popup,则当用户点击此按钮时,事件被派送到使用pageAction.onClicked侦听器的扩展:
browser.pageAction.onClicked.addListener(handleClick);
如果你指定了一个popup,则点击事件不被派送,在用户点击按钮时显示popup。用户可以与popup进行交互,并且当用户点击popup以外区域时,popup自动关闭。参见Popup可获得创建和管理popups更详细内容。
注意你的扩展只能有一个地址栏按钮。
通过使用pageAction API,你可以以编程方式修改地址栏按钮的任何属性。
Icons
如何创建用于地址栏按钮的ICONS的详细内容,请参见Photon Design System文档中的Iconography节。
示例
GitHub上的 webextensions-examples 库中包括了实现无popup地址栏按钮的例子 chill-out 。