chrome-manifest-webpack-plugin

一、简介篇

一个Chrome扩展程序开发工具，让webpack打包支持一下特性

• 代码热更新 (支持content-script,background,options,popup热更新)。

• 支持远程代码加载功能（这样，插件发布后，仅需要安装一次客户端，后续更新走服务端网站发布模式即可)。

二、使用篇

普通模式

const ChromeManifestWebpackPlugin = require('chrome-manifest-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const domain = 'http://localhost:xx';
const hmr = domain + '/__webpack_hmr';

module.exports  = {
  entry: {
    app: [
      isProduction ? null : 'webpack-hot-middleware/client?path=' + hmr + '&timeout=20000&reload=true',
      './packages/pajk-chrome/index.js',
    ].filter(function(v) {return v;}),
  },
  plugins:[
    new ChromeManifestWebpackPlugin({
      manifestPath: 'manifest.json',
      domain: domain,
    })
  ]
}

远程模式

Chrome 扩展程序客户端将会从远程服务器加载扩展脚本的内容,这样后期发布不需要客户端重新更新下载。

步骤:

• 将dist目录作为客户端扩展程序，附加到浏览器扩展程序。
• 将dist目录下的内容发布成web应用。

const ChromeManifestWebpackPlugin = require('chrome-manifest-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';
const domain = 'http://localhost:xx';
const hmr = domain + '/__webpack_hmr';

module.exports  = {
  entry: {
    app: [
      isProduction ? null : 'webpack-hot-middleware/client?path=' + hmr + '&timeout=20000&reload=true',
      './packages/pajk-chrome/index.js',
    ].filter(function(v) {return v;}),
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    // 在生产模式，改成远程加载.
    publicPath: isProduction ? 'https://demo.chrome.extrnsion/' : domain,
  },
  plugins:[
    new ChromeManifestWebpackPlugin({
      manifestPath: 'manifest.json',
      domain: domain,
    })
  ]
}

环境判定

使用了插件，打包后，在content_scripts 中可以通过以下变量来判断当前代码是否运行在content_scripts下

if(chrome.env === 'content-script'){
  console.log('运行在content-scripts中');
}