⬆️ 修复 Firefox 中未能使用格式化、TSWorker等问题 (#1005)

Author: cyfung1031

build/pack.js

@@ -6,6 +6,41 @@ const semver = require("semver");
 const manifest = require("../src/manifest.json");
 const package = require("../package.json");
 
+// --- utils ---
+
+const MAX_CHUNK_SIZE = 3 * 1024 * 1024; // 3 MiB
+
+function addFileInChunks(zip, filePath, toDir, baseName, maxChunkSize = MAX_CHUNK_SIZE) {
+  const buffer = fs.readFileSync(filePath);
+  let offset = 0;
+
+  const chunks = [];
+  while (offset < buffer.length) {
+    const end = Math.min(offset + maxChunkSize, buffer.length);
+    const chunk = buffer.subarray(offset, end);
+    chunks.push(chunk);
+    offset = end;
+  }
+  const len = chunks.length;
+
+  for (let idx = 0; idx < len; idx += 1) {
+    const chunk = chunks[idx];
+    // e.g. src/ts.worker.js.part30, src/ts.worker.js.part31, ...
+    const chunkPath = `${toDir}${baseName}.part${idx}`;
+    zip.file(chunkPath, chunk);
+  }
+}
+
+const createJSZip = () => {
+  const currDate = new Date();
+  const dateWithOffset = new Date(currDate.getTime() - currDate.getTimezoneOffset() * 60000);
+  // replace the default date with dateWithOffset
+  JSZip.defaults.date = dateWithOffset;
+  return new JSZip();
+};
+
+// --- utils ---
+
 // 判断是否为beta版本
 const version = semver.parse(package.version);
 if (version.prerelease.length) {
@@ -63,8 +98,8 @@ const chromeManifest = { ...manifest };
 delete chromeManifest.content_security_policy;
 
 delete firefoxManifest.sandbox;
-// firefoxManifest.content_security_policy =
-// "script-src 'self' blob:; object-src 'self' blob:";
+// firefoxManifest.content_security_policy 是为了支持动态组合的 ts.worker.js Blob URL
+firefoxManifest.content_security_policy = "script-src 'self' blob:; object-src 'self' blob:";
 firefoxManifest.browser_specific_settings = {
   gecko: {
     id: `{${
@@ -95,8 +130,8 @@ firefoxManifest.permissions = firefoxManifest.permissions.filter(
   (permission) => permission !== "background"
 );
 
-const chrome = new JSZip();
-const firefox = new JSZip();
+const chrome = createJSZip();
+const firefox = createJSZip();
 
 function addDir(zip, localDir, toDir, filters) {
   const files = fs.readdirSync(localDir);
@@ -120,10 +155,13 @@ firefox.file("manifest.json", JSON.stringify(firefoxManifest));
 
 addDir(chrome, "./dist/ext", "", ["manifest.json"]);
 addDir(firefox, "./dist/ext", "", ["manifest.json", "ts.worker.js"]);
-// 添加ts.worker.js名字为gz
-firefox.file(
-  "src/ts.worker.js.gz",
-  fs.readFileSync("./dist/ext/src/ts.worker.js")
+
+// Now split ts.worker.js into chunks (<4MB each) for Firefox
+addFileInChunks(
+  firefox,
+  "./dist/ext/src/ts.worker.js", // source file on disk
+  "src/",                         // folder path inside zip
+  "ts.worker.js"                  // base name for chunked file
 );
 
 // 导出zip包

package-lock.json

@@ -9,10 +9,11 @@
     "lint": "eslint --ext .js,.ts,.tsx src/",
     "lint-fix": "eslint --ext .js,.ts,.tsx src/ --fix",
     "dev": "concurrently \"webpack --mode development --config ./webpack/webpack.dev.ts\" \"webpack --mode development --config ./webpack/webpack.inject.dev.ts\"",
-    "build": "webpack --mode production --config ./webpack/webpack.prod.ts && concurrently \"npm run build:linter\" \"npm run build:inject && npm run build:no-split\"",
+    "build": "webpack --mode production --config ./webpack/webpack.prod.ts && concurrently \"npm run build:linter\" \"npm run build:monaco\" \"npm run build:inject && npm run build:content\"",
     "build:linter": "webpack --mode production --config ./webpack/webpack.linter.ts",
     "build:inject": "webpack --mode production --config ./webpack/webpack.inject.ts",
-    "build:no-split": "webpack --mode production --config ./webpack/webpack.no.split.ts",
+    "build:content": "webpack --mode production --config ./webpack/webpack.content.ts",
+    "build:monaco": "webpack --mode production --config ./webpack/webpack.monaco.ts",
     "dev:linter": "webpack --mode development --config ./webpack/webpack.linter.dev.ts",
     "pack": "node ./build/pack.js",
     "changlog": "gitmoji-changelog",
@@ -41,7 +42,6 @@
     "lodash": "^4.17.21",
     "monaco-editor": "^0.37.1",
     "monaco-vim": "^0.3.4",
-    "pako": "^2.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^13.1.0",

package.json

@@ -30,8 +30,6 @@ const CodeEditor: React.ForwardRefRenderFunction<
       return () => {};
     }
     let edit: editor.IStandaloneDiffEditor | editor.IStandaloneCodeEditor;
-    // @ts-ignore
-    const ts = window.tsUrl ? 0 : 200;
     setTimeout(() => {
       const div = document.getElementById(id) as HTMLDivElement;
       if (diffCode) {
@@ -70,7 +68,7 @@ const CodeEditor: React.ForwardRefRenderFunction<
 
         setEditor(edit);
       }
-    }, ts);
+    }, 0);
     return () => {
       if (edit) {
         edit.dispose();

src/pages/components/CodeEditor/index.tsx

@@ -1,35 +1,83 @@
+/* eslint-disable no-await-in-loop */
 // @ts-ignore
 // eslint-disable-next-line import/no-unresolved
 import dts from "@App/types/scriptcat";
 import Hook from "@App/app/service/hook";
 import { languages } from "monaco-editor";
-import pako from "pako";
 import Cache from "@App/app/cache";
-import { isFirefox } from "./utils";
 
 // 注册eslint
 const linterWorker = new Worker("/src/linter.worker.js");
+const editorWorker = new Worker("/src/editor.worker.js", { type: "module" });
+
+const getPartialBlob = (idx: number): Promise<Blob | null> => fetch(
+  chrome.runtime.getURL(`/src/ts.worker.js.part${idx}`)
+).then((resp) => (resp.ok ? resp.blob() : null))
+  .catch(() => null);
+const combineBlobsToUrl = async (blobs: Blob[], defaultType?: string): Promise<string> => {
+  const arrayBuffers: ArrayBuffer[] = [];
+  let totalLength = 0;
+
+  // Read all blobs into ArrayBuffers and compute total length
+  for (const blob of blobs) {
+    const arrayBuffer = await blob.arrayBuffer();
+    arrayBuffers.push(arrayBuffer);
+    totalLength += arrayBuffer.byteLength; // <-- sum, don't overwrite
+  }
+
+  // Allocate a single Uint8Array large enough for everything
+  const combined = new Uint8Array(totalLength);
+
+  // Copy each buffer into the combined array
+  let offset = 0;
+  for (const buffer of arrayBuffers) {
+    combined.set(new Uint8Array(buffer), offset);
+    offset += buffer.byteLength;
+  }
+
+  // Create a single Blob out of the combined data
+  const type = defaultType || blobs[0]?.type || "application/octet-stream";
+  const combinedBlob = new Blob([combined], { type });
+
+  // Create a Blob URL
+  const blobUrl = URL.createObjectURL(combinedBlob);
+  // 注意：此处生成的 Blob URL 在整个应用生命周期内用于 Worker，不会被释放。
+  // 如果未来 Worker 支持销毁重建，请在销毁时调用 URL.revokeObjectURL(blobUrl) 释放资源。
+  return blobUrl;
+}
+
+
+const tsWorkerPromise = fetch(chrome.runtime.getURL("/src/ts.worker.js.part0")).then((resp) => {
+  return resp.ok ? resp.blob() : null;
+}).catch(() => { return null }).then(async (blob) => {
+  let worker: Worker;
+  if (blob) {
+    // 有分割
+    const blobs: Blob[] = [];
+    let idx = 0;
+    do {
+      blobs.push(blob);
+      blob = await getPartialBlob(++idx);
+    } while (blob);
+    const url = await combineBlobsToUrl(blobs, "text/javascript");
+    worker = new Worker(url, { type: "module" });
+  } else {
+    // 沒分割
+    worker = new Worker("/src/ts.worker.js", { type: "module" });
+  }
+  return worker;
+});
 
 export default function registerEditor() {
-  // @ts-ignore
-  window.tsUrl = "";
-
-  fetch(chrome.runtime.getURL(`/src/ts.worker.js${isFirefox() ? ".gz" : ""}`))
-    .then((resp) => resp.blob())
-    .then(async (blob) => {
-      const result = pako.inflate(await blob.arrayBuffer());
-      // @ts-ignore
-      window.tsUrl = URL.createObjectURL(new Blob([result]));
-    });
-  // @ts-ignore
+
   window.MonacoEnvironment = {
-    getWorkerUrl(moduleId: any, label: any) {
+    // https://microsoft.github.io/monaco-editor/typedoc/interfaces/Environment.html#getWorker
+    // Returns Worker | Promise<Worker>
+    getWorker(workerId: string, label: string) {
       if (label === "typescript" || label === "javascript") {
-        // return "/src/ts.worker.js";
-        // @ts-ignore
-        return window.tsUrl;
+        return tsWorkerPromise;
       }
-      return "/src/editor.worker.js";
+      return editorWorker;
     },
   };
 

src/pkg/utils/monaco-editor.ts

@@ -17,7 +17,7 @@ const dist = `${__dirname}/dist`;
 const assets = `${__dirname}/build/assets`;
 const template = `${assets}/template`;
 
-const config: Configuration = {
+const configCommon: Configuration = {
   entry: {
     options: `${src}/pages/options/main.tsx`,
     install: `${src}/pages/install/main.tsx`,
@@ -209,4 +209,62 @@ const config: Configuration = {
   },
 };
 
-export default config;
+const configWebWorker: Configuration = {
+  ...configCommon,
+
+  optimization: {
+    minimize: true,
+    splitChunks: false,
+    runtimeChunk: false,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false, // 避免额外产生 .LICENSE.txt
+        terserOptions: {
+          format: {
+            // 输出只用 ASCII，非 ASCII 变成 \uXXXX
+            ascii_only: true,
+          },
+        },
+      }),
+    ],
+  },
+  
+  // 移除插件
+  plugins: [],
+} satisfies Configuration;
+
+const configInjectScript: Configuration = {
+  ...configCommon,
+
+  optimization: {
+    minimize: true,
+    splitChunks: false,
+    runtimeChunk: false,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false, // 避免额外产生 .LICENSE.txt
+        terserOptions: {
+          format: {
+            // 输出只用 ASCII，非 ASCII 变成 \uXXXX
+            ascii_only: true,
+          },
+        },
+      }),
+    ],
+  },
+  
+  // 移除插件
+  plugins: configCommon.plugins!.filter(
+    (plugin) =>
+      !(
+        plugin instanceof HtmlWebpackPlugin ||
+        plugin instanceof CopyPlugin ||
+        plugin instanceof CleanWebpackPlugin
+      )
+  ),
+
+} satisfies Configuration;
+
+
+
+export { configCommon, configWebWorker, configInjectScript };

webpack.config.ts

@@ -0,0 +1,20 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import path from "path";
+import merge from "webpack-merge";
+import { configInjectScript as common } from "../webpack.config";
+
+const src = path.resolve(__dirname, "../src");
+const dist = path.resolve(__dirname, "../dist");
+
+// 不要分割的文件
+common.entry = {
+  content: path.join(src, "content.ts"),
+};
+
+common.output = {
+  path: path.join(dist, "ext/src"),
+  filename: "[name].js",
+  clean: false,
+};
+
+export default merge(common, {});

webpack/webpack.content.ts

@@ -2,10 +2,8 @@
 import path from "path";
 import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
 import merge from "webpack-merge";
-import CompressionPlugin from "compression-webpack-plugin";
 import CopyPlugin from "copy-webpack-plugin";
-import TerserPlugin from "terser-webpack-plugin";
-import common from "../webpack.config";
+import { configCommon as common } from "../webpack.config";
 
 const src = path.resolve(__dirname, "../src");
 const dist = path.resolve(__dirname, "../dist");
@@ -54,12 +52,6 @@ export default merge(common, {
         },
       ],
     }),
-    // firefox商店文件不能大于4M, 所以需要压缩
-    new CompressionPlugin({
-      test: /ts.worker.js$/,
-      filename: () => "ts.worker.js",
-      deleteOriginalAssets: true,
-    }),
     new NodePolyfillPlugin(),
   ],
   resolve: {

webpack/webpack.dev.ts

@@ -2,11 +2,10 @@
 import path from "path";
 import NodePolyfillPlugin from "node-polyfill-webpack-plugin";
 import merge from "webpack-merge";
-import CompressionPlugin from "compression-webpack-plugin";
 import CopyPlugin from "copy-webpack-plugin";
 import HtmlWebpackPlugin from "html-webpack-plugin";
 import TerserPlugin from "terser-webpack-plugin";
-import common from "../webpack.config";
+import { configCommon as common } from "../webpack.config";
 
 const src = path.resolve(__dirname, "../src");
 const dist = path.resolve(__dirname, "../dist");
@@ -73,11 +72,6 @@ export default merge(common, {
         },
       ],
     }),
-    // firefox商店文件不能大于4M, 所以需要压缩
-    new CompressionPlugin({
-      test: /ts.worker.js/,
-      deleteOriginalAssets: true,
-    }),
     new NodePolyfillPlugin(),
   ],
   resolve: {