TLTR

Chrome plugin template based on Parcel2, easy to get started quickly

  • Support for hot loading, typescript, esLint
  • Consider adding popup pages later and developing with Svelte

Preparatory scheme

Recently, there is a demand for automation of third-party websites, which needs to capture data, local cache data, and expand the interface, so I have thought of several schemes

Grease monkey

Advantages:

  • Development is simple and can be used@require, import external files; That is, it is still under development in VSOCde, importing compiled files
  • gm_xmlhttprequestIt can also transfer data across domains

Disadvantages:

  • Not ideal for doing permanent things (similar to chrome’s background Persistent feature)
  • If I do not understand the oil monkey deep, trouble greatly passing by to teach

electron

Advantages:

  • Perfect combination of Node features
  • Resident processes (note that browser processes may not be resident, so this is actually better than chrome plugins)
  • A comparison initialization project is recommended: github.com/ci010/elect…

Disadvantages:

  • It’s certainly not as easy to promote as the Chrome plugin

Chrome plug-ins

Advantages: in the norm

Disadvantages: hot loading technology is not mature, the following is the problem I encountered, I hope to have a great understanding of the handy guide

webpack

HMR may have HTTPS issues when developing content

But seriously, webpack has been too complicated and unfriendly since I was born

rollup

Exten-chrome was tested, and the compilation encountered some problems, so it was temporarily abandoned

ReferenceError: exports is not defined

Commonjs is not compiled to node_modules? But include is already set

ReferenceError: async is not defined

Babel was introduced but it didn’t work either

The last option is parcel

Parcel has always been a simple and efficient build tool, and here are the features listed on the website

  • Extreme performance, takes full advantage of multi-core compilation, and file system caching to quickly rebuild even after a reboot
  • No need to install additional plug-ins, out of the box to support JS, CSS, HTML, files, etc
  • Automatically compile Babel, PostCSS, and PostHTML and even node_modules
  • 0 configuration can only use dynamic import
  • Thermal loading
  • Friendly error – highlight code blocks to help you locate accurately

At present, V2 is still in beta, but it is ready to use, welcome to use my Chrome plugin template to experience the ultimate convenience of ParcelJS

Of course, refer to the official website can also be very easy to build vUE template from 0, NNNNNN times easier than Webpack