[MV2] 修复 Firefox 中未能使用格式化、TSWorker等问题 #1005

cyfung1031 · 2025-11-21T09:14:03Z

概述 Descriptions

close #290

先合并 [MV2] Webpack 打包选项优化，去除不再需要的fixCoding #1003

主要问题如下
1） webpack 把 content.js 和 monaco 两个 web worker 混在一起。不合适。环境完全不一样，例如globalThis 不一样
2）no-split -> content & monaco
3）ts.worker.js 被 "CompressionPlugin" 的 deleteOriginalAssets 完全破坏，失去原有功能，无法格式化之类
4）原本使用的 MonacoEnvironment.getWorkerUrl 必须在开始前设置。后设置无效。必须改用能接受Promise的 MonacoEnvironment.getWorker
5）考虑 Firefox 上架 4 MB / 4 MiB 限制，采用独特方法在 pack.js 分割成 3 MiB 以下（ts.worker.js.part0, ts.worker.js.part1, ...)。在工作阶段动态还原真实内容（还原为单一 Blob 档）

变更内容 Changes

截图 Screenshots

https://github.com/cyfung1031/scriptcat/actions/runs/19565370541

cyfung1031 · 2025-11-21T11:00:59Z

@CodFrm
原来 2025-06-12 已经升至 5MB

mozilla/addons-linter#4942 (comment)

不过这个PR还是以 3 MiB 为分割线吧
你实际发布时可以调整至 4 MiB

我不清楚实际是 5 MiB 还是 5 MB. 选 3 MiB 或者 4 MiB 就好了

.js.part0 .js.part1 的内容是文本
如果副档名问题而无法上架
可以改用 .js.part0.txt .js.part1.txt 试试看

我用

pnpm dlx addons-linter my-addon.zip

跑過。 .js.part0 .js.part1 沒有問題

Copilot

Pull request overview

这个 PR 修复了 Firefox MV2 版本中 Monaco Editor 的格式化和 TypeScript Worker 功能问题。主要通过分离 webpack 构建配置、改进 Worker 加载机制,以及实现文件分割来解决 Firefox 的 4MB 限制。

关键变更

分离了 content.js 和 Monaco Worker 的 webpack 构建配置,避免环境混淆
移除了 CompressionPlugin,改用动态文件分割方案
实现了 ts.worker.js 的智能加载:Firefox 使用分块文件,Chrome 使用完整文件
更新了 MonacoEnvironment 配置,使用 Promise-based 的 getWorker API

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 12 comments.

Show a summary per file

File	Description
webpack/webpack.monaco.ts	新增独立的 Monaco Worker 构建配置,分离 editor.worker 和 ts.worker 的编译
webpack/webpack.content.ts	移除 Monaco Worker 条目和 CompressionPlugin,专注于 content.js 构建
src/pkg/utils/monaco-editor.ts	实现分块文件的动态加载和组合,支持 Promise-based Worker 初始化
src/pages/components/CodeEditor/index.tsx	移除不再需要的 tsUrl 检查和延迟逻辑
package.json	更新构建脚本,添加 build:monaco 步骤,移除 pako 依赖
package-lock.json	同步移除 pako 依赖
build/pack.js	实现文件分块功能,为 Firefox 生成小于 3 MiB 的分割文件,添加 CSP 配置支持 blob: 协议

Comments suppressed due to low confidence (1)

webpack/webpack.content.ts:53

merge 中定义了空的 plugins 数组,但实际上没有添加任何插件。建议移除第52-53行,直接导出 common,或者在注释中说明为什么保留这个空数组。

Copilot · 2025-11-22T08:59:27Z

build/pack.js

