当前位置： 首页 > news >正文

Chrome插件开发【Tabs】

news 2025/8/17 16:25:17

目录

简介

Tabs常用方法

查询标签页

创建标签页

更新标签页

移动标签页

刷新标签页

关闭标签页

Tabs常用事件

标签页创建事件

标签页更新事件

标签页移除事件

标签页激活事件

其它

简介

tabs API允许您与浏览器的标签页系统进行交互：

  • 创建
  • 修改
  • 重新排列标签页

在使用Tabs API之前必须在manifest.json的permissions里声明权限：

{"manifest_version": 3,"name": "Tabs学习插件","version": "1.0","description":"这是一个Tabs学习插件","icons":{"16": "icons/logo.png","48": "icons/logo.png","128": "icons/logo.png"},"background":{"service_worker": "background.js"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content-script.js"],"run_at":"document_end"}],"action": {"default_title": "打开插件页","default_popup": "popup/popup.html"},"permissions": ["tabs"]
}

Tabs常用方法

查询标签页

用来查询标签页信息，查询的回调有两种处理方式：

  • 回调函数类型：V2版本常用，支持V2、V3双版本，支持旧浏览器
  • Promise类型：仅支持V3版本，不支持旧浏览器

语法：

// chrome标签页查询回调有两种方式
// 回调函数类型
chrome.tabs.query(queryInfo,function(tabs){})
// Promise类型
chrome.tabs.query(queryInfo).then(function(tabs){})

参数：

  • queryInfo（必填）：但可以为一个空对象
    • 类型：Object
    • 属性：
      • active：布尔值，当前窗口的活动标签页
      • currentWindow：布尔值，当前窗口的标签页
      • windowId：浏览器窗口ID
      • url：匹配特定URL模式的标签页
      • pinned：固定标签页
      • status：“complete”(标签已完成加载)或“loading”(标签正在加载)
    • 组合查询：多个条件会以“逻辑与”的形式查询

      • 同时查询{ active:true,currentWindow:true }获取当前窗口的活动标签

示例：

// 获取所有窗口的所有标签页
chrome.tabs.query({},(tabs) => {console.log('所有窗口的所有标签页：', tabs)
})
// 获取当前窗口所有标签页
chrome.tabs.query({ currentWindow:true },(tabs) => {console.log('当前窗口所有标签页：', tabs)
})
// 获取当前窗口正在活跃的标签页
chrome.tabs.query({ active:true, currentWindow:true },(tabs) => {console.log('当前窗口正在活跃的标签页：', tabs)
})
// 匹配csdn网站的标签页
chrome.tabs.query({ url: "*://*.csdn.net/*" },(tabs) => {console.log('匹配csdn网站的标签页：', tabs)
})

效果：

创建标签页

使用create方法创建新的浏览器标签页

语法：

// 创建新标签页
chrome.tabs.create(createProperties,callback)

参数：

  • createProperties（必填）：
    • 类型：Object
    • 属性：
      • url：新标签页要加载的URL
      • active：布尔值，是否立即激活该标签页(默认为true)
      • index：数字，在标签栏中的位置(0为第一个)
      • pinned：布尔值，是否固定标签页
      • openerTabId：数字，指定打开此标签的父标签ID
      • windowId：数字，在指定浏览器窗口打开
  • callback（必填）：创建成功后执行的回调
    • 类型：Function
    • 接收一个参数：新创建的标签页对象

示例：

// 在当前标签位置右侧创建一个百度页面
chrome.tabs.query({active:true, currentWindow:true},(tabs) => {if (tabs.length > 0){console.log('当前标签',tabs[0])chrome.tabs.create({ url:"https://www.baidu.com",index:tabs[0].index+1 },(tab) => {console.log('在当前标签位置右侧创建了一个新的百度页面',tab)})}
})
// 创建一个百度页面并激活
chrome.tabs.create({ url:"https://www.baidu.com",active:true },(tab) => {console.log("创建了一个新的百度页面并激活",tab)
})
// 创建一个后台百度页面(不激活)
chrome.tabs.create({ url:"https://www.baidu.com",active:false },(tab) => {console.log("创建了一个新的百度页面但不激活",tab)
})

效果：

问题：

  • 细心的您可能会发现，为什么“在标签右侧创建标签”打印顺序是最后的，那是因为chrome.tabs.query和chrome.tabs.create都是异步操作函数
  • 因此，打印顺序取决于浏览器对不同异步操作的执行速度

如果您确实希望顺序执行，可以使用async/await的搭配使用

async function tabsOperation(){// 在当前标签位置右侧创建一个百度页面await chrome.tabs.query({active:true, currentWindow:true}).then((tabs) => {if (tabs.length > 0){console.log('当前标签',tabs[0])chrome.tabs.create({ url:"https://www.baidu.com",index:tabs[0].index+1 },(tab) => {console.log('在当前标签位置右侧创建了一个新的百度页面',tab)})}})// 创建一个百度页面并激活await chrome.tabs.create({ url:"https://www.baidu.com",active:true }).then((tab) => {console.log("创建了一个新的百度页面并激活",tab)})// 创建一个后台百度页面(不激活)await chrome.tabs.create({ url:"https://www.baidu.com",active:false }).then((tab) => {console.log("创建了一个新的百度页面但不激活",tab)})
}
tabsOperation()

这样返回顺序为：

可以看到，符合要求了

更新标签页

用于修改目标标签页的状态和属性，更新不同于刷新！！

语法：

// 标签页更新语法
chrome.tabs.update(tabId,updateProperties,callback)

参数：

  • tabId（可选）：要更新的标签页ID，如省略，则默认为当前窗口的当前活动页
    • 类型：Number
    • 注意：tabId必须是一个存在且有效的ID
  • updateProperties（必填）：参数对象
    • 类型：Objct
    •  属性：
      • url：导航到新URL
      • active：是否激活标签页
  • callback（可选）：回调函数
    • 类型：Function
    • 参数：
      • tab：更新后的标签页对象

示例：

// 标签页更新语法
async function updateTab() {const tab1 = await chrome.tabs.update({url: "https://www.baidu.com"})console.log('tab1',tab1)const tab2 = await chrome.tabs.update({url: "https://www.baidu.com"}).then((tab) => tab)console.log('tab2',tab2)
}
updateTab()

效果：

由此可见，上述两种写法是等价的

移动标签页

用于将单个标签页(多个标签页)移动到窗口的新位置或另一个窗口中

语法：

// 标签页移动
chrome.tabs.move(tabIds,moveProperties,callback)

参数：

  • tabIds（必填）：标签页ID或标签页ID数组
    • 类型：Number或Array
  • moveProperties（必填）：参数对象，可以为空对象(无效)
    • 类型：Object
    • 属性：
      • windowId（可选）：目标窗口ID
      • index（可选）：目标窗口中的索引
  • callback（可选）：
    • 类型：Function
    • 属性：
      • 移动单个标签页时：更新后的Tab对象
      • 移动多个标签页时：更新后的Tab数组

示例：

// 初始状态下，www.baidu.com标签页在窗口第二个位置(索引为1)
// 移动单个标签页
chrome.tabs.query({ url: "*://*.baidu.com/*" }).then(async tabs => {const tab1 = tabs[0];console.log('移动前tab：',tab1);const tab2 = await chrome.tabs.move(tab1.id, { index: 0 });console.log('移动后tab：',tab2);
})

效果：

刷新标签页

用于重新加载指定的标签页，相当于用户点击浏览器的刷新按钮

语法：

// 重新加载指定标签页
chrome.tabs.reload(tabId,reloadProperties,callback)

参数：

  • tabId（可选）：指定刷新标签页的ID
    • 类型：Number
    • 如果省略，默认加载当前窗口的当前活动页
  • reloadProperties（可选）：配置参数
    • 类型：Object
    • 属性：
      • bypassCache：布尔值，是否绕过缓存重新加载。如true，则重新从服务器加载，如false，则从浏览器缓存中获取
  • callback（可选）：
    • 类型：Function
    • 回调参数：无

示例：

// 重新加载指定标签页
chrome.tabs.query({active:true},async tabs => {const tab = tabs[0];await chrome.tabs.reload(tab.id)
})

效果：

因为没有回调参数，所以就不展示效果了

关闭标签页

用于关闭“一个 / 多个”标签页，相当于用户点击标签页的关闭按钮

哪怕标签页固定，仍然可以关闭

语法：

// 关闭 / 移除一个或多个浏览器标签页
chrome.tabs.remove(tabIds,callback)

参数：

  • tabIds（必填）：
    • 类型：Number或Array
  • callback（可选）：
    • 类型：Function
    • 回调参数：无

示例：

// 关闭 / 移除一个或多个浏览器标签页
chrome.tabs.query({active:true},async tabs => {chrome.tabs.remove(tabs[0].id)
})

效果：

因为没有回调参数，所以就不展示效果了

Tabs常用事件

标签页创建事件

用于监听标签页的创建

语法：

// 标签页创建事件监听
chrome.tabs.onCreated.addListener(callback)

参数：

  • callback：回调函数
    • 回调属性：tab
    • tab：id、url、title、status

示例：

// 标签页创建事件监听
chrome.tabs.onCreated.addListener((tab) => {console.log('监听到创建一个新事件:',tab)
})
// 模拟创建一个事件
chrome.tabs.create({url:'https://www.baidu.com'},tab => {console.log('创建了一个新的标签页:',tab)
})

效果：

标签页更新事件

检测标签页的更新，不等同于刷新！！！

语法：

// 标签页更新事件监听
chrome.tabs.onUpdated.addListener((tabId,changeInfo,tab) => {})

回调参数：

  • tabId：发生变化的标签页ID
  • changeInfo：变更信息
    • status：家在状态
    • url：新URL，仅URL变化时存在
    • pinned：固定状态变化
  • tab：更新后的完整标签页对象

示例：

// 监听标签页更新
// 将csdn.net更新为baidu.com
chrome.tabs.query({ url: '*://*.csdn.net/*' }, (tabs) => {const targetTab = tabs[0];const targetTabId = targetTab.id; // 保存目标标签页的ID// 更新标签页chrome.tabs.update(targetTabId, { url: 'https://www.baidu.com/' },(tab) => {console.log('标签页更新了：',tab)})// 注册全局事件监听器，但在内部过滤目标标签页chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {if (tabId === targetTabId) {console.log(`目标标签页（ID: ${tabId}）更新了:`, changeInfo);}});
});

效果：

标签页移除事件

监听标签页的移除

语法：

// 监听标签页的移除
chrome.tabs.onRemoved.addListener((tabId,removeInfo))

参数：

  • tabId：被关闭标签页的ID
  • removeInfo：
    • 类型：Object
    • 属性：
    • windowId：所在窗口ID
    • isWindowClosing：是否因窗口关闭而移除

示例：

// 监听标签页的移除
chrome.tabs.onRemoved.addListener((tabId,removeInfo) => {console.log('监听到标签页的移除:',tabId,removeInfo)
})

效果：

标签页激活事件

监听浏览器的激活(模拟鼠标点开该标签页)

语法：

// 监听标签页的激活
chrome.tabs.onActivated.addListener((activeInfo) => {console.log('标签页激活', activeInfo)
})

参数：

  • activeInfo：
    • 类型：Object
    • tabId：新激活标签页ID
    • windowId：所在窗口ID

效果：

其它

更多Chrome插件学习，可以参考我的专栏：

Chrome插件_是洋洋a的博客-CSDN博客

http://www.dtcms.com/a/332530.html

相关文章：

  • 基于vue和nodejs的茶叶销售平台的设计与实现/基于express的茶叶商城系统
  • 从 LLM 到自主 Agent：OpenCSG 打造开源 AgenticOps 生态
  • 从CAD数据访问到3D协作，HOOPS SDK如何提升PLM解决方案竞争力？
  • PCA降维全解析：从原理到实战
  • p5.js 3D盒子的基础用法
  • [TG开发]照片机器人
  • 云手机选哪个比较好用？
  • 【Docker】关于hub.docker.com，无法打开，国内使用dockers.xuanyuan.me搜索容器镜像、查看容器镜像的使用文档
  • 腾讯云开发小程序工具箱使用心得
  • Docker Compose 入门教程
  • Linux————网络基础
  • LPDDR5训练过程
  • 一、Docker本地安装
  • Kafka分区
  • 实现FPS武器的瞄准放大效果（UGUI实现反向遮罩，全屏遮挡，局部镂空效果）
  • 10--C++模板参数与特化详解
  • 【用软件方法实现临界区互斥】
  • Java 正则表达式的使用方法
  • 力扣326:3的幂
  • NLP数据增强方法及实现-A
  • 【R语言】R 语言中 gsub 与正则表达式详解（含 POSIX 与 Perl 风格实例）
  • 深入解析Java代理模式：灵活控制对象访问的核心技术
  • 配置国内加速源后仍然无法拉取镜像
  • 第五天～提取Arxml中CAN波特率属性New_CanCluster--Standard
  • C++面试——内存
  • 【LeetCode 热题 100】45. 跳跃游戏 II
  • 【swift】SwiftUI动画卡顿全解：GeometryReader滥用检测与Canvas绘制替代方案
  • 如何使用亚马逊云科技EC2服务部署语音转写系统
  • 自动驾驶系统“测试”的“要求”与“规范体系”
  • L4 级别自动驾驶 软件架构设计