web extension starter

网络扩展启动器

Web扩展启动器要构建“在任何浏览器上运行一旦写入”扩展程序

@abhijithvijayan制造的？

捐赠：贝宝（Paypal） ，帕特雷恩（Patreon）

---

❤️吗？ 它在github上或发推文。

？‍♂️ react + tyscript =此分支

？ React + JavaScript = Checkout React-JavaScript分支

？ html + javaScript =结帐主分支

特征

• 交叉浏览器支持（Web-Extensions API）
• 浏览器量身定制的一代
• 自动构建代码更改
• 自动包装浏览器特定的构建文件
• Sass造型
• 默认情况下打字稿
• ES6模块支持
• React UI库默认
• 智能重新加载

浏览器支持

49及以后✔	52及以后✔	36及以后✔	79及以后✔	最新✔	最新✔	最新✔

由超过100,000多个用户的生产扩展名使用。

• daily.dev in daily.dev扩展
• ansh/jiffyreader.com中的Jiffy阅读器
• Abhijithvijayan/kutt-Extension中的kutt-extension
• Lisongx/doubanimdb中的doubanimdb
• MOOC助理在Unbyte/MOOC助理
• Artipub in Crawlab-Team/Artipub

还有更多...

使用此模板

创建一个新目录并运行

 curl -fsSL https://github.com/abhijithvijayan/web-extension-starter/archive/react-typescript.tar.gz | tar -xz --strip-components=1

快速开始

确保您有

• Node.js 10或更高版本

然后运行以下内容：

• npm install以安装依赖项。
• npm run dev:chrome启动用于Chrome扩展的开发服务器
• npm run dev:firefox启动Firefox插件开发服务器
• npm run dev:opera启动用于Opera扩展的开发服务器
• npm run build:chrome构建Chrome Extension
• npm run build:firefox构建Firefox插件
• npm run build:opera构建歌剧扩展的歌剧
• npm run build构建和包装扩展名一次到扩展/目录

发展

• npm install以安装依赖项。

• 观看开发中的文件更改

  • 铬合金
    • npm run dev:chrome
  • Firefox
    • npm run dev:firefox
  • 歌剧
    • npm run dev:opera

• 浏览器中的加载扩展

• 铬合金

  • 转到浏览器地址栏并键入chrome://extensions
  • 检查Developer Mode按钮以启用它。
  • 单击Load Unpacked Extension…按钮。
  • 在extension/中选择您的浏览器文件夹。

• Firefox

  • 通过about:debugging 。
  • 在提取的目录中选择manifest.json文件

• 歌剧

  • 通过opera:extensions
  • 检查Developer Mode并从扩展名提取的目录中解开包装。

生产

• npm run build构建了所有浏览器的扩展程序，分别为extension/BROWSER目录。

注意：默认情况下， manifest.json设置为版本0.0.0 。 WebPack Loader将使用package.json版本的版本中的版本更新版本。为了发布新版本，请在package.json中更新版本和运行脚本。

如果您不想使用package.json版本，则可以在此处禁用该选项。

生成浏览器特定清单。

带有浏览器供应商前缀的清单密钥的更新source/manifest.json文件

 {
  "__chrome__name" : "SuperChrome" ,
  "__firefox__name" : "SuperFox" ,
  "__edge__name" : "SuperEdge" ,
  "__opera__name" : "SuperOpera"
}

如果供应商是chrome则将其编译为：

 {
  "name" : "SuperChrome" ,
}

---

通过将键与|分开来添加键在前缀

 {
  __chrome|opera__name: "SuperBlink"
}

如果供应商是chrome或opera ，则将其编译为：

 {
  "name": "SuperBlink"
}

有关更多详细wext-manifest-loader

错误

请在此处提出问题，以获取错误，缺少文档或意外行为。

linting＆打字稿配置

• 共享Eslint＆Priptier配置 - @abhijithvijayan/eslint-config
• 共享打字稿配置 - @abhijithvijayan/tsconfig

执照

麻省理工学院©Abhijith Vijayan