沉冰浮水

沉冰浮水

做最终到的事,成为最终成为的人!
github
bilibili
mastodon
zhihu
douban

「言說」寫了份有點「大」的程式碼

發現自己一直都不怎麼喜歡寫很複雜的功能,作品大都是「小程式碼」,原始意義上的那個小;

比如前不久折騰的這個東西:「小程式碼」跨文件按行統計文本「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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。