Home Original page

GitHub - dingtwo/batch-close-tab: 根据域名规则批量删除tab

设置域名规则，一键关闭所有符合规则的浏览器标签页

TODO

[ ] gist sync rules

用户交互流程 / User Interaction Flow

flowchart TD
    A[用户安装扩展] --> B{需要配置域名<br/>白名单规则？}

    B -->|是| C["右键扩展图标<br/>选择\"选项\""]
    C --> D[在选项页面添加<br/>域名规则]
    D --> E[保存配置]
    E --> F[点击扩展图标]

    B -->|否| F[点击扩展图标]

    F --> G[查看按域名分组的<br/>标签页列表]
    G --> H{选择关闭方式}

    H -->|按域名关闭| I[点击域名旁的<br/>清理按钮]
    I --> J[关闭该域名下所有标签]

    H -->|按白名单关闭| K[点击'清理白名单'<br/>按钮]
    K --> L[关闭白名单中的所有标签]

    H -->|展开查看| M[点击域名展开<br/>查看具体标签]
    M --> N[查看标签详情<br/>标题、图标等]
    N --> O[完成操作]

    %% 样式定义
    classDef startNode fill:#d4edda,stroke:#28a745,stroke-width:2px
    classDef actionNode fill:#cce5ff,stroke:#007bff,stroke-width:2px
    classDef decisionNode fill:#fff3cd,stroke:#ffc107,stroke-width:2px
    classDef endNode fill:#f8d7da,stroke:#dc3545,stroke-width:2px

    %% 应用样式
    class A startNode
    class B,H decisionNode
    class C,D,E,F,G,I,K,M,N actionNode
    class J,L,O endNode
Loading

主要功能 / Main Features

  1. 域名分组显示 - 自动按域名对标签页进行分组，显示每组的标签数量
  2. 一键关闭 - 支持按域名批量关闭标签页
  3. 白名单管理 - 可配置域名白名单，支持批量清理白名单中的标签
  4. 详细查看 - 可展开查看每个域名下的具体标签页信息

使用步骤 / Usage Steps

  1. 安装扩展 - 在 Chrome 浏览器中安装此扩展
  2. 配置白名单（可选）- 右键扩展图标选择"选项"，添加需要管理的域名规则
  3. 打开扩展 - 点击扩展图标打开弹窗界面
  4. 选择操作：
    • 点击域名旁的清理按钮，关闭该域名下的所有标签
    • 点击"清理白名单"按钮，关闭白名单中配置的所有域名标签
    • 点击域名可展开查看具体的标签页详情

Set domain name rules and close all browser tabs that match the rules with one click

a chrome extension tools built with Vite + Vue, and Manifest v3

Installing

  1. Check if your Node.js version is >= 14.
  2. Change or configurate the name of your extension on src/manifest.
  3. Run npm install to install the dependencies.

Developing

run the command

$ cd batch-close-tab

$ npm run dev

Chrome Extension Developer Mode

  1. set your Chrome browser 'Developer mode' up
  2. click 'Load unpacked', and select batch-close-tab/build folder

Nomal FrontEnd Developer Mode

  1. access http://0.0.0.0:3000/
  2. when debugging popup page, open http://0.0.0.0:3000//popup.html
  3. when debugging options page, open http://0.0.0.0:3000//options.html

Packing

After the development of your extension run the command

Now, the content of build folder will be the extension ready to be submitted to the Chrome Web Store. Just take a look at the official guide to more infos about publishing.

Generated by create-chrome-ext