浏览器插件在每个 iframe 都会加载大量文件

沉浸式翻译加载 locales.json

完整地址 chrome-extension://amkbmndfnliijdhojkpoglbnaaahippg/locales.json,大小 2.2MB,耗时 90ms

文件内容惨不忍睹,一打开就能看到一片关于登入、开通会员、Pro 的关键字,知道是本地化翻译文件,但很难接受这种内容每次都加载。

因为插件是闭源的,解决方法是把站点访问权限从 在所有网站上 改成 单击时,用的时候才加载插件,拜拜。

Surfingkeys 加载 pages/emoji.tsv

完整地址 chrome-extension://kgnghhfkloifoabeaobjkgagcecbnppg/pages/emoji.tsv,大小 27.7KB,耗时 13ms
没找见可以配置的地方,改代码吧

src/content_scripts/common/insert.js
const emojiPrompt = new CursorPrompt((c) => {
	const ee = c.split("\t");
	const parsedUnicodeEmoji = String.fromCodePoint.apply(null, ee[0].split(','));
	return "<div><span>{0}</span>{1}</div>".format(parsedUnicodeEmoji, ee[1]);
}, (elm) => {
	return elm.firstElementChild.innerText;
}, new Promise((r) => {
	fetch(chrome.runtime.getURL("pages/emoji.tsv"))
		.then(res => Promise.all([res.text()]))
		.then(res => {
			r(res[0].split("\n"));
		});
}));
self.enableEmojiInsertion = () => {
	self.mappings.add(":", {
		annotation: "Input emoji",
		feature_group: 15,
		stopPropagation: function() {
			return false;
		},
		code: function() {
			setTimeout(() => {
				emojiPrompt.activate(getRealEdit(), undefined, runtime.conf.startToShowEmoji, -1);
			}, 100);
		}
	});
};

主要是这里的 new Promise 创建即运行,即便关闭 emoji 相关功能也无法控制不加载。
编译还得用 node:14,太老了,直接 Docker

diff --git a/src/content_scripts/common/insert.js b/src/content_scripts/common/insert.js
index 3a9df97..d36f481 100644
--- a/src/content_scripts/common/insert.js
+++ b/src/content_scripts/common/insert.js
@@ -180,7 +180,7 @@ function createInsert() {
         return "<div><span>{0}</span>{1}</div>".format(parsedUnicodeEmoji, ee[1]);
     }, (elm) => {
         return elm.firstElementChild.innerText;
-    }, new Promise((r) => {
+    }, () => new Promise((r) => {
         fetch(chrome.runtime.getURL("pages/emoji.tsv"))
             .then(res => Promise.all([res.text()]))
             .then(res => {
diff --git a/src/content_scripts/common/cursorPrompt.js b/src/content_scripts/common/cursorPrompt.js
index 785a44c..64f7e17 100644
--- a/src/content_scripts/common/cursorPrompt.js
+++ b/src/content_scripts/common/cursorPrompt.js
@@ -64,7 +64,7 @@ class CursorPrompt {
         if (this.data) {
             this.#render();
         } else if (this.fetcher) {
-            this.fetcher.then((res) => {
+            this.fetcher().then((res) => {
                 this.data = res;
                 this.#render();
             });

DotEnv 中定义带引号的多行文本

我需要在环境变量中放一串带换行和引号的字符串,由 DotEnv 从 .env 文件中读取。

其实能读取 JavaScript 支持的字符串格式,所以 ENV=`string"with"quote` 就可以

HEADER_INJECT=`<button id="error-button">Throw test error</button>
<script>
  function handleClick () {
    throw new Error('This is a test error');
  }
  document.querySelector("#error-button").addEventListener("click", handleClick);
</script>`