一、描述

chrome.pageAction API 能够在 chrome 地址栏右边的 toolbar 上设置图标,表示能够在当前页面上进行的页面操作。

不过并不是所有的页面都能够使用,如果不能,icon 是灰色的。

page_action 的使用本身就是带条件的

chrome 30 之后支持

需要在 manifest 中配置 page_action 字段

比较简单的使用示例是:

  • 订阅 RSS
  • 从页面的图片中制作一个幻灯片

官方文档中,示例了一个 RSS 功能,如果该页面能够进行 RSS 订阅,则会显示如下状态:

1.jpg

如果不能,则图标是灰色的:

2.jpg

一般是推荐使用 browser_action 以便于在任何页面都能够使用扩展程序

二、配置 Manifest

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["storage", "declarativeContent", "contextMenus"],
    "optional_permissions": [ "tabs"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_icon": {                   
        "16": "images/icon16.png",          
        "24": "images/icon24.png",        
        "32": "images/icon32.png"           
      },
      "default_title": "Google Mail",     
      "default_popup": "popup.html"     
    },
    "manifest_version": 2
  }

三、使用 page_action

1、 注意事项

  • 如果只是对某个(或者某几个)页面才起作用的时候,考虑使用 page_action ,否则考虑使用 brwoser_action
  • 不要频繁的对 icon 进行操作

2、API 列表

  • show − chrome.pageAction.show(integer tabId, function callback)
  • hide − chrome.pageAction.hide(integer tabId, function callback)
  • setTitle − chrome.pageAction.setTitle(object details, function callback)
  • getTitle − chrome.pageAction.getTitle(object details, function callback)
  • setIcon − chrome.pageAction.setIcon(object details, function callback)
  • setPopup − chrome.pageAction.setPopup(object details, function callback)
  • getPopup − chrome.pageAction.getPopup(object details, function callback)

四、API 使用示例

说明:

大部分 pageAction 的操作都是需要请求 tab.id,为了简化,我直接申请了 tabs 这个权限,并且获取当前 active 状态的 tab.id,因此每次点击更新扩展程序按钮,再选择打开 背景页 就会激活 pageAction

1、chrome.pageAction.show()

主要用来显示 page action 的 icon,当条件触发的时候,才会显示扩展程序激活状态。

当扩展程序 install 之后,通过 chrome.tabs.query 获取 tab,拿到的是 currentWindow 的 active 的 tab,然后再激活扩展程序。

// background.js 
chrome.runtime.onInstalled.addListener(() => {
    chrome.tabs.query({currentWindow: true, active : true}, (tabArr) => {
        console.log(tabArr);
        const activeTab = tabArr[0];
        if (!activeTab) {
            console.log('没有拿到 tab')
        }
        chrome.pageAction.show(activeTab.id, () => {
            console.log('激活成功');
        });   
    })
});

效果如下,同时下面列出了拿到的 tab 信息:

1.jpg

而此时也能够打开扩展程序:

3.jpg

2、chrome.pageAction.hide()

激活 pageAction 之后我在 popup.html 中加了两个按钮,分别能够激活和取消激活扩展程序,这时候,操作都是在 popup.js 中处理的

// popup.js

button2.onclick = () => {
    chrome.tabs.query({currentWindow: true, active : true}, (tabArr) => {
        const activeTab = tabArr[0];
        if (!activeTab) {
            console.log('Fail: no tab!')
        }
        chrome.pageAction.hide(activeTab.id, () => {
            console.log('hide success');
        });   
    })
}

4.jpg

3、chrome.pageAction.setTitle(object details, function callback)

设置 title 的 API 同样需要指定 tab,不过 setTitle 并不关心扩展程序的 pageAction 在目标的 tab 中是否是激活状态的。

比如下面的代码, 我获取了所有当前的 tab,并且每个 tab 都设置了不同的 title。

button3.onclick = () => {
    chrome.tabs.query({}, (tabArr) => {
        Array.isArray(tabArr) && tabArr.forEach((item ,index) => {
            chrome.pageAction.setTitle({
                tabId: item.id,
                title: `new pageAction title ---- ${index}`
            }, () => {
                console.log("setTitle Successed! tabId is: " + item.id)
            });
        })
    })
}

从结果中也可以发现,即使 tab 是非激活状态,也能够进行 setTtitle

5.jpg

其他 API

没有列出来的 API 基本的使用也是一样的,就不重复了。

6.jpg

五、完整代码

github 代码仓库:https://github.com/postbird/chrome-extensions-demo/tree/master/demo10-pageAction