浏览器插件开发常见需求——标签页

2,057 阅读3分钟

系列文章可以查看《浏览器扩展程序开发笔记》专栏


参考:chrome.tabs

Chrome 提供以 chrome.tabs 为前缀的 API,它们是与标签页相关方法

这些方法里会常用到或一般返回 标签对象 Tab,它包含以下常用的属性:

  • active 布尔值,该标签是否为(其所在的窗口中的)当前激活的标签页
  • audible 布尔值(可选),标签页是否在过去几秒内产生了声音(如果有声音播放,会在该标签页的右侧显示一个扬声器图标 🔈)
  • mutedInfo 对象(可选),标签页是否被静音了以及静音的理由
  • favIconUrl 字符串(可选),标签页所显示的网址的 favicon 图标 URL。如果要访问该属性,需要在扩展出现的配置清单 manifest.json 的配置项 permissions 中声明 tabs 权限。如果标签页正在加载网页时,该属性值可能是一个空字符串
  • groupId 数值,标签页所属的标签组
  • width 数值(可选),标签页的宽度,单位是像素 px
  • height 数值(可选),标签页的高度,单位是像素 px
  • id 数值(可选),在浏览器窗口中,每一个标签页的 ID 都是独特唯一的,但有些情况下,例如使用 sessions API 查询标签页时,标签对象并会分配到一个 ID 值
  • incognito 布尔值,标签页是否在隐身模式中
  • index 数值,标签页在浏览器窗口中的位置,索引从 0 开始
  • title 字符串(可选),标签页所显示网页的标题。如果要访问该属性,需要在扩展出现的配置清单 manifest.json 的配置项 permissions 中声明 tabs 权限。
  • url 字符串(可选),标签页所显示网页的 URL。需要在扩展出现的配置清单 manifest.json 的配置项 permissions 中声明 tabs 权限。

💡 在开发与标签页相关的扩展程序时,一般还会使用 bookmarks 书签相关的 API

创建一个新标签页

使用方法 chrome.tabs.create(createProperties: object) 创建一个新标签,它是一个异步函数,立即返回的是一个 Promise,最终返回的是所创建的标签对象 Tab。

该方法接受一个与标签相关的配置对象作为入参,该对象常用属性如下:

  • active 布尔值(可选),新建的标签是否作为当前激活标签页
  • index 数值(可选),新建标签在当前窗口中的所有标签页的次序,索引从 0 开始
  • url 字符串(可选),新建标签页后访问给定的 URL
  • windowId 数值(可选),在指定的窗口中新建标签页,默认是在当前激活的窗口中打开
// 借助 Chrome 提供的 API,封装一个新建标签页的方法
// 它接收一个参数 active,用以控制是否将新建的标签页作为当前激活的标签页
const createNewTab = async (active = true) => {
  const newTab = await chrome.tabs.create({
    active,
  });
  return newTab;
};

获取当前激活的标签页

使用方法 chrome.tabs.query(queryInfo: object) 获取符合(查询)条件的所有标签页,它是一个异步函数,立即返回的是一个 Promise,最终返回的是所有符合条件的标签对象 Tab 数组

// 借助 Chrome 提供的 API,封装一个获取当前激活的标签页的方法
const getActiveTab = async () => {
  // 匹配条件是 currentWindow 当前窗口的 active 激活的标签页
  // 由于该方法返回的是一个数组,但是激活的标签页只有一个,因此可以使用解构获取该数组唯一的一个元素
  const [tab] = await chrome.tabs.query({
    active: true,
    currentWindow: true,
  });
  return tab;
};