Original link: github.com/lzwaiwai/bl…

Recently I wrote a Boilerplate that can use Vue or React to quickly develop chrome plug-ins. Just use bigroom-CLI tool I wrote before, it can start, package, compile and so on quickly and easily. At the same time, it also supports automatic update of plug-in after saving code. The page is automatically refreshed.

Boilerplate generation:

First we install bigroom-cli:

npm install -g bigroom-cli
Copy the code

Create a Boilerplate for chrome. Choose between the React version and the Vue version:

bigroom generate/g chrome-extension
Copy the code

  • Bigroom – react – chrome – the extension git:github.com/fe-bigroom/…

  • Bigroom – vue – chrome – the extension git:github.com/fe-bigroom/…

Activation:

 npm start
Copy the code

Packaging:

npm build
Copy the code

Develop directory files:

  1. What is vendor.js in manifest.json?
   "js": ["modules/vendor/vendor.js"."modules/content/content.js"]."scripts": ["modules/vendor/vendor.js"."modules/background/background.js"]
Copy the code

Since the project is packaged and compiled internally using WebPack, vendor.js is a co-dependency package separated by WebPack using Optimization-splitchunks.

  1. What is the permissions port 3000 in manifest.json used for?
  "permissions": ["http://*/*"."https://*/*"."Http://127.0.0.1:3000/ *"."http://localhost:3000/*"]
Copy the code

This development mode supports that after the modified code is saved, the chrome plug-in under development will automatically restart and refresh the page of the current TAB, so this communication needs to be supported by the service and the plug-in needs to allow to receive the information of this service. Allow http://127.0.0.1:3000/* or http://localhost:3000/* in development mode, otherwise cross-domain errors will occur.

  1. Content_security_policy setting in manifest.json
  "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:;"
Copy the code

Because webPack compilation is used, a lot of script code will be introduced in the form of external chain, so you need chrome plugin to allow these unsafe external chain, so script-src needs to be set as above; Connect-src also permits insecure domain names in order for the page to request the server interface.

  1. communication

Many files in the directory already have some code, which mainly provides the method of communication between background, content, and popup. Suggestion: It is recommended to use background as the intermediate transfer layer for communication among POPUP, background, and Content (Inject) to avoid maintenance chaos.