开源 chrome 插件： URL Block

[ygweric]

URL Block

github 地址 https://github.com/ygweric/chrome-url-block

项目背景

上班摸鱼时候，总喜欢看一下微博、观网、新闻网站，但自己觉得很无聊，但忍不住会打开。

插件功能

所以我开发了这个网站，能够屏蔽一些网站。

主要功能如下

• 根据域名屏蔽
• 根据地址屏蔽
• 暂停工作一会，划个水

chrome 地址

https://chromewebstore.google.com/detail/url-block/fdapkdfieimlngpkffldigiajemcamlb

离线 crx 下载地址 https://github.com/ygweric/chrome-url-block/releases

理论上也可以编译为 Firefox 插件，但是我我懒得做~

技术栈

vitesse + vue3 + tailwindCSS

效果截图

编译

我使用 pnpm ，但 yarn 、npm 都支持 *node version v18.20.0

编译运行

pnpm i 
pnpm run dev
pnpm run build

现状

• 两年前用原生的 js 写了 1.0 版本，没怎么维护。最近有头脑发热想维护下，就更新了 2.0 ，UI 和框架都好了很多，感谢 Vitesse 大神的模板。

• 主要自用很方便，纯自嗨

• 目前用户 1.7k 左右

• 无广告，无盈利，没有更远的发展打算

• 欢迎 PR

未来

• 没有未来
• 欢迎朋友们一块讨论加 wx 群

开发 tips

• 插件中的 popup 、options 、background 已经可以热更新了, 只有 contentScript 需要手动 reload 插件后，刷新页面
• manifest.ts 修改后，需要手动卸载插件在安装才生效

[ab]

地址屏蔽可以用正则吗

[NaSuiBian]

早上我还在想这个，然后写了一下代码哈哈

[ygweric]

@ab 目前不支持哈，不过我回头可以加上，也简单

[sailei]

我今年也写了一个类似的 https://chrome.google.com/webstore/detail/deoehggjhcdfmjkmljlfgadoojndikeb

[ygweric]

@ab 正则已支持

[ab]

@ygweric #5 赞一个

[TomXx]

已经把 douyin 添加到正则且能正常拦截，然后开启 pause 10 分钟，10 分钟之后还能正常刷视频，必须新开一个 douyin 页面才会被拦截，有办法解决吗？

[ygweric]

@TomXx 目前是监听**OnUpdatedChangeInfoType**事件，也就是新开 tab 的事件内容，文档在这里 https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated

> When the user navigates to a new URL in a tab, this typically generates several onUpdated events as various properties of the [tabs.Tab]( https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/Tab) object are updated. This includes the url, but also potentially the title and favIconUrl properties. The status property will cycle through "loading" and "complete".

解决方法：插件开启，或者暂停时间到了以后，有个**setTimoutOut**方法，来 iterate 所有的 tab ，检测 url 匹配后关闭。
```js
var tabs = await chrome.tabs.query({});
tabs.forEach(function (tab) {
// do whatever you want with the tab
});
```

我个人认为这个需求比较小众吧，没必要监听当前页面，暂停（放松）过后，关闭抖音就行，开始工作，自动关闭不是太友好，万一再看关键内容呢，也意义不大。以后有相似需求我会加上。