react实现异步插件_使用 create-react-app 快速创建跨浏览器插件

Create React Browser Extension

使用 create-react-app 快速创建浏览器插件。在 options page 和 popup page 中使用 react。

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

希望有经验丰富的插件开发者能指出本项目中存在的问题和不符合插件商店规则的地方。

本项目处于起步阶段，合规性仍需验证，请谨慎用于需要发布商店的插件。

如果你有想法和意见，欢迎提交 PR。