+firefoxManifest.content_security_policy = "script-src 'self' blob:; object-src 'self' blob:";
 firefoxManifest.browser_specific_settings = {


添加了 Firefox 的 content_security_policy,允许 blob: 协议。建议在注释中说明这是为了支持动态组合的 ts.worker.js Blob URL,以便未来维护者理解为什么需要这个 CSP 设置。

Suggested change

firefoxManifest.content_security_policy = "script-src 'self' blob:; object-src 'self' blob:";

firefoxManifest.browser_specific_settings = {

resolved in dfbeace

src/pkg/utils/monaco-editor.ts

Copilot · 2025-11-22T08:59:28Z

src/pkg/utils/monaco-editor.ts

+
+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) => {


tsWorkerPromise 的 catch 块中静默吞并了错误,没有记录或处理。如果初始的 part0 加载失败,调试会变得困难。建议添加错误日志:.catch((e) => { console.error("Failed to load ts.worker.js.part0:", e); return null; })

Suggested change

}).catch(() => { return null }).then(async (blob) => {

}).catch((e) => { console.error("Failed to load ts.worker.js.part0:", e); return null; }).then(async (blob) => {

故意。不需要。Copilot还未能理解整体代码思想

build/pack.js

Copilot · 2025-11-22T08:59:29Z

src/pkg/utils/monaco-editor.ts

+  chrome.runtime.getURL(`/src/ts.worker.js.part${idx}`)
+).then((resp) => {
+  return resp.ok ? resp.blob() : null;
+}).catch(() => { return null });


函数 getPartialBlob 在 catch 块中返回 null,但没有处理或记录错误。建议添加错误日志,以便在生产环境中调试文件加载失败的问题。例如:.catch((e) => { console.error(\Failed to load ts.worker.js.part${idx}:`, e); return null; })`

Suggested change

}).catch(() => { return null });

}).catch((e) => { console.error(`Failed to load ts.worker.js.part${idx}:`, e); return null; });

故意。不需要。Copilot还未能理解整体代码思想

Copilot · 2025-11-22T08:59:29Z

build/pack.js

+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);
+  }
+}


addFileInChunks 函数没有返回值或错误处理。如果文件不存在或读取失败,fs.readFileSync 会抛出异常导致构建失败,但没有提供有用的错误信息。建议添加 try-catch 块并提供更详细的错误信息,例如指明是哪个文件分割失败。

不需要。不預期错误。有的话直接throw

Copilot · 2025-11-22T08:59:29Z

build/pack.js

-  "src/ts.worker.js.gz",
-  fs.readFileSync("./dist/ext/src/ts.worker.js")
+
+// Now split ts.worker.js into chunks (<4MB each) for Firefox


注释中说 "< 4MB each",但实际上 MAX_CHUNK_SIZE 是 3 MiB。建议将注释改为 "< 4 MiB each" 或更准确的 "3 MiB each" 以反映实际的分块大小,避免混淆。

Suggested change

// Now split ts.worker.js into chunks (<4MB each) for Firefox

// Now split ts.worker.js into chunks (<3 MiB each) for Firefox

4MB 是 Firefox Add-ons 限制

src/pkg/utils/monaco-editor.ts

cyfung1031 added the FirefoxMV2 label Nov 21, 2025

CodFrm requested a review from Copilot November 22, 2025 08:54

Copilot started reviewing on behalf of CodFrm November 22, 2025 08:54 View session

Copilot finished reviewing on behalf of CodFrm November 22, 2025 08:57

Copilot AI reviewed Nov 22, 2025

View reviewed changes

[MV2] 修复 Firefox 中未能使用格式化、TSWorker等问题

9daf6dd

cyfung1031 force-pushed the pr-fix-monaco-editor-sw branch from ec24e3e to 9daf6dd Compare November 22, 2025 10:01

CodFrm merged commit 9ec116f into scriptscat:release/mv2 Nov 22, 2025
2 checks passed

		firefoxManifest.content_security_policy = "script-src 'self' blob:; object-src 'self' blob:";
		firefoxManifest.browser_specific_settings = {

	}).catch(() => { return null }).then(async (blob) => {
	}).catch((e) => { console.error("Failed to load ts.worker.js.part0:", e); return null; }).then(async (blob) => {

	}).catch(() => { return null });
	}).catch((e) => { console.error(`Failed to load ts.worker.js.part${idx}:`, e); return null; });

	// Now split ts.worker.js into chunks (<4MB each) for Firefox
	// Now split ts.worker.js into chunks (<3 MiB each) for Firefox

[MV2] 修复 Firefox 中未能使用格式化、TSWorker等问题 #1005

[MV2] 修复 Firefox 中未能使用格式化、TSWorker等问题 #1005

Uh oh!

Conversation

cyfung1031 commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概述 Descriptions

变更内容 Changes

截图 Screenshots

Uh oh!

cyfung1031 commented Nov 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

关键变更

Reviewed changes

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Nov 22, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cyfung1031 commented Nov 21, 2025 •

edited

Loading

cyfung1031 commented Nov 21, 2025 •

edited

Loading