chrome extension tabs及activeTab详解

ordersheet
216 阅读4分钟

最近在做插件开发的过程中发现经常有朋友问到tabs和activeTab权限有什么区别，该如何使用，好像不申请tabs或者activeTab也能使用该权限

image.png

image.png

  1. 不声明tabs和activeTab权限时，使用query能获取到哪些信息？ API调用:
chrome.tabs.query({}, data => {
  console.log("tabs query:", data);
});

返回内容:

[
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063070,
        "incognito": false,
        "index": 0,
        "mutedInfo": {
            "muted": false
        },
        "pinned": true,
        "selected": false,
        "status": "complete",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063156,
        "incognito": false,
        "index": 1,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063599,
        "incognito": false,
        "index": 2,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "width": 1339,
        "windowId": 1943063069
    }
]
  1. 不声明tabs和activeTab权限时有某域名的主机权限时，使用query能获取到哪些信息？
"host_permissions": [
  "https://github.com/*"
]

chrome.tabs.query({}, data => {
  console.log("tabs query:", data);
});

此时我打开了github.com/

[
   {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063070,
        "incognito": false,
        "index": 0,
        "mutedInfo": {
            "muted": false
        },
        "pinned": true,
        "selected": false,
        "status": "complete",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063156,
        "incognito": false,
        "index": 1,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "favIconUrl": "https://github.githubassets.com/favicons/favicon.svg",
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063634,
        "incognito": false,
        "index": 11,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "title": "GitHub",
        "url": "https://github.com/",
        "width": 2560,
        "windowId": 1943063069
    }
]

可以看到，没有主机权限时，是获取不到title,favIconUrl及url的 3. 当permission中有tabs权限时

"permissions": [
  "tabs"
]

[
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "favIconUrl": "https://cdn.oaistatic.com/_next/static/media/favicon-32x32.be48395e.png",
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063070,
        "incognito": false,
        "index": 0,
        "mutedInfo": {
            "muted": false
        },
        "pinned": true,
        "selected": false,
        "status": "complete",
        "title": "获取Auto.js页面文字",
        "url": "https://chat.openai.com/c/38178a33-a3e9-432b-8187-fa79fd582522",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "favIconUrl": "https://www.baidu.com/favicon.ico",
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063159,
        "incognito": false,
        "index": 3,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "title": "百度一下，你就知道",
        "url": "https://www.baidu.com/",
        "width": 1620,
        "windowId": 1943063069
    },
    {
        "active": true,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "favIconUrl": "https://github.githubassets.com/favicons/favicon.svg",
        "groupId": -1,
        "height": 1271,
        "highlighted": true,
        "id": 1943063634,
        "incognito": false,
        "index": 11,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": true,
        "status": "complete",
        "title": "GitHub",
        "url": "https://github.com/",
        "width": 2560,
        "windowId": 1943063069
    }
]

可以看到能够获取到所有的favIconUrl、url、及title信息

  1. 当permission中有activeTab权限时
[
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063070,
        "incognito": false,
        "index": 0,
        "mutedInfo": {
            "muted": false
        },
        "pinned": true,
        "selected": false,
        "status": "complete",
        "width": 2560,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": true,
        "groupId": -1,
        "height": 0,
        "highlighted": false,
        "id": 1943063716,
        "incognito": false,
        "index": 1,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "unloaded",
        "width": 0,
        "windowId": 1943063069
    },
    {
        "active": false,
        "audible": false,
        "autoDiscardable": true,
        "discarded": false,
        "groupId": -1,
        "height": 1271,
        "highlighted": false,
        "id": 1943063599,
        "incognito": false,
        "index": 2,
        "mutedInfo": {
            "muted": false
        },
        "pinned": false,
        "selected": false,
        "status": "complete",
        "width": 1339,
        "windowId": 1943063069
    }
]

可以看到什么信息都获取不到 所有activeTab这个权限没有任何作用吗？ 并不是： 当我在某个网页点击了browser action按钮后，能够获取到该信息：

{
    "active": false,
    "audible": false,
    "autoDiscardable": true,
    "discarded": false,
    "favIconUrl": "",
    "groupId": -1,
    "height": 1271,
    "highlighted": false,
    "id": 1943063602,
    "incognito": false,
    "index": 4,
    "mutedInfo": {
        "muted": false
    },
    "pinned": false,
    "selected": false,
    "status": "complete",
    "title": "扩展程序",
    "url": "chrome://extensions/",
    "width": 2560,
    "windowId": 1943063069
}

官方的解释： image.png

总结：

  1. tabs大多数功能无需任何权限即可使用。例如：创建新标签页、重新加载标签页、导航到其他网址，等等。但是获取标签的favIconUrl、url、及title信息需要增加host_permission
  2. 声明tabs权限用户会收到提示，同时你也能获取到所有标签页的信息不需要额外申请host_permission
  3. 声明activeTab用户不会收到提示，想要获取favIconUrl、url、及title信息可以通过多种方式，比如：申请host_permission、用户点击了browser action，用户在该网页上使用了插件提供的上下文菜单、用户使用了插件提供的快捷键、页面中使用了omnibox API

参考文档：

developer.chrome.com/docs/extens… developer.chrome.com/docs/extens…

avatar
文章
阅读
粉丝