首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

使用 create-react-app 快速创建跨浏览器插件

  •  
  •   yychieh · 138 天前 · 952 次点击
    这是一个创建于 138 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Create React Browser Extension PRs Welcome

    使用 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

    • repo: gxvv/create-react-browser-extension
    • 希望有经验丰富的插件开发者能指出本项目中存在的问题和不符合插件商店规则的地方。
    • 本项目处于起步阶段,合规性仍需验证,请谨慎用于需要发布商店的插件。
    • 如果你有想法和意见,欢迎提交 PR。
    5 回复  |  直到 2019-07-30 11:45:45 +08:00
        1
    jeremaihloo   138 天前
    这个世界需要统一,世界上只需要有个 chrome 浏览器就好:)\滑稽\微笑
        2
    gxvv   138 天前
    @jeremaihloo 只需要所有浏览器按同一个标准实现就好😁
        3
    jeremaihloo   138 天前
    @gxvv #2 那这个跨浏览器插件就没有必要了呀,就一个标准了呀,我还是觉得世界上就一个浏览器就好,一样的界面,一样的使用习惯,使用惯了,从此一辈子吃喝不愁,不用折腾,没有兼容性问题,而且对于普通用户非技术人员而言,使用浏览器也是需要学习成本的,一般人可能不太相信使用浏览器需要什么学习成本,举个例子,我的爸爸和爷爷
        4
    mayne95   137 天前
    最好刚好在写扩展。脚手架不错,省去了很多功夫。希望添加对 content_scripts 的支持 😊
        5
    gxvv   133 天前
    @mayne95 暂时需要通过修改 webpack 配置。入侵式修改可以通过 npm run eject,非入侵式修改可以试试 react-app-rewired。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2316 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 104ms · UTC 15:27 · PVG 23:27 · LAX 07:27 · JFK 10:27
    ♥ Do have faith in what you're doing.