如何做一个给整站换语言的浏览器插件：FigmaCN 的 Manifest V3 架构实战教程

如何做一个给整站换语言的浏览器插件FigmaCN 的 Manifest V3 架构实战教程【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCNFigmaCN 是一款基于Manifest V3架构的整站汉化浏览器插件它为设计师提供 Figma 中文界面翻译词条均经人工校验。本文以它为例完整拆解一个给整站换语言的浏览器插件教程从 manifest 配置、内容脚本、动态翻译引擎到翻译词库维护手把手带你复刻自己的第一个网站汉化插件。 FigmaCN 是什么一键把 Figma 界面变中文Figma 官方界面是纯英文的对国内设计师不够友好。FigmaCN 的思路很直接把 Figma 页面上的英文文案按一份人工校验过的翻译词库逐条替换为中文页面是动态渲染的所以插件会持续监听 DOM 变化新出现的英文照样翻译代码编辑器、输入框等不该翻译的区域会被自动跳过。支持 Chrome、Edge、Firefox 等多浏览器安装具体方式见 README.md。安装完成后刷新 Figma 页面即可生效无需任何配置。 插件工程结构总览整个仓库的源码非常精简核心只有 4 个文件这也是新手学习 Manifest V3 浏览器插件教程的理想样本文件角色说明src/manifest.json插件身份证声明运行环境、权限与脚本注入方式src/js/content.js内容脚本主角注入网页执行整站文本翻译src/js/background.js后台 Service Worker处理安装后的首次引导src/js/translations.json翻译词库4000 条英文 → 中文词条另有 scripts/figmaCN.user.js 是同一套翻译引擎的油猴脚本版本后文会讲。 Manifest V3 架构拆解一份 manifest.json 看懂四大角色打开 src/manifest.json整个插件的运行方式就写在里面了。Manifest V3 是 Chrome 扩展的最新标准相比 V2 用Service Worker取代了常驻后台页更安全也更省电。content_scripts把代码注入目标网页{ matches: [*://*.figma.com/*], js: [js/content.js], run_at: document_end, all_frames: true }这是整站换语言的关键matches只在*.figma.com域名下生效做到指哪打哪run_at: document_end等页面 DOM 构建完再注入避免翻译时页面还没渲染all_frames: trueFigma 页面里有 iframe全部框架都要翻译。background.service_worker轻量后台V3 的后台不再是一个页面而是一段事件驱动的 src/js/background.js。FigmaCN 的后台只干一件事——首次安装时打开插件主页chrome.runtime.onInstalled.addListener(function (details) { if (details details.reason install) { chrome.tabs.create({ url: https://figma.cool }); } });reason install的细节值得学习区分首次安装和版本更新避免每次升级都弹窗口打扰用户。web_accessible_resources 与 host_permissions翻译词库的通行证web_accessible_resources: [{ resources: [js/translations.json], matches: [*://*.figma.com/*] }]Manifest V3 里插件资源默认对外不可见想让网页脚本去读translations.json必须在这里显式放行。host_permissions则声明了对 Figma 域名的访问权限——最小权限原则别偷懒申请全域名。⚡ 内容脚本如何读懂网页翻译引擎的核心src/js/content.js 是全文的精华约 400 行翻译流程分三步第一步加载词库构建双索引词库是[英文, 中文]的二维数组src/js/translations.json 中有 4358 行词条例如[ [ Copy link, 复制链接], [ of {} project used, / {1} 个项目被使用] ]加载时做了两件聪明事src/js/content.js含{}的词条转成正则通配模式{}变成捕获组(.)可以翻译半句话同时建立反向索引中文 → 英文用于处理 Figma 自定义标签的嵌套场景。第二步TreeWalker 遍历 通配匹配对整页 DOM 用TreeWalker深度遍历翻译顺序是精确匹配 → 通配模式 → 兜底短词src/js/content.js。模式模板里的{1}编号占位符支持语序调整比如 · {} members译为 · {1} 位成员。长词条优先排序防止Edu抢先命中Education。第三步MutationObserver 实时追踪动态内容Figma 是单页应用界面随操作不断刷新。内容脚本用一个合并观察者盯着全文src/js/content.jsconst MutationObserverConfig { childList: true, subtree: true, attributeFilter: [data-label, placeholder, data-placeholder, aria-label, data-tooltip], characterData: true };节点新增、文字变化、属性更新——任何变化都会触发局部翻译只处理变化的子树而不是重扫全文性能友好。跳过区域知道不翻译什么同样重要这是插件教程里最容易被新手忽略的部分。FigmaCN 明确排除了三类区域src/js/content.js代码编辑器export、class这类关键字绝不能被翻译变量命名区用户自定义的变量名属于业务内容正在编辑的富文本评论、输入框里的文字属于用户自己。翻译完成后还会打上data-figmacn-done标记避免自我循环替换。 翻译数据是怎么维护的FigmaCN 最大的特色是设计师人工翻译校验每条词条都由懂设计术语的人校对所以组件库描边混合模式这类专业词翻译得地道而不是机器直译。给新手的项目你的翻译词库可以先用机器翻译批量生成底稿再按界面高频文案 → 冷门长尾文案的顺序人工过一遍效果会有质的飞跃。 从插件到油猴一份代码两种分发看 scripts/figmaCN.user.js 会发现一个高级玩法油猴脚本本体只有 70 来行它远程拉取仓库里的content.js和translations.json再执行。好处是插件版和脚本版共用同一份翻译引擎只维护一处代码。这也提示我们做网站汉化插件时翻译逻辑与分发形态解耦能省下大量维护成本。✅ 动手实践从零复刻一个整站汉化插件的 5 步清单建骨架新建manifest.json声明manifest_version: 3、content_scripts与host_permissions域名换成你要汉化的网站写后台一个只监听onInstalled的 Service Worker 足矣做词库准备translations.json格式[[English, 中文], ...]高频短文案优先写内容脚本document_end注入 → 遍历翻译初始 DOM →MutationObserver盯增量变化 → 记得加跳过区域判断加载测试打开chrome://extensionsEdge 为edge://extensions开启开发者模式点击「加载已解压的扩展程序」选择工程目录刷新目标网站即可。想拿本项目练手可以克隆仓库通读源码git clone https://gitcode.com/gh_mirrors/fi/figmaCN.git 总结做一个给整站换语言的浏览器插件核心就三件事Manifest V3 定架构、内容脚本做翻译、词库保质量。FigmaCN 用不到 2000 行代码给出了完整答案——manifest.json 声明注入content.js 负责精确 通配 兜底三级匹配和动态追踪translations.json 保证专业度。掌握了这套架构把域名和词库一换你就能拥有自己的网站汉化神器。【免费下载链接】figmaCN中文 Figma 插件设计师人工翻译校验项目地址: https://gitcode.com/gh_mirrors/fi/figmaCN创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考