3.0.0 • Published 3 years ago
chrome-manifest-webpack-plugin v3.0.0
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中');
}