使用 es6/7 开发 chrome extension 的最佳实践？

[timqian]

使用的工具:

• webpack to auto rebuild code.
• babel 6 to compile es6/7 code to es5.
• Extensions Reloader for easier reload extension

例子: https://github.com/ProjecToday/es6-chrome-extension-starter

npm scripts inside:

"scripts": {
"start": "webpack -d --watch", // continuous incremental build in development with include source maps
"build": "webpack -p" // building once for production
}


唯一的缺憾在于不能 auto reload 。不知道有没有人有办法？

[sox]

没办法吧，插件需要重新加载

[leojoy710]

好像有可以 reload extension 的 extension...

[milklee]

我开发[划词翻译]( https://github.com/lmk123/crx-selection-translate)的时候也在找 auto reload 的方法，但是没找到。

[milklee]

评论不支持 MD 的。。 地址是 https://github.com/lmk123/crx-selection-translate

[djyde]

@sox 可以尝试 reload 插件列表的 tab

[timqian]

@leojoy710 [Extensions Reloader]( https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid)就是用来 reload extension 的 extension ，但每次都要点一下，还是有一点麻烦

[timqian]

@leojoy710 [Extensions Reloader]( https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) 就是用来 reload extension 的 extension ，但每次都要点一下，还是有一点麻烦

[jsonline]

没有 wather 连代码都写不了，前端已经到了这种程度了吗

[milklee]

@jsonline 只是为了写代码写的更舒服而已

[timqian]

@jsonline wather 是指 webpack 吗？不是写不了，是为了写的爽

[leojoy710]

@timqian 看下他怎么做的拿来就好了...

[timqian]

@leojoy710 啥？

[jsonline]

我在么觉得没有 loader 没有 watcher 更爽

[leojoy710]

@timqian 看一下 Extensions Reloader 是怎么做的, 拿来弄成自动的...

[milklee]

其实办法是有的。

做一个功能跟 Extensions Reloader 一样的扩展 A ，但是它需要支持 外部消息通信（ https://developer.chrome.com/extensions/messaging#external-webpage ），在每次 Webpack 构建完成时通知一下扩展 A 把 tab 和正在开发的扩展 B 都刷新一遍。

至于怎么让 Webpack 通知到扩展 A ，我的想法是本地有一个 web page 专门用来发送消息到扩展 A ，每次刷新一遍这个 web page ，扩展 A 就会把所有的 tab 和扩展 B reload 一遍。

那么总结来说，只需要在 Webpack 每次构建完成的时候用 Node.js 打开这个 web page ，就会让所有 tab 和扩展 B 刷新一遍了。

[timqian]

@leojoy710
@milklee good idea ，有空可以搞一搞