基本零配置的 Webextension 脚手架,用 React TypeScript Sass 开发浏览器扩展

2018-01-09

Create React Typescript Sass Webextension

https://github.com/crimx/crea...

基本零配置的 Webextension 开发脚手架,主要针对 Chrome 和 Firefox 浏览器。

  • 支持 React, TypeScript 和 Sass
  • Jest 测试 (内含 jest-webextension-mock)
  • 提供虚拟浏览器扩展环境,方便开发 UI
  • 自动生成 Webpack 入口
  • Chrome 和 Firefox 分别输出,可以用不同的 Manifest

安装

git clone git@github.com:crimx/create-react-typescript-sass-webextension.git
cd create-react-typescript-sass-webextension
git remote set-url [你的仓库 git 地址]
yarn install

命令

  • yarn start加载虚拟浏览器扩展环境。

    • 我主要模拟了 runtime message 和 storage 两大块,跟真实行为基本一致。如果需要更多,在 config/fake-env/webextension-page.js中添加。
    • 默认加载 popup页面。 如果要换其它入口,比如 options页面,可以运行 yarn start --main=options
    • background脚本会默认加载 (如果存在的话)。
    • 修改 config/fake-env/fake-ajax拦截 ajax 请求。
  • yarn test模块测试。

    • yarn test --coverage查看 coverage 结果。
    • 内含 jest-webextension-mock,注意它不是完整的 mock 。
  • yarn build完整构建项目。

    • 分别输出 Chrome 和 Firefox 结果到 build目录中。
  • yarn devbuild不压缩代码快速构建项目。

  • 在命令后添加 --debug可以开启 process.env.DEBUG_MODE

使用

大多数情况下你只需要处理 src下的文件:

  • 这个模板自带一个典型扩展的三个主要部分: backgroud, contentpopup。不需要的话直接删除就行,Webpack 入口会自动生成。

  • 如果需要输出更多的页面或脚本,只需在 src中新建目录,目录名会被用作入口名。目录中应包含一个 index.(js|jsx|ts|tsx)文件。如果需要输出页面的话再添加个 index.html作为模板。可以参考 popup页面。

  • background, components, assetsmanifest是预留名称。

    • background用于生成背景脚本,用其它的名字作入口的话虚拟扩展环境不会加载。
    • components放共用的组件。
    • assets放静态文件。
    • manifest用于生成 manifest.json
  • 如果需要在 src目录下添加目录,却又不希望其生成入口,用 _开头的目录名。

  • src/manifest/common.manifest.json中的 version会在每次 build后自动给 patch位置加一。

高级配置

这个模板使用 TypeScript 版本的 StandardJavaScript 代码风格,可以在 tslint.json中修改。

更多配置参考 create-reate-app,虽然不全支持。

原文链接:segmentfault.com

上一篇:React 常见错语
下一篇:Bright UI v0.1.0:一套简约优雅的React组件库
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部