第一部分 — 基础知识项目框架与文件布局

JamesYoung79712026-02-21 13:32

2.1 目的

稳定的布局使 MV3 更容易调试、审查和扩展。本章提供了一个枯燥但可调试的基本结构。

2.2 使用场景 / 避免场景

使用场景: 开始一个新的扩展，或者清理迁移工作。

避免场景: 探索单一 API。

2.3 最小化文件布局（推荐）

复制代码

my-ext/
  manifest.json
  sw.js
  popup.HTML
  popup.js
  options.HTML
  options.js
  content.js
  assets/

为什么这种布局有效：

sw.js 是你的协调者（路由 + 权限 + 状态）
UI 代码保留在 UI 文件中（DOM + 用户体验）
页面逻辑保留在 content.js 中（DOM + 页面具体信息）

2.4 最小化 manifest.json

javascript 复制代码

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "action": { "default_popup": "popup.HTML" },
  "background": { "service_worker": "sw.js", "type": "module" },
  "permissions": ["storage"],
  "host_permissions": [],
  "content_scripts": [
    {
      "matches": ["HTTPS://example.com/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ]
}

2.5 最小化 sw.js（以路由为主）

这段代码会引起接口的 566 错误，所以只好放截图

最小示例

一个最小的 MV3 安全异步消息处理程序（适合作为模板使用）：

javascript 复制代码

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  (async () => {
    if (msg?.type !== "PING") return;
    sendResponse({ ok: true });
  })().catch((err) => sendResponse({ ok: false, error: String(err) }));
  return true; // keep channel open for async
});

2.7 事项清单

$\] sw.js 文件较小且主要负责路由和协调$
$\] 内容脚本执行页面工作并具有幂等性$

2.8 参考资料

Manifest 文件格式（官方）: Manifest 参考

第一部分 — 基础知识 项目框架与文件布局

第一部分 — 基础知识项目框架与文件布局