系列文章可以查看《浏览器扩展程序开发笔记》专栏
参考: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
字符串(可选),新建标签页后访问给定的 URLwindowId
数值(可选),在指定的窗口中新建标签页,默认是在当前激活的窗口中打开
// 借助 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;
};