前言 | 狗子的博客

# 前言

文章内容来源于Chrome开发者文档，大部分为翻译，加上自己的一点补充或者理解，不足之处请担待，系列将通过每个实战例子，来加深对插件开发的理解上手；

目录导航

# 1、介绍

这次我们将要开发的插件是：将tabs标签页进行分组管理，展开/折叠，对标签栏的标签进行收纳；会学到的是使用

host_permissions权限申请
tabGroups API使用
tabs API使用

废话不多说，我们下面进入前期准备

# 2、项目准备

老规矩，新建我们的项目文件夹tabs-manager，创建manifest.json, popup.css, popup.html, popup.js，还有images文件夹；下面是对应的icon图片下载

icon-16.png (opens new window)

icon-32.png (opens new window)

icon-48.png (opens new window)

icon-128.png (opens new window)

最后我们的目录结构如下：，没问题后我们继续开车🚗

tabs-manager
├── images
│   ├── icon-128.png
│   ├── icon-16.png
│   ├── icon-32.png
│   └── icon-48.png
├── manifest.json
├── popup.css
├── popup.html
└── popup.js

# 3、编写我们的代码

依次往我们的文件中填充内容，首先是manifest.json，内容如下：

host_permissions属性允许我们在特定域名下，通过js访问该域名的标题，URL地址等属性，我们这里暂时对百度和知乎的网页进行分组管理，先填百度和知乎的域名；

permissions属性填写tabGroups，允许我们在js中使用chrome.tabGroups相关API能力

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": [
    "https://zhihu.com/*",
    "https://www.zhihu.com/*",
    "https://baidu.com/*",
    "https://www.baidu.com/*"
  ],
  "permissions": [
    "tabGroups"
  ]
}

其次是popup.html，内容如下：

body中的template，template不会被展示到页面中，我们定义一个template方便用js去渲染；另外引入我们的popup.js

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./popup.css" />
</head>

<body>
  <template id="li_template">
    <li>
      <a>
        <h3 class="title">Tab Title</h3>
        <p class="pathname">Tab Pathname</p>
      </a>
    </li>
  </template>

  <h1>Tabs标签页管理</h1>
  <button>Group Tabs</button>
  <ul></ul>

  <script src="./popup.js" type="module"></script>
</body>

</html>

接着是popup.css，内容如下：定义我们弹窗的样式

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

接着是popup.js，内容如下：在这个文件，我们主要做了下面几件事

获取知乎相关tabs集合
获取百度相关tabs集合
讲知乎百度的tabs生成一个个标签，显示在我们的popup.html当中
通过collapsed将百度、知乎的标签页都放在一个group中，折叠展开
点击popup.html中每一个标签可以跳转到对应tab

const zhihuTabs = await chrome.tabs.query({
  url: [
    "https://zhihu.com/*",
    "https://www.zhihu.com/*"
  ]
})

const baiduTabs = await chrome.tabs.query({
  url: [
    "https://baidu.com/*",
    "https://www.baidu.com/*"
  ]
})

const template = document.getElementById("li_template");
const elements = new Set();

for (const tab of zhihuTabs.concat(baiduTabs)) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title
  const pathname = tab.url

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // 监听点击事件，然后切换成当前tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}

// 添加到我们的popup.html中
document.querySelector("ul").append(...elements);

let collapsed = false

const button = document.querySelector("button");
const toGroup = async (tabIds, title) => {
  if (tabIds && tabIds.length) {
    const group = await chrome.tabs.group({ tabIds })
    await await chrome.tabGroups.update(group, { title: title || "Groups", collapsed });
  }
}
button.addEventListener("click", async () => {
  // 点击groups tabs按钮的时候，进行折叠/展开，并设置群组名称
  const zhihuTabIds = zhihuTabs.map(({ id }) => id);
  await toGroup(zhihuTabIds, "Zhihu")

  const baiduTabIds = baiduTabs.map(({ id }) => id);
  await toGroup(baiduTabIds, "Baidu")

  collapsed = !collapsed
});

# 4、安装运行

在浏览器中直接chrome://extensions回车进入扩展程序面板，然后加载我们的文件目录，选中文件夹即可，再点确认就可以了；

安装完成后，将插件置顶，然后点击查看效果，也可以使用我们自定义的快捷键快速打开。

打开下面的测试地址，然后使用我们的插件进行group分组

# 5、最后

以上就是我们这一节的内容了，首先通过声明host_permissions获得访问某些域名的url和title信息，在popup.js中通过过滤查找我们需要的tab标签页，然后根据规则进行分组，在这个基础上，加入了展开/折叠分组的功能；希望看到最后的你有所收获～，源码地址会放在下面

# 相关链接

← 系列【四】调试我们开发的插件