Tab Roulette - 我的第一个扩展

我当前的目标是创建一个简单的 Chrome 扩展，利用扩展框架的后台功能。

回顾一下，后台脚本作为服务工作者运行，主要设计用于处理不需要直接用户交互的任务。

它的关键角色之一是充当通信中心或事件处理程序，作为浏览器扩展架构中唯一持久且可靠的组件。与短暂的内容脚本、弹出窗口或选项页面不同，后台服务工作线程在终止处理传入事件时会自动重新启动，从而确保连续性。

我计划利用后台脚本的这种功能作为我的扩展的中央控制器。

用例

第一个 Chrome 扩展将非常简单。它将侦听扩展程序操作图标上的点击，并通过触发类似轮盘赌的行为进行响应。轮盘赌将在短时间内按顺序激活当前在用户浏览器中打开的选项卡，直到随机选择一个选项卡。

如您所见，此扩展没有实际目的，而纯粹是作为学习练习。

清单

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

除了清单中指定的用于 Chrome Web Store 和扩展程序管理界面的图标之外，最重要的添加是操作属性。此属性配置单击工具栏图标时扩展的行为。在我们的例子中，它指示服务工作线程在用户交互时启动选项卡轮盘赌。

考虑到
我的代码使用 ES 导入，但如前所述，service_worker 没有显式声明为模块。怎么还有效？

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

这些导入由 Vite 在捆绑过程中处理和解决。

背景

如前所述，后台脚本将监听操作图标的点击并启动选项卡轮盘作为响应。

chrome.action.onClicked.addListener(async () => {
 ...
})

要强调的侦听器逻辑的关键方面：首先，我需要收集当前在活动窗口中打开的所有选项卡。这很重要，因为我的代码需要引用这些选项卡才能按顺序循环浏览它们。

const currentWindow = await chrome.windows.getCurrent();
const windowTabs = await chrome.tabs.query({
  windowId: currentWindow.id,
});

我最初在使用 chrome.tabs.query 而不指定 windowId 时感到困惑，因为它返回所有打开的浏览器窗口中的所有选项卡，而我只想要活动窗口中的选项卡。由于列表中的选项卡数量较多，这导致了意外结果。

一旦我理解了这种行为，按顺序激活选项卡就变得简单了。它只涉及更新选项卡属性以按顺序将每个选项卡设置为活动状态，直到最终选择随机选项卡。

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

我想要实现的另一个目标是调整选项卡激活的速度 - 快速启动并在接近结束时减慢速度。为了实现这一点，我在初始测试中使用的本机 setInterval 函数是不够的。相反，我实现了一个小实用程序，它允许我创建一个可调整的间隔，提供一种根据需要动态修改其时间的方法。

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

就是这样——一个带有有趣用例的简单扩展，作为深入研究浏览器扩展世界的借口。如果您对详细信息感到好奇，我还会与您分享源代码。

哦，我还使用这个项目来探索发布过程，我发现这非常简单。现在就等审稿和最终发表了。

https://github.com/ivaneffable/tabRoulette

以上是Tab Roulette - 我的第一个扩展的详细内容。更多信息请关注PHP中文网其他相关文章！