Copy as Markdown开发指南：从源码到浏览器扩展的完整流程

Copy as Markdown开发指南从源码到浏览器扩展的完整流程【免费下载链接】copy-as-markdownA browser extension to copy tabs and links as Markdown项目地址: https://gitcode.com/gh_mirrors/co/copy-as-markdownCopy as Markdown是一款强大的浏览器扩展能够帮助用户将标签页和链接以Markdown格式快速复制。本指南将带你了解从源码到浏览器扩展的完整开发流程适合新手和普通用户学习如何构建和定制这款实用工具。准备工作开发环境搭建在开始开发之前需要确保你的环境满足以下要求Node.js 20通过npm install安装项目依赖全局安装web-ext工具npm install -g web-ext用于Firefox打包和调试Docker运行完整的端到端测试套件时需要获取项目源码的方法非常简单只需执行以下命令git clone https://gitcode.com/gh_mirrors/co/copy-as-markdown项目结构解析了解代码组织Copy as Markdown的项目结构设计清晰便于维护和扩展。核心目录结构如下src/ # 共享源代码 background.ts # MV3服务工作线程/Firefox事件页面入口 handlers/ # 消息/命令/上下文菜单处理器 services/ # 浏览器无关逻辑通过createBrowser*助手的浏览器适配器 ui/ # 弹出窗口/选项脚本 static/ # HTML页面和静态资源原样复制 chrome/ # Chrome/Chromium目标 — manifest.json dist/已构建 firefox-mv3/ # Firefox MV3目标 — manifest.json dist/已构建 test/ e2e/ # Playwright端到端测试 ui/, lib/ # vitest浏览器测试真实Chromium **/*.test.ts # vitest单元测试node这种结构将平台特定代码与共享代码分离通过构建脚本将共享代码复制/捆绑到每个目标的dist/目录中有效解决了浏览器兼容性问题。核心功能开发从服务到处理器架构概览项目采用了清晰的分层架构主要包括以下几个部分服务Services包含纯逻辑链接/标签导出、选择转换以及通过createBrowser*助手创建的轻量级浏览器适配器。浏览器依赖项被注入以方便测试。处理器Handlers编排用户入口点上下文菜单、键盘命令、运行时消息并委托给服务。UIsrc/ui下的脚本驱动弹出窗口/选项页面静态资源位于src/static。关键源代码文件以下是一些核心功能的源代码文件你可以通过阅读这些文件来深入了解项目实现链接导出功能services/link-export-service.ts标签导出功能services/tab-export-service.ts选择转换功能services/selection-converter-service.ts上下文菜单处理handlers/context-menu-handler.ts键盘命令处理handlers/keyboard-command-handler.ts构建扩展从源码到可安装文件基本构建命令使用以下命令可以构建扩展npm run build # 构建chrome/和firefox-mv3/ npm run build-chrome # 仅构建Chrome断言Turndown不存在于SW捆绑包中 npm run build-firefox-mv3 # 仅构建Firefox npm run package # 构建压缩/web-ext构建商店制品到build/构建过程由esbuild驱动详细的构建机制可以参考docs/build.md。开发调试在开发过程中你可以使用以下命令进行自动重载调试npm run debug-chrome # Chrome自动重载调试 npm run debug-firefox-mv3 # Firefox自动重载调试如果需要手动加载扩展无自动重载Chrome扩展程序 → 加载已解压的扩展程序 → 选择chrome/目录。Firefox工具 → 附加组件 → 齿轮图标 → 调试附加组件 → 临时加载附加组件。测试策略确保扩展质量单元测试和浏览器测试项目使用vitest进行测试分为两个项目unitnode环境test/**/*.test.tsbrowser通过Playwright使用真实Chromiumtest/ui/**和test/lib/**这些测试不会触及系统剪贴板因此可以在任何地方运行无需Docker。npm test # 运行所有vitest项目一次 npm run test:watch # 监视模式 npm run test:ui # vitest UI npm run test:unit # 仅单元项目 npm run test:browser # 仅浏览器项目端到端测试扩展UI和剪贴板流程使用Playwright进行端到端测试。测试在有头模式下运行Chromium使用持久配置文件Chrome扩展所需。完整的端到端测试套件必须在Docker中运行npm run test:e2e:docker这将运行docker/playwright-ci/docker-e2e.sh脚本构建Docker镜像并在容器中运行测试套件。对于Firefox项目还提供了基于Python/pytest的端到端测试通过Selenium驱动npm run test:e2e:selenium打包与发布分享你的扩展Firefox扩展打包要测试Firefox的重启行为例如上下文菜单是否重新安装你需要构建并侧载XPI文件。Firefox检查XPI签名在发布版Firefox中无法禁用此功能因此建议使用开发者版、Nightly或未品牌化的Beta版。执行npm run package-firefox-mv3XPI文件将保存在./build/firefox-mv3中。在Firefox开发者版中打开about:config将xpinstall.signatures.required设置为false然后重启。打开about:addons将XPI拖放到页面上进行安装。重启浏览器以验证重启行为。扩展签名要在发布版Firefox上侧载扩展需要通过AMO签名从Firefox附加组件获取API密钥。bumpmanifest.json中的版本AMO要求X.Y.Z全部为数字无前缀零。运行web-ext sign --channelunlisted --api-key... --api-secret...这将创建一个用你的AMO账户签名的XPI并将其上传为未列出的扩展。结语开始你的扩展开发之旅通过本指南你已经了解了Copy as Markdown从源码到浏览器扩展的完整开发流程。这个项目不仅提供了实用的功能还展示了现代浏览器扩展开发的最佳实践。无论你是想定制这个扩展还是开发自己的浏览器工具这些知识都将帮助你顺利开始。如果你想进一步探索可以查看项目中的fixtures/qa.html文件它收集了各种边缘情况有助于你更全面地测试扩展功能。祝你在浏览器扩展开发的道路上取得成功【免费下载链接】copy-as-markdownA browser extension to copy tabs and links as Markdown项目地址: https://gitcode.com/gh_mirrors/co/copy-as-markdown创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考