30 秒运行任意 GitHub 上的扩展
下面的小节涵盖了两条路径。你将了解 Extension.js 把什么视为项目根目录，以及它如何解析像裸示例名这样的模糊输入。dev 如何解析项目
extension dev 接受一个可选的首个参数。解析规则如下：
- 无参数： 将当前工作目录作为扩展项目。
- 本地路径： Extension.js 将其视为相对于当前工作目录的路径（例如克隆仓库后的
./my-extension或../samples/page-redder）。 https://github.com/...URL： Extension.js 会把仓库（或其某个 tree 路径）拉取到你的工作目录，再从抽取出的目录中构建。详见 项目检测与输入。- 其他
http(s)URL： Extension.js 把该 URL 视为一个 ZIP 压缩包，下载并在本地解压。
sample.page-redder 这样的裸名字 不会 触发远程拉取；它只是当前目录下的一个文件夹名。请使用完整的 GitHub URL，或者先克隆然后把 dev 指向该路径。
快速运行 Chrome 扩展示例
利用 Chrome Extension Samples 仓库中的示例来验证你的环境并快速熟悉工作流。方式 A：完整的 GitHub tree URL（推荐）
- 打开终端。
cd进入用于存放克隆/解压项目的目录（通常是一个空目录）。- 运行：
--browser=firefox 或 --browser=edge。
dev 如何解析项目
extension dev 接受一个可选的首个参数。解析规则如下：
- 无参数： 将当前工作目录作为扩展项目。
- 本地路径： Extension.js 将其视为相对于当前工作目录的路径（例如克隆仓库后的
./my-extension或../samples/page-redder）。 https://github.com/...URL： Extension.js 会把仓库（或其某个 tree 路径）拉取到你的工作目录，再从抽取出的目录中构建。详见 项目检测与输入。- 其他
http(s)URL： Extension.js 把该 URL 视为一个 ZIP 压缩包，下载并在本地解压。
sample.page-redder 这样的裸名字 不会 触发远程拉取，它只是当前目录下的一个文件夹名。请使用完整的 GitHub URL，或者先克隆然后把 dev 指向该路径。
先克隆，再用 dev 指向本地路径
当你希望拥有稳定的目录布局（而不是一次性尝试），可以先克隆仓库，再把 dev 指向本地路径：
在 Microsoft Edge 中运行示例
Extension.js 支持 Microsoft Edge，无需额外配置。Edge 配合完整 URL
先克隆，再使用 Edge
在 Edge 中借助 polyfill 运行 Mozilla 扩展
你可以在 Edge 中运行 MDN WebExtensions 示例。传入 GitHub tree URL 并启用 polyfill（一种兼容层）。该 polyfill 把 Firefox 风格的browser.* 调用映射为 Chrome 风格的 chrome.* 调用，从而让你面向 Firefox 编写的扩展也能在基于 Chromium 的浏览器上工作。
先克隆，再使用 polyfill + Edge
从零创建一个最小扩展
使用extension create 配合 init 模板，得到最轻量的起点：一份 manifest 和图标，没有任何框架或 UI 表面。
init
快速提示
- 使用 TypeScript： 在项目根目录添加
tsconfig.json文件。 - 使用 React： 在
package.json中添加react与react-dom。 - 为 React 配置好的
tsconfig.json即可启用 TypeScript + React 编写体验。 - 如果你需要处理 manifest 中未声明的资源，可以了解更多 特殊文件夹 相关内容。
最佳实践
- 使用
extension包，用同一条工具链构建、运行并打包你的扩展。 - 使用
--browser，在开发时指定目标浏览器。 - 使用
--polyfill，当你把面向 Mozilla 的示例适配到基于 Chromium 的浏览器时。 - 一次性尝试时优先使用完整的 GitHub URL；需要稳定的目录布局时则使用克隆 + 本地路径。