chrome extension tabs及activeTab详解

最新推荐文章于 2025-03-24 18:18:57 发布
最新推荐文章于 2025-03-24 18:18:57 发布
阅读量1.2k 收藏 1
点赞数
文章标签： chrome 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44285141/article/details/135023189
版权

最近在做插件开发的过程中发现经常有朋友问到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);
});

此时我打开了https://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

参考文档：

https://developer.chrome.com/docs/extensions/reference/api/tabs?hl=zh-cn
https://developer.chrome.com/docs/extensions/develop/concepts/activeTab?hl=zh-cn

从0开发一个Chrome插件：Manifest 文件详解
良月柒
06-02 257
这是《从0开发一个Chrome插件》系列的第六篇文章，本系列教你如何从0去开发一个Chrome插件，每篇文章都会好好打磨，写清楚我在开发过程遇到的问题，还有开发经验和技巧。从0开发一个Chrome插件：什么是Chrome插件？从0开发一个Chrome插件：开发Chrome插件的必要知识从0开发一个Chrome插件：搭建开发环境从0开发一个Chrome插件：创建第一个Chrome插件从0开发一个Chrome插件：测试项目效果尽请期待～
【热门话题】Chrome 插件研发详解：从入门到实践
鑫宝的博客
04-27 1892
Chrome 插件作为扩展浏览器功能的强大工具，为用户提供了个性化和增强化的浏览体验。它允许开发者基于JavaScript、HTML 和 CSS 等Web技术创建丰富的应用程序，与浏览器深度集成，实现诸如网页内容修改、增加新功能、自动化任务等诸多可能。本文将深入浅出地介绍Chrome插件的开发流程，架构原理以及实战技巧。
chrome-tabs：HTMLCSS中的Chrome样式的标签
02-03
Chrome中的Chrome标签页 正是您认为的那样。 去野外。 由@desandro提供的拖放支持。
提升体验-支持Chrome Custom Tabs
weixin_34402090的博客
01-06 362
2019独角兽企业重金招聘Python工程师标准>>> ...
chrome插件开发之API解析-chrome.tabs.query
最新发布
oschina_41559824的博客
03-24 621
初始环境：chrome浏览器我是打开了4个窗口，是一个功能强大的Chrome扩展API，通过合理使用queryInfo参数的各个属性，可以方便地筛选出符合不同条件的标签页，满足各种扩展开发的需求。开发者可以根据具体的业务场景灵活组合使用这些参数，实现更加丰富和实用的扩展功能。希望本文对你理解和使用有所帮助，如果你在开发过程中遇到任何问题，欢迎留言讨论。
Chrome 插件 tabs API 解析
guoqkmiss的博客
03-27 2814
Chrome 浏览器插件 tabs API 解析
google控件-chrome.tabs-1.1
caishu1995的博客
01-11 1467
chrome.tabs.executeScript     注入脚本 ///tabId 运行脚本的选项卡的id ///obj 对象 /// code 要执行的js代码 /// file 要执行的js代码 /// allFrames true为将脚本注入所有帧，默认为false ///callback 回调函数 chrome.tabs.execu...
Chrome自定义Tabs，让App和Web之间的转场更平滑
MINGZHNGLEI的专栏
05-18 1227
— 当要在App中显示网页内容时，Android应用开发者将面临一个困难选择：在浏览器中打开链接是无疑是一个用户熟悉且非常容易实现的方式，但是却会引发app和web之间一个重量级的转场；而在Android WebView基础上建立起一套新的浏览机制可以获得更细颗粒度的控制，但是这将增加技术复杂度，同时给用户带来一种不甚熟悉的浏览体验。最新版本的Chrome的一个新特性可以解决了这个两难的选择
用Chrome Tabs构建你的第一个Chrome扩展程序
u011082575的博客
09-25 575
原始地址：https://dev.to/andyhaskell/build-your-first-chrome-extension-with-chrome-tabs-3625。
GoogleChromeExtension:Google Chrome搜索扩展
05-21
**Google Chrome 搜索扩展开发详解** Google Chrome 插件是一种增强浏览器功能的工具，通过JavaScript、HTML和CSS等技术实现。本教程将深入探讨如何利用这些技术开发一个名为"GoogleChromeExtension"的搜索扩展，...
Basic Extension Learning-crx插件
04-02
比如，如果插件需要修改网页内容，那么在manifest.json中需要声明`"activeTab"`或`"tabs"`权限。 通过"Basic Extension Learning-crx插件"，开发者和学习者可以直观地看到一个简单Chrome扩展的实现过程，从而掌握...
Chrome IE Tab
08-13
对于非IE用户而言，Chrome IE Tab 可以说是一个非常实用的工具，其主要功能在于在浏览器中以标签页的形式创建一个 IE 窗口，从而可以访问某些只支持 IE 的网站，如国内的网上银行等。在Chrome IE Tab发布之前，Chrome用户只能使用 Chromeplus 等修改版的C...
选项卡激活「Tab Activate」-crx插件
03-20
新选项卡立即打开，而不是在后台。 ***根据要求提供的新功能***选项卡激活现在支持书签！ ***有关权限的问题***请阅读所需权限的详细说明以及为什么需要它们。没有它们，选项卡激活将无法按所述方式工作。绝对不会更改或收集任何数据 ----------------------------------------默认情况下，Chrome在后台打开新标签页并没有提供立即切换到它们的选项。使用“选项卡激活”时，新选项卡将立即打开，而不是在后台打开。覆盖选项卡在后台激活并打开新选项卡，在打开新选项卡的同时按Shift键。标签激活功能可以有效地扭转Chrome的新标签焦点行为 ----------------------------------------权限阅读和更改书签：需要激活带书签的标签（仅读取书签，不更改）在访问的网站上读取和更改您的所有数据：需要检测按下Shift键的时间（未访问其他网站数据）由于Chrome扩展API的限制，具有是否按Shift键或是否为新选项卡的URL添加了书签是检测请求的权限的唯一方法。绝对不会更改或收集任何数据 ----------------------------------------更改版本2.0.0根据要求，书签为现在受支持并立即打开。版本1.2.0：新标签页的位置与Chrome的行为更加匹配。新的活动标签在上一个标签的右侧打开，新的背景标签在末尾打开。版本1.1.0：Shift键将覆盖Tab激活并在后台打开新的选项卡。版本1.0.0：初始版本。 支持语言:English (United States)
两万字大章带你使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件
guoqkmiss的博客
01-25 2426
两万字大章带你使用 Vue3、TypeScript、Less、Pinia、Naive-ui 以及 Vite 开发 Chrome V3 插件
chrome.tabs.executeScrip To chrome.scripting.executeScript
Fly_Sky
12-28 1691
/在需要时注入到页面中 转 chrome.scripting.executeScript。
这几个 Chrome 的 Tab 增强插件你都用上了吗？
程序猿DD
06-08 4982
1、OneTab：将无数 Tab 合并在一个页面 很多时候我们在一个窗口打开太多的tab，每一个tab太小不容易管理，这时候使用OneTab能够把所有tab收起放在一个页面，点击就可打开该tab，非常方便。 2、Momentum：用Tab页征服你的美女同桌 受够了新建页面时候的空白页的话可以试试，Momentum每天都会提供一张高清大图，都很好看。 3、Infinity：用标签页来完成你的常用...
Chrome Tabs在Chrome：打造个性化的网页浏览体验
gitblog_01183的博客
08-24 841
Chrome Tabs在Chrome：打造个性化的网页浏览体验 项目地址:https://gitcode.com/gh_mirrors/ch/chrome-tabs 在这个数字化时代，我们每天都会接触到形形色色的浏览器标签页，而如何高效管理这些标签，成为了每个互联网用户的共同需求。今天，我们将带您探索一个简洁而不失强大的开源项目——Chrome Tabs in Chrome，这绝对是你未曾料到的惊...
TChromeTabs 使用日记
weixin_30919429的博客
03-17 254
1、如何让 Tab 在拖放时，拖放图形中带有 TabControl 的内容。 增加 ChromeTabs 的 NeedDragImageControl 事件，并在代码中设置 DragControl 为需要显示图形的对象控件即可。 转载于:https://www.cnblogs.com/xiefang2008/p/5287570.html...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值