大家好，关于Chrome 插件选项卡很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！

Tabs API 只能在后台脚本、选项脚本、弹出脚本和chrome 创建的选项卡中访问。无法在内容脚本中访问和使用它。

也就是说，chrome有选择地将不同的chrome对象注入到不同的脚本环境中，从而导致提供的API存在差异。

这张图展示了我们在特定环境下可以通过chrome.tabs访问的所有API。这些是chrome内置的为我们提供给开发者的功能。

2.权限

但使用以下API时，需要添加相关配置后才能使用，例如：

如果您希望能够动态地向指定选项卡注入并执行脚本，或者注入或删除某种CSS 样式，那么您可能需要使用这些API： chrome.tabs.executeScript() //注入段落编写脚本并执行

chrome.tabs.insertCss() //注入css样式

chrome.tabs.removeCss() //删除css 样式

{

//manifest.json ‘host_permissions’:[ ‘all_urls’ ] //支持正则匹配

}

二、API

接下来我们通过案例来一一了解，感受各个API的具体行为以及使用条件、注意事项等。

1. 创建

我们可以使用这个API来创建一个新选项卡。该选项卡与普通站点不同，属于插件所属页面。因此支持跨域请求，获取chrome提供的更多方法。

//背景.js

chrome.runtime.onInstalled.addListener(({原因})={

if (原因===’安装’) {

chrome.tabs.create({

url: ‘newtab.html’ //后台脚本相对路径中需要有newtab.html文件。

});

}

});

上面的脚本意味着插件第一次安装完成后，会立即创建一个新的标签页，所以如果我们想随时创建新的标签页，就可以使用这个API。业界很多插件都工作大多数平台都会创建新的标签页来工作，比如著名的代理插件SwitchySharp

默认支持此API，不需要额外的清单配置。

2. 查找

我们可能有获取当前浏览器窗口处于活动状态的标签页的需求，因为对于同一个窗口，存在且只有一个标签页显示在用户面前。我们将这样的选项卡称为活动状态。这时候我们就需要用到下面的API。

异步函数getCurrentTab() { let queryOptions={ active: true };让[tab]=等待chrome.tabs.query(queryOptions);返回选项卡； }

通过调用上述方法，可以获得当前窗口中激活的选项卡的实例对象。从这个对象中，你可以获取对应选项卡的唯一id、url、icon等信息。

值得注意的是，如果Chrome浏览器打开了多个窗口，则意味着每个窗口中可能存在一个激活的选项卡，因此我们获取到的选项卡将会是多个。这个时候，如果我们只解构第一种可能，那就不够严谨了。

所以我们可以通过添加搜索条件来更准确地搜索：

异步函数getCurrentTab() {

让查询选项={

active: true, currentWindow:true

};

让[tab]=等待

chrome.tabs.query(queryOptions);

返回选项卡；

}

通过添加参数currentWindow，意味着只搜索脚本运行的窗口中激活的选项卡。这时候只会找到唯一的tab，解构第一个就不会出现问题了。

除了以上搜索条件外，您还可以选择以下条件：

范围

类型

影响

积极的

布尔值

是否活跃？

可听见的

布尔值

是否正在播放音频

当前窗口

布尔值

是在脚本所在的窗口内吗？

组ID

数字

是在某个群体内吗？

突出显示

布尔值

是否处于高亮状态？

指数

数字

窗口中从左到右的索引选项卡

固定的

布尔值

是否处于固定状态？

地位

卸载/装载/完成

匹配选项卡的状态是状态的选项卡

标题

细绳

将选项卡的标题与该标题的选项卡相匹配

网址

细绳

与tab匹配的url就是url的tab

窗口ID

数字

特定窗口中的选项卡

窗口类型

正常/弹出/面板/应用程序/devtools

位于特定窗口类型下的选项卡

被固定是指在标签上右键单击时，那些标签被固定在左侧，并且可以固定多个标签。

3.发送消息

我们可以轻松地将消息发送到指定的选项卡。一般来说，我们可以在内容脚本中监听消息，并在收到消息后执行不同的业务逻辑。

