# make-extension

> make browser extension with webpack

Latest version **0.8.8** (published 2020-10-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install make-extension
pnpm add make-extension
yarn add make-extension
bun add make-extension
```

Provides the commands `make-extension`, `make-extension-dev`, `make-extension-build`.

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.8 |
| Published | 2020-10-26 |
| First published | 2018-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 33 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | extfans |
| Maintainers | izi, infinitynewtab |
| Keywords | extension, addon |

## Links

- npm: https://www.npmjs.com/package/make-extension
- Repository: https://github.com/extfans/make-extension
- Homepage: https://github.com/extfans/make-extension#readme
- Issues: https://github.com/extfans/make-extension/issues
- npm.io page: https://npm.io/package/make-extension

## Dependencies (33)

- [gulp](https://npm.io/package/gulp.md) 4.0.2
- [webpack](https://npm.io/package/webpack.md) 4.35.0
- [fs-extra](https://npm.io/package/fs-extra.md) 8.0.1
- [commander](https://npm.io/package/commander.md) 2.15.1
- [css-loader](https://npm.io/package/css-loader.md) 3.0.0
- [@babel/core](https://npm.io/package/@babel/core.md) 7.4.5
- [file-loader](https://npm.io/package/file-loader.md) 4.0.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) 9.6.0
- [babel-loader](https://npm.io/package/babel-loader.md) 8.0.6
- [gulp-replace](https://npm.io/package/gulp-replace.md) 1.0.0
- [postcss-calc](https://npm.io/package/postcss-calc.md) 7.0.1
- [style-loader](https://npm.io/package/style-loader.md) 0.23.1
- [webpack-merge](https://npm.io/package/webpack-merge.md) 4.2.1
- [postcss-import](https://npm.io/package/postcss-import.md) 12.0.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) 3.0.0
- [postcss-mixins](https://npm.io/package/postcss-mixins.md) 6.2.1
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) 7.4.5
- [postcss-functions](https://npm.io/package/postcss-functions.md) 3.0.0
- [postcss-utilities](https://npm.io/package/postcss-utilities.md) 0.8.2
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) 7.0.0
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) 3.2.0
- [postcss-simple-vars](https://npm.io/package/postcss-simple-vars.md) 5.0.2
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) 1.3.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) 0.7.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) 3.3.2
- [friendly-errors-webpack-plugin](https://npm.io/package/friendly-errors-webpack-plugin.md) 1.7.0
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) 7.4.4
- [optimize-css-assets-webpack-plugin](https://npm.io/package/optimize-css-assets-webpack-plugin.md) 5.0.1
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) 7.2.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) 7.4.4
- [@babel/plugin-transform-react-inline-elements](https://npm.io/package/@babel/plugin-transform-react-inline-elements.md) 7.2.0
- [babel-plugin-transform-react-remove-prop-types](https://npm.io/package/babel-plugin-transform-react-remove-prop-types.md) ^0.4.24
- [@babel/plugin-transform-react-constant-elements](https://npm.io/package/@babel/plugin-transform-react-constant-elements.md) 7.2.0

## Recent versions

- 0.8.8 (latest) — 2020-10-26
- 0.8.7 — 2020-02-19
- 0.8.6 — 2020-02-19
- 0.8.5 — 2020-02-19
- 0.8.4 — 2020-02-19
- 0.8.3 — 2020-02-18
- 0.8.2 — 2020-02-18
- 0.8.1 — 2020-02-18
- 0.8.0 — 2020-02-18
- 0.7.0 — 2020-02-18
- 0.6.3 — 2019-10-14
- 0.6.2 — 2019-10-12
- 0.6.1 — 2019-10-12
- 0.6.0 — 2019-08-06
- 0.5.0 — 2019-08-02
- … 18 more at https://npm.io/package/make-extension/versions

## README

# 扩展构建工具
 install -g make-extension
## node版本要求
10.9.0

## 构建流程
1. 清理`dist`目录
2. 复制国际化及图标文件到`dist`
3. 读取`browser/base/manifest.json`，`browser/${process.env.BROWSER}/mafest.json`合并后生成扩展manifest临时文件
4. 执行`browser/base/.pointrc.js`，`browser/${process.env.BROWSER}/.pointrc.js`结果合并后生成此次打包过程中需要webpack额外进行编译的entry point
5. 根据manifest临时文件和`.pointrc.js`的结果生成webpack entry
6. 执行`browser/base/.postcssfunctionrc.js`，`browser/${process.env.BROWSER}/.postcssfunctionrc.js`结果合并后生成额外的postcss-function(用法[参考](https://www.npmjs.com/package/postcss-functions))
7. 执行webpack打包
8. 根据webpack打包结果，替换manifest临时文件中的路径生成正式的manifest.json

## 预定义的webpack env
* process.env.BROWSER(当运行`make-extension dev chrome`时，process.env.BROWSER === 'chrome')
* process.env.NODE_ENV(dev时为`development`，build时为`production`)

## 预定义的webpack alias
* @(相当于browser/base/src)
* ~(相当于browser/${process.env.BROWSER}/src)

## webpack entry point收集流程
1. 生成`manifest.json`，收集文件中以`@/`或`~/`开始的路径，比如`@/pages/newtab.html`
2. 读取`browser/base/.pointrc.js`，`browser/${process.env.BROWSER}/.pointrc.js`记录的路径
3. 将路径转化为entry point，比如`@/pages/newtab.html`->`browser/base/src/pages/newtab/index.js`，如果目录下还存在`index.html`就作为该页面对应的html模板传递给`HtmlWebpackPlugin`

## 可以使用的js草案语法
* [@babel/plugin-proposal-class-properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)

## 使用到的postcss plugin
* [postcss-calc](https://github.com/postcss/postcss-calc)
* [postcss-functions](https://github.com/andyjansson/postcss-functions)
* [postcss-import](https://github.com/postcss/postcss-import)
* [postcss-mixins](https://github.com/postcss/postcss-mixins)
* [postcss-simple-vars](https://github.com/postcss/postcss-simple-vars)
* [postcss-utilities](https://github.com/ismamz/postcss-utilities)

## 注意
* 0.5.0之前添加了babel插件`plugin-proposal-decorators`，考虑到会增加代码体积已在0.5.0移除

## 使用中的项目
* http://git.infinitynewtab.com/Starlab/infinity-pro
* http://git.infinitynewtab.com/Starlab/world-infinity-pro

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