# chrome-manifest-webpack-plugin

> ## 一、简介篇

Latest version **3.0.0** (published 2020-11-16) · 0 weekly downloads

## Install

```sh
npm install chrome-manifest-webpack-plugin
pnpm add chrome-manifest-webpack-plugin
yarn add chrome-manifest-webpack-plugin
bun add chrome-manifest-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2020-11-16 |
| First published | 2019-06-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beven |

## Links

- npm: https://www.npmjs.com/package/chrome-manifest-webpack-plugin
- npm.io page: https://npm.io/package/chrome-manifest-webpack-plugin

## Recent versions

- 3.0.0 (latest) — 2020-11-16
- 2.0.5 — 2020-03-03
- 2.0.4 — 2020-03-03
- 2.0.3 — 2020-02-29
- 2.0.1 — 2020-02-29
- 2.0.0 — 2020-02-29
- 1.0.4 — 2020-02-29
- 1.0.3 — 2019-06-04
- 1.0.2 — 2019-06-04
- 1.0.1 — 2019-06-04
- 1.0.0 — 2019-06-03

## README

# chrome-manifest-webpack-plugin

## 一、简介篇

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

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

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

## 二、使用篇


### 普通模式

```js
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`应用。


```js
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`下

```js

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

```

---
_Source: https://npm.io/package/chrome-manifest-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._