chrome.tabs.sendMessage(

tabId: number, //目标选项卡的id

message: any, //发送消息

options? object, //其他配置项

callback? function, //回调函数)

以上是V3版本插件使用的。在V2版本中我们使用chrome.tabs.sendRquest()

//在v3 版本中已弃用

chrome.tabs.sendRequest(

tabId: number, //目标选项卡的id

request: any, //发送信息

callback? function, //回调函数

）

4.修改

如果我们想要修改某个选项卡的一些参数信息，我们可以选择使用以下API：

chrome.tabs.update( tabId? 数字， updateProperties: 对象，回调？函数， )

updateProperties的值与上面提到的queryOptions的属性一致。例如，我们可以动态更改指定选项卡的标题、url、固定等状态属性！

5.缩放比

当我们按住Ctrl并滑动鼠标滚轮时，我们可以调整页面的缩放比例。这可能大家都很熟悉，但实际上，这也可以通过插件提供的API来动态调整。

chrome.tabs.setZoom( tabId? number, ZoomFactor: number, //缩放比例回调？ function, )

6.移动/移除/刷新

我们引入的第一个API 展示了如何创建新选项卡。默认情况下，它将创建在最后面，即最右侧。如果我们对这个放置位置不满意，也可以放置在我们想要的位置。

移动

chrome.tabs.move(

tabIds: 号|数字[]，

moveProperties: 对象，

回调？函数，

）

type moveProperties={ index?number, //要移动到的索引索引位置。 `-1` 移动到窗口末尾。

windowId?number //要移动到的窗口id

}

消除

chrome.tabs.remove( tabIds: 数字| 数字[], 回调？函数， )

刷新

chrome.tabs.reload( tabId? number, reloadProperties? object, callback? function, ) type reloadProperties={bypassCache?boolean //是否绕过本地缓存。默认情况下不绕过，即使用本地缓存。 }

7.导航

我们可以通过插件控制tab的前后移动（如果都有跳转记录的话）

chrome.tabs.goBack( //返回到最近的历史记录tabId? number, callback? function, ) chrome.tabs.goForward( //转到下一条历史记录，如果有一个tabId? number ，回调？函数，）

当我们打开很多标签时，浏览器会有一个小的优化。对于一些长时间没有使用的选项卡，浏览器会清除其在内存中的状态存储，所以当我们再次激活它时，它会Reload！这个流程插件还提供了API来帮助我们做：

9.分组

如果我们想将某些具有相似特征的网站归为一组，以便在视图中能够更好地注意到它们，那么我们可以通过插件提供的API来实现：

第1 步：筛选出要分组到同一组中的选项卡

const tabs=等待chrome.tabs.query({ url: [ ‘https://developer.chrome.com/*’], });

根据前面的知识，我们很容易知道tabs是域名以“developer.chrome.com”开头的所有站点的选项卡集合；

第2 步：将他们分组

const tabIds=tabs.map(({ id })=id); const 组=等待chrome.tabs.group({ tabIds });

如上图所示，所有符合条件的站点都被划分到同一组中。该API的使用方法是：

chrome.tabs.group( options: GroupOptions, callback? function, ) type GroupOptions={ tabIds?number[], //要分组的选项卡ID 集合groupId?number, //现有组createProperties?{ windowId?number //您希望在哪个窗口中创建组？默认是脚本所在的窗口} }

附加字数：

如果我们想添加样式或字体作为组的标记，我们也可以这样做：

//第一步：在manifest.json中添加“tabGrpups”的权限{ . ‘permissions’:[ ‘tabGroups’ ] } //第二步： chrome.tabGroups.update(group, { title: ‘This is第1 组’ , color:’red’ });

您可以修改该组的一些特征。上面是添加标题。效果如下：

三、实战

上面我们已经介绍了基本的API。接下来我们通过一些案例来实际体验一下各个API的作用：

准备以下物品：

清单.json

{

‘名称’: ‘选项卡演示’,

‘描述’: ‘选项卡演示’,

‘版本’: ‘1.0’,

‘清单版本’: 3,

‘行动’: {

‘default_popup’: ‘popup.html’,

“默认图标”:

{

’16’: ‘/images/get_started16.png’,

’32’: ‘/images/get_started32.png’,

’48’: ‘/images/get_started48.png’,

‘128’:’/images/get_started128.png’

}

‘内容脚本’: [

{

‘js’: [‘内容.js’],

‘匹配’: [‘all_urls’] } ],

‘背景’:

{

‘service_worker’: ‘background.js’

‘图标’: {

’16’: ‘/images/get_started16.png’,

’32’: ‘/images/get_started32.png’,

’48’: ‘/images/get_started48.png’,

‘128’:’/images/get_started128.png’

‘permissions’: [‘tabs’, ‘tabGroups’] }

内容.js/背景.js

//content.js 让color=”; console.log(‘content.js’); chrome.runtime.onMessage.addListener((message, sender, sendResponse)={ color=document.body.style.color; document .body.style.background=message; sendResponse(‘changed’); }); //background.js console.log(chrome);

新标签页.html

!DOCTYPE html html lang=’en’ head meta charset=’UTF-8’/meta name=’viewport’ content=’width=device-width, initial-scale=1.0’/titlechrome plugin/title /head body h1i 是chrome插件创建的页面/h1 /body /html

弹出窗口.html

弹出窗口.js

我会将以上资源放在github上。您可以下载并直接在自己的浏览器中运行以检查效果。如果您发现有用的东西，我希望您给他们一颗星！

以下是我本地测试的结果：

创建页面/发送消息

询问

删除/修改/更新

团体

有了以上武器，就可以玩Tab了！让我们一起开始开发chrome插件吧！