pageAction(地址栏右侧)

所谓pageAction，指的是只有当某些特定页面打开才显示的图标，它和browserAction最大的区别是一个始终都显示，一个只在特定情况才显示。

需要特别说明的是早些版本的Chrome是将pageAction放在地址栏的最右边，左键单击弹出popup，右键单击则弹出相关默认的选项菜单：

pageAction(地址栏右侧) - 图1

而新版的Chrome更改了这一策略，pageAction和普通的browserAction一样也是放在浏览器右上角，只不过没有点亮时是灰色的，点亮了才是彩色的，灰色时无论左键还是右键单击都是弹出选项：

pageAction(地址栏右侧) - 图2

具体是从哪一版本开始改的没去仔细考究，反正知道v50.0的时候还是前者，v58.0的时候已改为后者。

调整之后的pageAction我们可以简单地把它看成是可以置灰的browserAction。

  • chrome.pageAction.show(tabId) 显示图标；
  • chrome.pageAction.hide(tabId) 隐藏图标；

示例(只有打开百度才显示图标)：

  1. // manifest.json
  2. {
  3.  "page_action":
  4.  {
  5.  "default_icon": "img/icon.png",
  6.  "default_title": "我是pageAction",
  7.  "default_popup": "popup.html"
  8.  },
  9.  "permissions": ["declarativeContent"]
  10. }
  12. // background.js
  13. chrome.runtime.onInstalled.addListener(function(){
  14.  chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
  15.  chrome.declarativeContent.onPageChanged.addRules([
  16.  {
  17.  conditions: [
  18.  // 只有打开百度才显示pageAction
  19.  new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
  20.  ],
  21.  actions: [new chrome.declarativeContent.ShowPageAction()]
  22.  }
  23.  ]);
  24.  });
  25. });

效果图：

pageAction(地址栏右侧) - 图3