[关闭]
@zoand 2015-07-01T23:20:57.000000Z 字数 3704 阅读 2138

Chrome标签操作

chrome插件

1. 标签对象结构

  1. {
  2.     id: 标签id,
  3.     index: 标签在窗口中的位置，以0开始,
  4.     windowId: 标签所在窗口的id,
  5.     openerTabId: 打开此标签的标签id,
  6.     highlighted: 是否被高亮显示,
  7.     active: 是否是活动的,
  8.     pinned: 是否被固定,
  9.     url: 标签的URL,
  10.     title: 标签的标题,
  11.     favIconUrl: 标签favicon的URL,
  12.     status :标签状态，loading或complete,
  13.     incognito: 是否在隐身窗口中,
  14.     width: 宽度,
  15.     height: 高度,
  16.     sessionId: 用于sessions API的唯一id
  17. }

Chrome通过tabs方法提供了管理标签的方法与监听标签行为的事件，大多数方法与事件是无需声明特殊权限的，但有关标签的url、title和favIconUrl的操作（包括读取），都需要声明tabs权限。

  1. "permissions": [
  2.     "tabs"
  3. ]

2. 获取标签信息的三个方法

2.1. get

此方法可以获取到指定id的标签

  1. chrome.tabs.get(tabId, function(tab){
  2.     console.log(tab);
  3. });

2.2. getCurrent

获取运行的脚本本所在的标签

  1. chrome.tabs.getCurrent(function(tab){
  2.     console.log(tab);
  3. });

2.3. 条件查询:query

可以获取所有符合指定条件的标签。
query方法可以指定的匹配条件如下：

  1. {
  2.     active: 是否是活动的,
  3.     pinned: 是否被固定,
  4.     highlighted: 是否正被高亮显示,
  5.     currentWindow: 是否在当前窗口,
  6.     lastFocusedWindow: 是否是上一次选中的窗口,
  7.     status: 状态，loading或complete,
  8.     title: 标题,
  9.     url: 所打开的url,
  10.     windowId: 所在窗口的id,
  11.     windowType: 窗口类型，normal、popup、panel或app,
  12.     index: 窗口中的位置
  13. }
eg:下面的代码获取了所有在窗口中活动的标签
  1. chrome.tabs.query({
  2.     active: true
  3. }, function(tabArray){
  4.     console.log(tabArray);
  5. });

3. 创建标签:create

创建标签与在浏览器中打开新的标签行为类似，但可以指定更加丰富的信息，如URL、窗口中的位置和活动状态等。

  1. chrome.tabs.create({
  2.     windowId: wId,
  3.     index: 0,
  4.     url: 'http://www.google.com',
  5.     active: true,
  6.     pinned: false,
  7.     openerTabId: tId
  8. }, function(tab){
  9.     console.log(tab);
  10. });

其中wId是创建标签所在窗口的id，如果不指定，则默认在当前窗口中打开。tId是打开此标签的标签id，可以不指定，但如果指定，那么所创建的标签必须与这个标签在同一窗口中。

除了用create方法，还可以使用duplicate方法“复制”指定标签：

  1. chrome.tabs.duplicate(tabId, function(tab){
  2.     console.log(tab);
  3. });

4. 更新标签:update

通过update方法可以更新标签的属性：

  1. chrome.tabs.update(tabId, {
  2.     url: 'http://www.google.com'
  3. }, function(tab){
  4.    console.log(tab);
  5. });

更新标签时也可以不指定tabId，如果不指定，默认会更改当前窗口的活动标签。需要指出，直到31.0.1650.63 m，更新highlighted属性为true后，标签active属性也会被指定为true，所以如果只是想将某个标签高亮以引起用户的注意，需要先记录当前的标签id，更新后再将这个标签的active属性改回true。这个bug在之后的版本也许会被修正。

5. 移动标签:move

