快速利用 vue 或者 react 开发 chrome 插件

原文连接：github.com/lzwaiwai/bl…

最近写了一个能够利用 vue 或者 react 快速开发 chrome 插件的 boilerplate，只须要使用我以前写的 bigroom-cli 工具，就可快速简单地进行启动、打包、编译等，同时也支持保存代码后，插件自动更新，页面自动刷新。

boilerplate 生成：

首先咱们安装 bigroom-cli：

npm install -g bigroom-cli
复制代码

而后生成 chrome 插件的 boilerplate，这里能够选择使用 react 版本，仍是 vue 版本:

bigroom generate/g chrome-extension
复制代码

• bigroom-react-chrome-extension git：github.com/fe-bigroom/…

• bigroom-vue-chrome-extension git：github.com/fe-bigroom/…

启动：

npm start
复制代码

打包：

npm build
复制代码

开发目录文件：

1. manifest.json 中的 vendor.js 是什么？

"js": ["modules/vendor/vendor.js", "modules/content/content.js"],
   "scripts": ["modules/vendor/vendor.js", "modules/background/background.js"]
复制代码

由于项目内部使用 webpack 打包编译，因此 这里的 vendor.js 就是 webpack 使用了 optimization-splitChunks 后分离出来的共同依赖文件包。

2. manifest.json 中 permissions 的 3000 端口是作什么用的？

"permissions": ["http://*/*", "https://*/*", "http://127.0.0.1:3000/*", "http://localhost:3000/*"]
复制代码

这套开发模式支持修改代码保存后，正在开发的 chrome 插件会进行自动重启，并刷新当前 tab 的页面，那么这个通讯须要服务支撑并须要插件容许接受此服务的信息，那么开发模式下须要容许 http://127.0.0.1:3000/* 或者 http://localhost:3000/*， 不然会出现跨域错误。

3. manifest.json 中的 content_security_policy 设置

"content_security_policy": "default-src 'self'; script-src 'self' http://127.0.0.1:3000 http://localhost:3000 'unsafe-eval'; connect-src http://127.0.0.1:7001 http://localhost:7001; style-src * 'unsafe-inline' 'self' blob:; img-src 'self' data:;"
复制代码

由于使用了 webpack 编译，因此不少脚本的代码的引入会使用外链的形式，那么就须要 chrome 插件放行这些不安全的外链，因此 script-src 须要如上设置；一样，觉得页面中须要请求服务端的接口， connect-src 也须要放行这些不安全的域名；

4. 通讯

目录中的不少文件已经有了一些代码，这里主要提供了 background、content、popup 之间的通讯方法。 建议：popup、background、content(inject)之间的通讯建议以 background 做为中间传递层，防止维护混乱问题。