This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

Following the last article on the basic introduction of Chrome plug-ins, here we start to practice the development of plug-ins, the first part from the development environment to build it, this part is plug-in development and Web-SPA application development is a big difference between the part

target

The expected goal is to build a React+TS+Antd plug-in development environment, which supports build to generate all the files required by the plug-in

The ideal build directory should look something like this:

├─ favicon.ico <-- Popup ├─ insert.js <-- Insert javascript into target page (optional, depending on business requirements, Notes will say back to) ├ ─ the manifest. Json < -- plug-in configuration file ├ ─ / static | ├ ─ / CSS | | ├ ─ content. CSS < -- the content page style (with the target page pollution each other) | | └ ─ main. The CSS < - the popup page style (not pollution each other with the target page) | ├ ─ / js | | ├ ─ background. Js < - background script | | ├ ─ content. js < -- the content script | | └ ─ Main. Js < -- -- popup script | └ ─ / media < - the picture of the project resource storage directoryCopy the code

This includes the popup, Content, and background components required by the plug-in

Development environment setup practice

Create-react-app builds the react project

Create – React -app creates – React -app, creates -react-app, creates -react-app

React + TS project

npx create-react-app my-app --template typescript
cd my-app
npm start
Copy the code

After that, you can directly execute NPM run ejcet to expose the webpack configuration, and then modify the Webpack

Project development directory configuration

Here I refer to this blog for development directory configuration, everyone according to his own style changes: zhuanlan.zhihu.com/p/137793202

├ ─ / config < - configuration directory (generated by eject) ├ ─ / public < - popup entry page | ├ ─ < / images, the images directory | | ├ ─ icon. The PNG < - plugin icon | ├ ─ the favicon. Ico < -- -- and this not line, with less than | ├ ─ index. The HTML < - the popup entry page | ├ ─ insert. Js < -- is inserted into the target page execution of js (not a must, Depending on the needs of the business) | ├ ─ the manifest. Json < -- plug-in configuration file ├ ─ / scripts < - project build script runs (generated by eject) ├ ─ / SRC < - development directory | ├ ─ / API < - API public directory | | ├ ─ Index. Js | ├ ─ / background < - background script development directory | | ├ ─ index. The js | ├ ─ / common < - public resource directory | | ├ ─ / js < - public js directory | | └ ─ / stylus < - public style directory (in this demo using stylus) | ├ ─ / content < -- the content script development directory | | ├ ─ / components < -- the content components directory | | ├ ─ / images < -- the content images directory | | ├ ─ content. styl < -- the content style | | └ ─ index. The js < -- the content script master file | ├ ─ / popup < - the popup development directory | | ├ ─ / pages < - popup page directory | | ├ ─ / components "- the popup components directory | | ├ ─ index. The js < - the popup master file | ├ ─ index. The js < - project master file, Also popup entry file ├─ Pakeage.jsonCopy the code

Modify webPack to generate the build directory above

The important point is that plug-in development is not a single entry point like SPA applications, and webPack configuration needs to be modified to package artifacts that meet the build directory requirements described above

Setting multiple entry points

In order to pack popup, background and content into the corresponding JS file, it is necessary to set multiple entry, mainly to modify the entry field

Let’s make the following changes to config/webpack.config.js:

. entry: { main: [ isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), paths.appIndexJs, ].filter(Boolean), content: './src/content/index.js', background: './src/background/index.ts' }Copy the code

The core code location is around line 173-198

The original entry is replaced with an object, with a key for each object corresponding to an entry

Fixed the file name generated by build

Since the file name referenced in the manifest.json configuration is fixed, we need to make sure that the file name of each package remains the same (hash value is added by default). The main work is as follows:

  • Delete the hash value of the file and [contenthash:8]. (Of course, you can also write tools that try to dynamically modify the manifest.json file during the packaging phase, so that this step is not required.)
  • Change static/js/bundle.js to static/js/[name].bundle.js.
  • Set runtimeChunk to false, otherwise run-time background.js, run-time content-js, run-time main.js will be generated after build.
  • Comment out splitChunks and cancel subcontracting. Otherwise, files such as 1.chunk.js and 2.chunk.js will be generated.

Continue to modify the above webpack.config.js:

Filename: isEnvProduction? 'static/js/[name].js' : isEnvDevelopment && 'static/js/[name].bundle.js', // about 214 lines chunkFilename: isEnvProduction? 'static/js/[name].chunk.js' : IsEnvDevelopment && 'static/js/[name].chunk.js', // about 302 lines/chrome plugin development, remove the subcontract mechanism // splitChunks: {// chunks: 'all', // name: isEnvDevelopment, // }, ... RuntimeChunk: false // about 642 lines new MiniCssExtractPlugin({filename: 'static/ CSS /[name].css', chunkFilename: 'static/css/[name].chunk.css', }),Copy the code

Set popUp not to import js from the other two modules

Set index.html to only import main.js, otherwise popup pages will also import background/index.js and content/index.js

// 566 line new HtmlWebpackPlugin(object.assign ({}, {inject: True, only introduce popup / / HTML code, chrome plug-ins development cannot introduce the content and background of code chunks: [' main '], the template: paths.appHtml, }, isEnvProduction ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined ) ),Copy the code

The above basically completed the transformation of Webpack

The introduction of Antd

React is the most popular UI component library for react

In fact, antD is introduced in the same way as traditional development, here is still the code, first install antD library:

npm install antd --save
Copy the code

We also need to add antD’s on-demand loading capability, which is also described in the official website. First, install babel-plugin-import:

npm install babel-plugin-import --save-dev
Copy the code

Next modify package.json:

"babel": {
        "presets": [
            "react-app"
        ],
+       "plugins": [
+           [
+               "import",
+               {
+                   "libraryName": "antd",
+                   "style": "css"
+               }
+           ]
+       ]
    }
Copy the code

review

  • React +ts+antd 插件 图 片
  • Webpack multi – entry configuration practices
  • Configuration of the WebPack product name and path