發現自己一直都不怎麼喜歡寫很複雜的功能,作品大都是「小程式碼」,原始意義上的那個小;
比如前不久折騰的這個東西:「小程式碼」跨文件按行統計文本「Python」_電腦網路_沉冰浮水
然後最近 feedly 又改版了,雖然目測只是根元素 #box
換成了 #root
,導致對應的「GM_腳本」也要修改;
之前有用 rollup.js 弄了一套開發「GM_腳本」的體系,實現了多個 js 文件構建拼接成一份最終程式碼,只是需要另外弄個 web 服務用來安裝到瀏覽器擴展,修改編譯後要再安裝一次來更新,然後手動刷新瀏覽器頁面……
「折騰」使用 rollup.js 模塊化編寫 GM 腳本_電腦網路_沉冰浮水
自帶 web 服務並且支持熱更新的輪子其實是有的。比如 vite-plugin-monkey,也有實際上應用到某些項目中,然而已經習慣了以純文本方式引入 Userscript Header
;
然後我自己也不需要在「GM_腳本」中引入大段的 CSS 或者 Vue 什麼的;
// 所見既所得.jpg
const gm_banner = `
// ==UserScript==
// @name New Userscript
// @namespace https://www.wdssmq.com/
// @version 0.1
// @author 沉冰浮水
// @description try to take over the world!
// @license MIT
// @noframes
// @run-at document-end
// @match <$URL$>
// @grant none
// ==/UserScript==
/* jshint esversion: 6 */
/* eslint-disable */
`;
const gm_name = "empty_def";
export { gm_banner, gm_name };
一開始有找到 rollup-plugin-dev
rollup-plugin-livereload
這兩個插件,然而兩者都有跨域問題(CORS);「- CSP 和 CORS 目測是兩個東西,可以自行了解 -」
前者可以修改後允許跨域,後者則因為又依賴於上游包,就挺麻煩的;
總之各種紐結之後自己縫合了一個輪子出來 ——
wdssmq/rollup-plugin-monkey: 使用 rollup 開發「GM_腳本」:
目前程式碼在 v1 分支;README 好麻煩,pnpm 安裝仍然有些問題要解決 Orz;要不要發布到 npm 啊,git 安裝也不是不能用;- 所以我為了講這一部分的內容水了一篇文章;
「小程式碼」rollup.js 開發「GM_腳本」演示_嗶哩嗶哩_bilibili:
Disable Content-Security-Policy:
https://microsoftedge.microsoft.com/addons/detail/disable-contentsecurity/ecmfamimnofkleckfamjbphegacljmbp