Exploring the development of chrome plugin by webpack+typescript

Posted Jun 16, 20202 min read

Let s talk about the chrome plugin first. What can the chrome plugin do? Please refer to Xiaoming\[[ https://www.cnblogs.com/liuxi...] ( https://www.cnblogs.com/liuxianan/p/chrome -plugin-develop.html)]and "Chrome Extension_and Application_Development" books are written in great detail

The chrome plugin has a manifest.json background page, a popup page, and a content page. The four main files are developed on the chrome browser side by decompression. The following specifically describes how to cooperate with the development on the webpack side.

  1. Chrome plug-in development is in the form of a folder, so the corresponding can be directly built into the dist folder
    Through watch:true, to monitor file changes in real time and then rebuild, pay attention to
    ignored:utils.resolve('/node_modules') basic common sense, otherwise webpack takes up a particularly large cpu

  2. Push the folder to the chrome browser in real time through the webpack-chrome-extension-reloader plugin to notify the browser to update the plugin without manual refresh

  3. There are four entrances, and multi-page applications must be used. The manifest.json can be copied to the specified path using the static copy copy-webpack-plugin plugin. The multi-page application corresponds to the webpack configuration first.

    entry:{

         popup:["./src/popup/index.tsx"], //entry file,
         option:["./src/index.tsx"], //select entry file,
         background:["./src/background/index.tsx"], //resident background entry file,
         //vendor:Object.keys(pkg.dependencies), //package the dependency file into a file vendor
     },

Spit multiple pages through the html-webpack-plugin plugin

utils.getPage({
            name:'popup',
            chunks:['popup'],
            template:'./public/index.html'
        }),
        utils.getPage({
            name:'option',
            chunks:['option'],
            template:'./public/index.html'
        }),
        utils.getPage({
            name:'background',
            chunks:['background'],
            template:'./public/index.html'
        }),

typescript is a superset of javascript, the main configuration file is tsconfig. It must be declared in collocation with chrome plugin development, otherwise chrome cannot use chrome's global functions

"types":[
        "node",
        "chrome",
        "react"
     ],

Then we can happily update the chrome plugin development in real time and play
Also attached is a demo plugin developed by Xiaohei himself
The plug-in is mainly used for proxy and cross-domain in project development. In the local development, because the localhost domain name cannot directly access the development server, you can use the intercept return header to append the cros request Access-Control-Allow-Origin, Access- Control-Allow-Credentials cross domain

Due to the difference in environmental data, the local development and online environment are often the main cause of bugs. This has also caused us a lot of trouble in development and debugging. Through the plug-in proxy, the local code can be directly proxied to the online to shorten the debugging time. , Development tool