extension-boilerplate

英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

现在 Firefox 支持 WebExtensions 了，为多个浏览器构建浏览器扩展/插件变得容易多了，无需重复编写代码库。这个项目作为一个合理的起点，帮助你入门。

我从为我的副项目 Email This 构建的浏览器扩展中提取了这个。

附注：请务必查看 Email This。它是类似 Pocket、Readability 和 Instapaper 这类书签工具的更简单替代方案。Email This 会移除文章中的广告和干扰，并以干净的文本/图片形式发送给你一封电子邮件。无需安装任何额外的应用程序或登陆其他应用来访问你的书签。Chrome 扩展可在 Chrome 网上应用店 获取。

特性

一次编写并部署到 Chrome、Opera 和 Firefox

基于 WebExtensions。它还包括一个小型 polyfill，以统一不同浏览器暴露的 API。

实时重载

对 CSS、HTML 和 JS 文件的更改将会即时传递，无需手动重新加载扩展。这最终节省了大量时间并提升了开发者体验。

合理的起点

这配有一个基于 Gulp 的工作流，可以将现代 ES6 JavaScript 和 SCSS 转换为 JS/CSS。 脚本使用 Babel 转译，并使用 Browserify 打包。 JS 和 SCSS 都提供了源映射。

图标和促销图片的 Sketch (.sketch) 资源

在资源目录中包含了一个 .sketch 文件。这个文件包含了在将扩展上传到应用商店时所需的所有图标和促销图片。

易于配置和扩展

gulpfile易于理解和配置。如果您想添加额外的任务或删除未使用的任务，可以轻松调整该文件以满足您的需求。

特定平台和特定环境的变量。

您可能需要根据您的环境指定不同的数据变量。例如，在开发过程中，您可能希望使用本地主机 API 端点，而在扩展提交到应用商店后，则使用生产 API 端点。您可以在 `config` 目录下的 json 文件中指定这些数据。 You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).

安装

1. 克隆仓库 git clone https://github.com/EmailThis/extension-boilerplate.git
2. 运行 npm install
3. 运行 npm run build

或者，如果你想试用示例扩展，这里是下载链接。下载后，解压文件并按照下面提到的步骤在浏览器中加载。

• 下载 Chrome 扩展
• 下载 Opera 扩展
• 下载 Firefox 扩展

在 Chrome 和 Opera 中加载扩展

1. 打开 Chrome/Opera 浏览器并导航到 chrome://extensions
2. 选择“开发者模式”，然后点击“加载已解压的扩展程序...”
3. 在文件浏览器中，选择 extension-boilerplate/build/chrome 或 (extension-boilerplate/build/opera)

在 Firefox 中加载扩展

1. 打开 Firefox 浏览器并导航到 about:debugging
2. 点击“加载临时附加组件”，然后在文件浏览器中选择 extension-boilerplate/build/firefox

开发

在您想开始开发扩展并希望启用实时重新加载时，可以使用以下任务 -

• npm run chrome-watch
• npm run opera-watch
• npm run firefox-watch

打包

运行 npm run dist 来为每个浏览器创建一个已压缩的、可用于生产的扩展。然后你可以将其上传到应用商店。

待办

• 添加对 Safari 的支持
• 添加 Firefox 和 Opera 的推广图片
• 添加示例截图模板
• 编写使用配置变量和 JS 预处理器的指南

本项目采用 MIT 许可证授权。

如果您有任何问题或意见，请创建一个新的问题。我很乐意听取您的想法。

Bharani，发送邮件