谷歌浏览器插件教程tabs 标签页

chrome.tabs

使用 chrome.tabs API 与浏览器的标签系统进行交互。您可以使用此 API 在浏览器中创建、修改和重新排列选项卡。
黑白课堂
需要清单权限

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs"
  ],
  ...
}

官方文档查

简单使用例子

插件安装监听

第一次安装插件触发监听打开页面,可打开插件内的地址

//background.js:

chrome.runtime.onInstalled.addListener((reason) => {

   console.log('安装扩展程序、扩展程序更新到新版本以及 Chrome 更新到新版本时触发',reason,chrome.runtime.OnInstalledReason);
    if (reason.reason === chrome.runtime.OnInstalledReason.INSTALL) {
        chrome.tabs.create({
            url: 'https://www.heibaiketang.com' //也可以打开插件内的介绍使用文件
        });
    }
});

获取当前页面

//background.js:
async function getCurrentTab() {
  let queryOptions = { active: true, lastFocusedWindow: true };
  // `tab` will either be a `tabs.Tab` instance or `undefined`.
  let [tab] = await chrome.tabs.query(queryOptions);
  return tab;
}

静音指定选项卡

//background.js:
function toggleMuteState(tabId) {
  chrome.tabs.get(tabId, async (tab) => {
    let muted = !tab.mutedInfo.muted;
    await chrome.tabs.update(tabId, { muted });
    console.log(`Tab ${tab.id} is ${ muted ? 'muted' : 'unmuted' }`);
  });
}

单击时将当前选项卡移动到第一个位置

chrome.tabs.onActivated.addListener(activeInfo => move(activeInfo));

async function move(activeInfo) {
  try {
    await chrome.tabs.move(activeInfo.tabId, {index: 0});
    console.log('Success.');
  } catch (error) {
    if (error == 'Error: Tabs cannot be edited right now (user may be dragging a tab).') {
      setTimeout(() => move(activeInfo), 50);
    }
  }
}

更多例子查看官方的 https://github.com/GoogleChrome/chrome-extensions-samples/tree/master/mv2-archive/api/tabs/

类型

MutedInfo

  • extensionId 更改静音状态的扩展程序的 ID。如果扩展不是静音状态上次更改的原因,则不设置
  • muted 选项卡是否静音(阻止播放声音)。即使标签尚未播放或当前未播放声音,标签也可能会静音。相当于是否显示“静音”音频指示器。
  • reason 选项卡静音或取消静音的原因。如果选项卡的静音状态从未更改过,则不设置

MutedInfoReason

导致静音状态更改的事件

  • user 用户
  • capture 捕获
  • extension 扩展

Tab

  • active 选项卡在其窗口中是否处于活动状态。并不一定意味着窗口是聚焦的。
  • audible 选项卡在过去几秒钟内是否发出声音(但如果也静音,则可能听不到)。相当于是否显示“扬声器音频”指示灯。
  • autoDiscardable 资源不足时浏览器是否可以自动丢弃选项卡。
  • discarded 选项卡是否被丢弃。丢弃的选项卡是其内容已从内存中卸载,但在选项卡条中仍可见的选项卡。下次激活时会重新加载其内容。
  • favIconUrl 选项卡的网站图标的 URL。"tabs"仅当扩展程序的清单包含权限时,此属性才存在。如果选项卡正在加载,它也可能是一个空字符串。
  • groupId 选项卡所属组的 ID。
  • height 选项卡的高度(以像素为单位)。
  • highlighted 选项卡是否突出显示。
  • id 选项卡的 ID。标签 ID 在浏览器会话中是唯一的。在某些情况下,可能不会为选项卡分配 ID;例如,当使用sessionsAPI 查询外部选项卡时,可能会出现会话 ID。也可以chrome.tabs.TAB_ID_NONE为应用程序和开发工具窗口设置选项卡 ID。
  • incognito 选项卡是否在隐身窗口中。
  • index 选项卡在其窗口中的从零开始的索引。
  • mutedInfo 选项卡的静音状态和上次状态更改的原因。
  • openerTabId 打开此选项卡的选项卡的 ID(如果有)。仅当打开器选项卡仍然存在时,此属性才存在。
  • pendingUrl 选项卡在提交之前导航到的 URL。"tabs"仅当扩展程序的清单包含权限并且存在待处理的导航时,此属性才存在。
  • pinned 选项卡是否已固定。
  • sessionId 用于唯一标识从sessionsAPI 获取的选项卡的会话 ID。
  • status 选项卡的加载状态。
  • title 选项卡的标题。"tabs"仅当扩展程序的清单包含权限时,此属性才存在。
  • url 选项卡主框架的最后提交 URL。此属性仅在扩展的清单包含"tabs"权限时才存在,并且如果选项卡尚未提交,则可能是空字符串。另请参阅Tab.pendingUrl。
  • width 选项卡的宽度(以像素为单位)。
  • windowId 包含选项卡的窗口的 ID。

