20 行代码实现一个外置式 Stylus 扩展

长久以来我对很多浏览器扩展都是不满意的，这次重写 Stylus

理想中的 User CSS loader 应该符合以下条件

1 . CSS 应该是外置的，这样才能满足
1). 方便用顺手的编辑器改写
2). 使用预处理器
3). 同时给多个浏览器使用
4). 避免浏览器崩溃毁数据

2 . CSS 应该是自匹配的，不需要额外编写规则。把 v2ex.com.css 放在硬盘上，立即对网站生效，删除后立即失效

3 . CSS 模块化，163.com.css 先加载，news.163.com.css 后加载，规则叠加，互不引用

4 . CSS 应该有简单的地址查询能力

>> www.bilibili.com.css /* 只对 B 站文章页面生效 */ html[location*="/read/cv"] { ...some code } /* 只对 B 站视频页面生效 */ html[location*="/video/av"] { ...some code } 

按照这个标准，写了个简易版

Tampermonkey UserJS

// ==UserScript== // @name outboard user css loader // @author autoxbc // @version 1.0 // @match *://*/* // @run-at document-start // @require https://wzrd.in/standalone/tldjs // ==/UserScript== if(location.hostname) { const root = document.documentElement ; root.setAttribute('location', location ); let domain = tldjs.getDomain(location); const domains = [ domain ]; const subs = tldjs.getSubdomain(location).split('.').filter( e => e ).reverse(); subs.forEach( sub => domains.push( domain = sub + '.' + domain ) ); domains.forEach( async domain => { const link = Object.assign( document.createElement('link') , { rel:'stylesheet', href:`https://localhost/styles/${ domain }.css`, } ); root.append(link); const { ok } = await fetch( link.href , { mode:'cors', cache:'no-cache', } ); if(!ok) link.remove(); } ); } 

tld.js 的 standalone 版本地址是 tld.js 作者 oncletom 给出的，比较安全
https://github.com/oncletom/tld.js/issues/37

注意：
既然是外置式，需要准备一个文件服务器来传递数据，这里用 node.js + http-server

http-server 启动参数

http-server -a localhost --cors --ssl --cert cert.pem --key key.pem 

CORS 标志使得这里不使用特权方法 GM_xmlhttpRequest 也能跨域；
启用 SSL 避免了浏览器的混合内容安全策略错误，需要给文件服务器添加自签名证书，OpenSSL 或者 LibreSSL 或者在线生成；
这里也没有使用 GM_addStyle，GM_addStyle 会把 CSS 内嵌，不利于调试；现在这样更容易区分代码来自那个文件

事实上，在我自己的系统里，不止 User CSS 外置，这个加载器也用 Tampermonkey 的 @require 外置了，所有浏览器都可以同时对接这个加载器，即 EaaS -- Extensions as a Service

有人喜欢 Chrome，有人喜欢 Firefox，如果他们都用外置式的扩展，会不会更有趣？