地址栏按钮

通常称为页面操作按钮，此用户界面选项是添加到浏览器地址栏的按钮。用户点击该按钮与扩展进行交互。

Page action button is an icon of a dog paw print

页面操作和浏览器操作

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

区别在于

按钮的位置
- 页面操作显示在浏览器地址栏内。
- 浏览器操作显示在地址栏外部，位于浏览器工具栏中。
按钮的可见性
- 页面操作默认隐藏（尽管此默认值可以通过 show_matches 和 hide_matches 清单键属性更改），您可以调用 pageAction.show() 和 pageAction.hide() 以在特定选项卡中显示或隐藏它。
- 浏览器操作始终显示。

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

类型	书签操作	内容操作	选项卡操作
页面操作	将此页面添加为书签	Reddit 增强	发送选项卡
浏览器操作	显示所有书签	启用广告拦截	同步所有打开的选项卡

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

json

"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 示例，该示例实现了不带弹出窗口的页面操作。