move方法可以将指定的一个或多个标签移动到指定位置：

  1. chrome.tabs.move(tabIds, {
  2.     'windowId':wId,
  3.     'index':0
  4. }, function(tabs){
  5.     console.log(tabs);
  6. });

其中tabIds可以是一个数字型的标签id，也可以是一个包含多个标签id的数组。返回的tabs可能是标签对象也可能是包含多个标签对象的数组。如果指定的index为-1，会将标签移动到指定窗口的最后面。

6. 重载标签:reload

reload方法可以重载指定标签，同时还可以指定是否跳过缓存（强制刷新）：

  1. chrome.tabs.reload(tabId, {
  2.     bypassCache: true
  3. }, function(){
  4.     console.log('The tab has been reloaded.');
  5. });

浏览器通常会对一些静态资源进行缓存，JavaScript中的location.reload()方法通常无法实现强制刷新，此时上面的方法就会很好地解决这个问题。

7. 移除标签:remove

通过remove方法可以关闭一个或多个标签：

  1. chrome.tabs.remove(tabIds, function(){
  2.     console.log('The tabs has been closed.');
  3. });

其中tabIds可以是一个数字型的标签id，也可以是一个包含多个标签id的数组。

8. 获取当前标签页面的显示语言

有时可能需要针对用户浏览内容语言的不同，采用不同的处理方法。比如翻译扩展就要根据不同的语言决定是否提示用户进行翻译。

  1. chrome.tabs.detectLanguage(tabId, function(lang){
  2.     console.log('The primary language of the tab is '+lang);
  3. });

如果不指定tabId，则返回当前窗口当前标签的语言。

9. 获取指定窗口活动标签可见部分的截图

Chrome提供了截取指定窗口活动标签页面为图片的接口：

  1. chrome.tabs.captureVisibleTab(windowId, {
  2.     format: 'jpeg',
  3.     quality: 50
  4. }, function(dataUrl){
  5.     window.open(dataUrl, 'tabCapture');
  6. });

其中format还支持png，如果指定为png，则quality属性会被忽略。如果指定jpeg格式，quality的取值范围为0-100，数值越高，图片质量越好，体积也越大。扩展只有声明activeTab或<all_url>权限能获取到活动标签的截图：

  1. "permissions": [
  2.     "activeTab"
  3. ]

10. 注入JS和CSS

之前接触过content_scripts，它可以向匹配条件的页面注入JS和CSS，但是却无法向用户指定的标签注入。通过executeScript和insertCSS可以做到向指定的标签注入脚本。

  1. chrome.tabs.executeScript(tabId, {
  2.     file: 'js/ex.js',
  3.     allFrames: true,
  4.     runAt: 'document_start'
  5. }, function(resultArray){
  6.     console.log(resultArray);
  7. });

也可以直接注入代码：

  1. chrome.tabs.executeScript(tabId, {
  2.     code: 'document.body.style.backgroundColor="red"',
  3.     allFrames: true,
  4.     runAt: 'document_start'
  5. }, function(resultArray){
  6.     console.log(resultArray);
  7. });

向指定的标签注入CSS：

  1. chrome.tabs.insertCSS(tabId, {
  2.     file: 'css/insert.css',
  3.     allFrames: false,
  4.     runAt: 'document_start'
  5. }, function(){
  6.     console.log('The css has been inserted.');
  7. });

插入CSS也可以指定具体代码。
executeScript和insertCSS方法中runAt的值可以是document_start、document_end或document_idle。

11. 与指定标签中的内容脚本(content script)通信

除了扩展页面间的通信，也可以与指定的标签通信：

  1. chrome.tabs.sendMessage(tabId, message, function(response){
  2.     console.log(response);
  3. });

请注意，后台页面主动与content_scripts通信需要使用chrome.tabs.sendMessage方法。
chrome.tabs.executeScript方法也可以实现后台页面与内容脚本的通信，但更强调是后台页面向标签页注入脚本。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注