tabs 标签操作

标签页（tab）是浏览器里最常被扩展操作的”对象”。你想打开一个页面、把当前页静音、跳转到某个网址、或者关掉一堆杂乱的标签，都得通过 chrome.tabs 这套 API。

35-1 获取当前标签页：query

几乎所有”对当前页面做点什么”的需求，第一步都是先拿到当前标签页。query 接受一个查询条件对象，返回符合条件的标签页数组。

// 拿到"当前窗口里处于激活状态的那个标签"
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
console.log(tab.id, tab.url, tab.title);

这是扩展里最高频的一段代码：active: true 表示”被选中激活的”，currentWindow: true 表示”当前这个浏览器窗口”。两者合起来，精确定位用户正在看的那一个标签。返回是数组，用解构 [tab] 直接取第一个。

query 还能做更复杂的筛选，比如按网址、按是否被固定、按所属窗口：

// 找出当前窗口里所有 example.com 的标签
const tabs = await chrome.tabs.query({
  currentWindow: true,
  url: "https://example.com/*"
});

下面是官方示例里”切换标签固定状态”的写法，先 query 再 update，思路非常清晰：

const tabs = await chrome.tabs.query({ active: true, currentWindow: true });
const current = tabs[0];
chrome.tabs.update(current.id, { pinned: !current.pinned });

35-2 新建标签页：create

create 用来开一个新标签，至少要给一个 url，不给就开空白页。

// 打开指定网址的新标签，并把它激活到前台
await chrome.tabs.create({ url: "https://example.com", active: true });

// 在后台悄悄开一个标签，不打断用户当前操作
await chrome.tabs.create({ url: "https://example.com", active: false });

active: true 表示新标签立刻跳到前台；active: false 则在后台打开，用户无感。还可以用 pinned: true 直接开一个固定标签，用 index 指定它在标签栏的位置。

官方示例里经常用它来打开扩展自己的页面：

chrome.tabs.create({ url: chrome.runtime.getURL("index.html") });

chrome.runtime.getURL 能把扩展内部的 HTML 文件变成可访问的网址，配合 tabs.create 就能在扩展内导航。

35-3 更新标签页：update

update 用于修改某个已存在标签的属性。第一个参数是标签 id，第二个是想要改的属性对象。

// 让某个标签跳转到新网址
await chrome.tabs.update(tabId, { url: "https://example.com" });

// 把当前标签静音
await chrome.tabs.update(tabId, { muted: true });

// 固定 / 取消固定
await chrome.tabs.update(tabId, { pinned: true });

能改的属性不少：url（跳转）、muted（静音）、pinned（固定）、active（切到前台）、highlighted（高亮）等。如果省略 tabId，默认操作当前激活的那个标签——但稳妥起见，我还是建议你显式传 id。

35-4 关闭标签页：remove

remove 用来关掉标签，参数可以是单个 id，也可以是 id 数组（一次关多个）。

// 关掉一个
await chrome.tabs.remove(tabId);

// 一次性关掉多个
await chrome.tabs.remove([tabId1, tabId2, tabId3]);

remove 配合 query 能写出实用的清理逻辑，比如关掉所有非激活的标签，只留当前这一个：

const all = await chrome.tabs.query({ currentWindow: true });
const keep = all.filter((t) => t.active).map((t) => t.id);
const toClose = all.filter((t) => !t.active).map((t) => t.id);
await chrome.tabs.remove(toClose);

35-5 activeTab 权限：临时放行

activeTab 是扩展里非常贴心的一个权限。它解决的是这个矛盾：你只想在用户”主动调用扩展”时操作一下当前页面，但又不想申请”能读所有网站”的宽泛权限。

声明方式很简单，在清单里加一行：

{
  "name": "Page Redder",
  "version": "2.0",
  "permissions": ["activeTab", "scripting"],
  "background": { "service_worker": "service-worker.js" },
  "action": { "default_title": "Make this page red" },
  "manifest_version": 3
}

它的工作规则是：当用户主动唤起扩展时（比如点了工具栏图标、用了右键菜单），Chrome 就临时把”当前这个激活标签”的主机权限借给你。注意是”当前这一个、临时这一下”，不是所有网站、不是永久——授权在用户导航离开该页面或关闭标签时收回，只是切到别的标签再切回来，授权还在。

function reddenPage() {
  document.body.style.backgroundColor = "red";
}

chrome.action.onClicked.addListener((tab) => {
  if (!tab.url.includes("chrome://")) {
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      func: reddenPage
    });
  }
});

35-6 url 可见性与隐私

这里有个容易踩的点：tab.url 和 tab.title 不是随时都能拿到的。如果你没申请 tabs 权限、也没有对应的主机权限或 activeTab，查出来的标签对象里 url、title 会是 undefined，需要做空值判断。

这是 Chrome 的隐私设计：没授权就别想窥探用户在看什么网站。所以如果你的功能需要读 tab.url（比如”只处理特定域名”），要么申请 tabs 权限，要么靠 activeTab 在用户主动调用时获取。

35-7 批量操作与标签分组

除了单个标签，tabs 还能做整组操作。比如把多个标签一起移动、一起高亮。

highlight 可以把一组标签置于高亮状态（旧版叫 selected），配合窗口一起管理：

const tabs = await chrome.tabs.query({ url: "https://example.com/*" });
const ids = tabs.map((t) => t.id);
await chrome.tabs.highlight({ tabs: ids });

move 则能改变标签在标签栏里的位置，甚至跨窗口移动：

// 把标签移到窗口末尾
await chrome.tabs.move(tabId, { index: -1 });
// 把标签移去另一个窗口
await chrome.tabs.move(tabId, { windowId: otherWindowId, index: 0 });

需要提醒的是，这类批量动作要节制。一次 query 出成百上千个标签再逐个 update，会让浏览器瞬间卡顿。涉及大量标签时，先过滤、再操作，必要时分批。

35-8 与服务工作者配合

标签页操作大多写在服务工作者、弹出页或选项页里。一个常见的模式是：用户在弹出页里点一下，弹出页调用 tabs 去操作当前页，然后关掉弹出页。因为 tabs 接口在各组件里都能用，逻辑放哪都行，关键是谁来触发。

如果你把操作写在服务工作者里，记得服务工作者会休眠。好在 tabs.create、tabs.update 这类调用本身就会唤醒它，执行完再睡，不影响功能。真正要注意的是：别在服务工作者的顶层写 setInterval 来轮询标签，那会违背 MV3 的休眠设计，该用 alarms 时用 alarms。

// 一个健壮的写法：先确认能拿到 url 再判断
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (tab && tab.url && tab.url.startsWith("https://example.com")) {
  console.log("当前是目标站点，可以操作");
} else {
  console.log("没有 url 权限或不在目标站点，跳过");
}