TabStatus

  • unloaded 卸载
  • loading 加载
  • complete 完成的

WindowType

  • normal
  • popup
  • panel
  • app
  • devtools

ZoomSettings

  • defaultZoomFactor 用于在对 tabs.getZoomSettings 的调用中返回当前选项卡的默认缩放级别。
  • mode 定义如何处理缩放变化,即哪个实体负责页面的实际缩放;默认为automatic.
  • scope 定义缩放更改是针对页面的原点持续存在,还是仅在此选项卡中生效;默认为per-origin处于automatic模式时,per-tab否则。

ZoomSettingsMode

  • automatic 自动的
  • manual 手动的
  • disabled 禁用

ZoomSettingsScope

  • per-origin
  • per-tab

属性

MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND

captureVisibleTab每秒可以调用的最大次数。captureVisibleTab很贵,不应该经常调用。

TAB_ID_NONE

表示缺少浏览器选项卡的 ID。

方法

captureVisibleTab

捕获可见标签(类似截屏,截屏当前的界面,输出截屏的base64 url)
捕获指定窗口中当前活动选项卡的可见区域。要调用此方法,扩展必须具有 权限或activeTab权限。除了扩展程序可以正常访问的站点外,此方法还允许扩展程序捕获原本受限制的敏感站点,包括 chrome:-scheme 页面、其他扩展程序的页面和 data: URL。这些敏感站点只能通过 activeTab 权限捕获。仅当扩展名已被授予文件访问权限时,才能捕获文件 URL。

chrome.tabs.captureVisibleTab(
  windowId?: number,
  options?: ImageDetails,
  callback?: function,
)
  • windowId 目标窗口。默认为当前窗口。
  • options 选项 ImageDetails
  • callback
(dataUrl: string) => void
//dataUrl 对捕获的选项卡可见区域的图像进行编码的数据 URL。可以分配给 HTMLimg元素的 'src' 属性以进行显示。

connect

连接到指定选项卡中的内容脚本。runtime.onConnect在当前扩展的指定选项卡中运行的每个内容脚本中都会触发该事件。有关更多详细信息,请参阅内容脚本消息传递。

chrome.tabs.connect(
  tabId: number,
  connectInfo?: object,
)
  • tabId 选项卡 ID
  • connectInfo
    • frameId 框架ID,打开一个特定帧的端口,frameId而不是选项卡中的所有帧。
    • name 传递到 onConnect 用于监听连接事件的内容脚本。

create

创建一个新选的标签页

chrome.tabs.create(
  createProperties: object,
  callback?: function,
)
  • createProperties
    • active 选项卡是否应成为窗口中的活动选项卡。不影响窗口是否聚焦(参见 参考资料windows.update)。默认为true.
    • index 选项卡应在窗口中的位置。提供的值被限制在零和窗口中的选项卡数之间。
    • openerTabId 打开此选项卡的选项卡的 ID。如果指定,打开选项卡必须与新创建的选项卡位于同一窗口中。
    • pinned 是否应固定选项卡。默认为false
    • windowId 在其中创建新选项卡的窗口。默认为当前窗口。
  • callback
(tab: Tab) => void
需要花费 30 个 学币,后才能查看完整内容 立即购买

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。
空气

空气 · 中级学士

热爱技术,喜欢新东西。

老程序员年度分享MVP
查看更多

最新视频课程

钻级赞助商