Chrome插件开发选项卡管理器
浏览：663 次
1.前言
上周第一次开发Chrome插件之后，我一直在思考用插件可以解决哪些实际问题？当我在浏览器中寻找灵感时，我被打开的众多选项卡所启发。
呃，为什么不构建一个插件来管理选项卡？每次我同时打开太多标签页时，被挤压的标题总是让我困惑，到底是哪个。观看非常不便。所以，在一个周末的下午辗转反侧之后，我想到了这样的东西（gif图可能有点大，请耐心等待…）：
预览
2.准备工作
国际实践，让我们在进入主题之前学习一些初步知识。安静地打开Chrome插件，直接进入我们的。我们可以看到，它为我们提供了很多方法，甚至是executeScript。这可以说拥有非常大的权限，但这与我们这次的需求无关。。。
2.1查询
由于我们的要求是管理选项卡，因此我们必须首先获取所有选项卡信息。扫描后，最相关的方法是：
获取具有指定属性的所有选项卡，如果未指定属性，则获取所有选项卡。
作为官方介绍，该方法可以根据指定条件返回相应的选项卡；如果未指定属性，则可以获取所有选项卡。这正好满足了我们的需求。根据API说明，我尝试在回调中打印tabs对象：
色度标签。查询（｛｝，tabs＝＞console.log（tabs））；
[
{
“活动”：真，
“可听”：假，
“autoDiscardable”：真，
“已丢弃”：false，
“favIconUrl”：“https://static.clewm.net/static/images/favicon.ico ",
“高度”：916，
“突出显示”：true，
“id”：25，
“隐姓埋名”：假，
“索引”：0，
“mutedInfo”：｛“muted”：false｝，
“pined”：真，
“选定”：true，
“状态”：“完成”，
“标题”：“饲料文本的二维码生成器”，
“url”：“https://cli.im/text?bb032d49e2b5fec215701da8be6326bb ",
“宽度”：1629，
“windowId”：23
},
...
{
“活动”：真，
“可听”：假，
“autoDiscardable”：真，
“已丢弃”：false，
“favIconUrl”：“https://www.google.com/images/icons/product/chrome-32.png ",
“高度”：948，
“突出显示”：true，
“id”：417，
“隐姓埋名”：假，
“索引”：0，
“mutedInfo”：｛“muted”：false｝，
“pinned”：假，
“选定”：true，
“状态”：“完成”，
“title”：“chrome.tabs-谷歌chrome”，
“url”：“https://developers.chrome.com/extensions/tabs#method-查询“，
“宽度”：1629，
“windowId”：812
}
]
仔细观察后，不难发现两个选项卡的windowId不同。这是因为我在本地同时打开了两个Chrome窗口，而这两个选项卡恰好位于两个不同的窗口中，所以它正好符合预期。
此外，ID、索引、突出显示、favIconUrl、标题和其他字段信息在下面的文本中也起着非常重要的作用，可以查看相关定义。
在设计Chrome插件UI时，为了突出显示当前窗口中的当前选项卡，我们必须从上面的数据中找到该选项卡。由于每个窗口中都有一个突出显示的选项卡，因此我们无法直接确定哪个选项卡属于当前窗口。但是，我们可以：
chrome.tabs.查询(
｛active:true，currentWindow:true｝，
tabs=>console.log（tabs[0]）
);
根据文档，通过将active和currentWindow属性指定为true，我们可以成功获取当前窗口的当前选项卡。然后匹配windowId并突出显示选项卡，我们可以从选项卡数组中找出哪个是真正的当前选项卡。
2.2亮点
根据以上内容，我们可以获取所有选项卡信息，并确定哪个选项卡是当前窗口的当前选项卡，因此我们可以根据这些数据构建列表。接下来要做的是，当用户单击其中一项时，浏览器可以切换到相应的选项卡。根据这一要求，我们发现：
突出显示给定的选项卡，并将焦点放在组中的第一个选项卡上。如果指定的选项卡当前处于活动状态，则将显示为不执行任何操作。
色度标签。突出显示（｛windowId，tabs｝）；
根据API的说明，它需要windowId和tab索引，这些信息可以在每个tab实体中获得。然而，有一个陷阱需要注意：如果将当前窗口切换到另一个窗口的选项卡，则可以切换另一个窗的选项卡，但Chrome窗口仍然聚焦在当前窗口上。因此，应使用以下方法聚焦其他窗口：
chrome.windows。更新（windowId，｛focused:true｝）；
2.3拆除
为了增强插件的实用性，我们可以在选项卡列表中添加删除指定选项卡的功能。阅读文件后，我们可以确认我们的要求可以实现。
关闭一个或多个选项卡。
chrome.tabs.remove（tabId）；
tabId是选项卡数据中的ID属性。因此，关闭选项卡的功能不是问题。
3.开工
与插件不同，这个插件更复杂，涉及m
