编写 Chrome 插件自动关闭重复标签页

背景

我在平时使用中会出现这种场景，Chrome 打开了很多 http://localhost:8855/page/ 开头的网页，其中有一些重复网页，体现为链接相似或相同，标题相同，内容相同，因此我需要在打开一个 http://localhost:8855/page/ 开头的网页后，以链接和标题为依据删除掉重复的旧的标签页，在尝试了不少现成插件后发现不满足需求，因此自己写了一个。

更多背景：macOS 上使用 Chrome 在后台打开网页

编写插件

1. 新建一个文件夹，例如 Close_Duplicate_Tabs
2. 在文件夹内新建 manifest.json，描述插件的信息和权限，内容如下：

   {
     "manifest_version": 3,
     "name": "Close Duplicate Tabs",
     "version": "1.0",
     "description": "A Chrome extension to close duplicate tabs based on the title.",
     "permissions": ["tabs"],
     "background": {
       "service_worker": "background.js"
     }
   }
   

3. 新建 background.js 文件，内容如下：

   // 当新标签页被创建时触发此事件
   chrome.tabs.onCreated.addListener(function (tab) {
     // 延迟一段时间等新标签页加载完毕
     setTimeout(() => checkAndCloseDuplicateTabs(tab), 5000);
   });
   
   function checkAndCloseDuplicateTabs(newTab) {
     // 根据 id 获取 tab 信息
     chrome.tabs.get(newTab.id).then((tab) => {
       // 获取 tab 标题和 id
       const newTabTitle = tab.title;
       const newTabId = tab.id;
   
       // 这段地址开头的 tab 才处理
       if (!tab.url.startsWith("http://localhost:8855/page/")) {
         return;
       }
   
       // 筛选同地址同名的 tab
       queryInfo = {
         title: newTabTitle,
         url: "http://localhost:8855/page/*",
       };
       chrome.tabs.query(queryInfo).then((tabs) => {
         // 生成重复 tab 的 id 列表，不包含新创建的
         const duplicateTabs = tabs
           .map((tab) => tab.id)
           .filter((id) => id !== newTabId);
   
         // 删除重复 tab
         chrome.tabs.remove(duplicateTabs);
       });
     });
   }
   

Chrome 加载插件

在 Chrome 的“扩展程序”设置页中，勾选“开发者模式”，点击“加载已解压的扩展程序”，选择插件的文件夹，就能加载了。