[12] chrome 扩展开发 - pageAction 的 API 使用实例
一、描述
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 使用示例
说明:
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-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/chrome-extensions-pageaction.html
转载请注明文章原始出处 !