这篇翻译不完整。请帮忙从英语翻译这篇文章

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

文档标签和贡献者

此页面的贡献者: yongm126
最后编辑者: yongm126,