使用 create-react-app 快速建立跨平臺的瀏覽器插件

Create React Browser Extension

使用 create-react-app 快速建立瀏覽器插件。在 options page 和 popup page 中使用 react。使用插件開發中使用 typescript 以及現代的前端開發腳手架。

Feature

• 包含 create-react-app 的大部分特性
  • React, JSX, ES6, TypeScript
  • Babel
  • Autoprefixed CSS.
  • ...
• 整合 webextension-toolbox/webpack-webextension-plugin.
  • Manifest generator.(validation, defaults, vendor keys)
  • Livereload server.
• 整合 Webextension-polyfill
  • 使用 browser API，兼容 chrome/firefox 瀏覽器下的 API。
  • 異步接口使用 Promise 封裝，方便使用 async/await。
• 多瀏覽器支持
  • chrome (auto polyfilled)
  • opera (auto polyfilled 未測試)
  • firefox
  • edge (未測試)

開始使用

create-react-app my-extension --scripts-version browser-extension-react-scripts
// or create extension using typescript
create-react-app my-extension --typescript --scripts-version browser-extension-react-scripts

cd my-extension
npm start chrome
// or start develop Firefox plugin
npm start firefox
複製代碼

而後在瀏覽器插件頁中加載在 dev 文件夾中未打包的插件。
當你想要發佈時，使用 npm run build 建立一個打包後的插件。

發佈政策

經過 Webpack 打包後生成了編譯過的文件。這裏是一些相關的插件商店的發佈規則。

Chrome——Code Readability Requirements Link

Code Readability Requirements: Developers must not obfuscate code or conceal functionality of their extension. This also applies to any external code or resource fetched by the extension package. Minification is allowed, including the following forms:

Removal of whitespace, newlines, code comments, and block delimiters
Shortening of variable and function names
Collapsing files together

Mozilla——Source Code Submission Link

Add-ons may contain transpiled, minified or otherwise machine-generated code, but Mozilla needs to review a copy of the human-readable source code. The author must provide this information to Mozilla during submission along with instructions on how to reproduce the build.

The provided source code will be reviewed by an administrator and will not be redistributed in any way. The code will only be used for the purpose of reviewing the add-on. Failure to provide this information will result in rejection.

Add-ons are not allowed to contain obfuscated code, nor code that hides the purpose of the functionality involved. If external resources are used in combination with add-on code, the functionality of the code must not be obscured. To the contrary, minification of code with the intent to reduce file size is permitted.

License

Create React Browser Extension is open source software licensed as MIT.

Others

• repo: gxvv/create-react-browser-extension
• 但願有經驗豐富的插件開發者能指出本項目中存在的問題和不符合插件商店規則的地方。
• 本項目處於起步階段，合規性仍需驗證，請謹慎用於須要發佈商店的插件。
• 若是你有想法和意見，歡迎提交 PR。