webpack+typescript开发chrome插件的探索

首先讲chrome插件，chrome插件能做什么，请查考小茗同学[https://www.cnblogs.com/liuxi...]以及《Chrome扩展_及应用_开发》书籍都写的很详细

chrome插件有manifest.json background页面 popup页面以及content页面 四个主要文件 通过解压缩的方式在chrome浏览器端开发呈现下面具体讲述如何在webpack端配合开发

1、chrome插件开发是文件夹形式所以对应可直接build 进dist文件夹
通过 watch: true,实时监听文件变化 然后重新build，注意一定要
ignored: utils.resolve('/node_modules')基本常识，否则webpack占用特别大的cpu

2，通过webpack-chrome-extension-reloader插件实时推送文件夹给chrome浏览器，通知浏览器更新插件，无需手动刷新

3、有四个入口，必然要采用多页面应用，manifest.json可采用静态copy copy-webpack-plugin插件的方式copy至指定路径，多页面应用对应webpack的配置首先入口文件

 entry: {
        popup: ["./src/popup/index.tsx"],  //入口文件,
        option: ["./src/index.tsx"],  //选择入口文件,
        background: ["./src/background/index.tsx"],  //常驻后台入口文件,
        // vendor: Object.keys(pkg.dependencies),//把依赖文件打包进一个文件vendor里面
    },

通过html-webpack-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为javascript的超集，主要配置文件为tsconfig在与chrome插件开发的搭配里面一定要声明 chrome否则无法使用chrome的全局函数

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

然后我们就可以愉快的实时更新chrome插件开发，玩耍了
另附一个小黑自己开发的一个提效插件demo
插件主要用以在项目开发中，进行代理和跨域，在本地开发中由于是localhost域名无法直接访问开发服务器，可以采用拦截返回头追加cros请求Access-Control-Allow-Origin、Access-Control-Allow-Credentials等方式跨域

本地开发和线上环境由于环境数据的不同，往往是出现bug的主要原因，这也给我们开发调试造成了很大的困扰，通过该插件代理，可直接将本地代码代理至线上 缩短调试时间，开发利器