地址栏按钮

翻译不完整。 请帮助我们翻译这篇文章！

通常来说的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 。