[12] chrome 扩展开发 - pageAction 的 API 使用实例 - Postbird

一、描述

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

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

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

chrome 30 之后支持
需要在 manifest 中配置 page_action 字段

比较简单的使用示例是：

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

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

如果不能，则图标是灰色的：

一般是推荐使用 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 信息：

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

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');
        });   
    })
}

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

其他 API

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

五、完整代码

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

Postbird