地址栏按钮

页面操作和浏览器操作

地址栏按钮（或页面操作）与工具栏按钮（或浏览器操作）类似。

区别在于

• 按钮的位置

  • 页面操作显示在浏览器地址栏内部。
  • 浏览器操作显示在地址栏外部，位于浏览器工具栏中。

• 按钮的可见性

  • 页面操作默认隐藏（尽管可以通过 show_matches 和 hide_matches manifest 键 属性更改此默认设置），您可以通过调用 pageAction.show() 和 pageAction.hide() 来显示或隐藏特定标签页上的它。
  • 浏览器操作始终显示。

当操作与当前页面相关时，请使用页面操作。当操作与整个浏览器或多个页面相关时，请使用浏览器操作。例如：

指定页面操作

您可以使用 manifest.json 中的 page_action 键来定义页面操作的属性。

"page_action": {
  "default_icon": {
    "19": "button/geo-19.png",
    "38": "button/geo-38.png"
  },
  "default_title": "Whereami?"
}

唯一必需的键是 default_icon。

有两种方法可以指定页面操作：带弹出窗口或不带弹出窗口。

• 不带弹出窗口： 当用户点击按钮时，会向扩展程序分派一个事件，扩展程序使用 pageAction.onClicked 来监听该事件。

  js

  browser.pageAction.onClicked.addListener(handleClick);
  

• 带弹出窗口： 不会分派 click 事件。相反，当用户点击按钮时，会显示弹出窗口。然后用户与弹出窗口进行交互。当用户点击弹出窗口外部时，它会自动关闭。有关创建和管理弹出窗口的更多详细信息，请参阅 弹出窗口 文章。

请注意，您的扩展程序只能有一个页面操作。

您可以使用 pageAction API 以编程方式更改页面操作的任何属性。

图标

有关如何创建要与页面操作一起使用的图标的详细信息，请参阅 Acorn 设计系统 文档中的 图标设计。

示例

GitHub 上的 webextensions-examples 存储库包含 chill-out 示例，该示例实现了一个不带弹出窗口的页面操作。