Umi-plugin-chromium-extension NPM

umi-plugin-chromium-extension

UmiJs v3 plugin: chromium extension development

这个插件可以让你用UmiJs v3.x.x下开发Chromium扩展，可以自动的扫描出相应目录下的Content_Scripts、Background、Options与Popup的入口文件，并自动生成相应的manifest.json文件。

目前仅支持Manifest V2版本的插件,未适配Manifest V3.

使用方法：

输入以下指令安装:

npm i umi-plugin-chromium-extension --save-dev

安装插件后在.umirc.ts或.umirc.js文件中的plugins选项中加入umi-plugin-chromium-extension,然后根节点加入chromiumExtension选项自定义配置然后运行即可.

配置项	类型	默认值	说明	版本
splitChunks	boolean	true	是否自动分割代码	-
rootPath	string	“./src/extension”	`manifest.json`文件以及`content_scripts`、`background`、`options`和`popup`文件夹的所在目录	-
mainFileName	string	“index.jts{,x}”	插件寻找各个文件夹的主入口时的正则匹配方法	-
configFileName	string	“index.json”	`content_scripts`子目录中各个页面内容脚本的配置文件名(使用本插件后各个内容脚本的配置文件可以不写在`manifest.json`文件中,可以写在每个子目录中,每次启动编译的时候会自动寻找并合并输出到编译目录到`manifest.json`文件中)	-
encoding	string	“utf-8”	`manifest.json`文件和`content_scripts`子配置的编码方式	-
distPathBefore	string	""	编译后的`content_scripts`、`background`、`options`和`popup`等文件夹构建到输出目录时是否要在包裹一层目录让编译后的输出目录更美观	-
contentScriptsPathName	string	“content_scripts”	内容脚本目录的目录名	-
backgroundPathName	string	"background"	后台脚本目录的目录名	-
optionsPathName	string	"options"	选项页的目录名	-
popupPathName	string	"popup"	气泡页的目录名	-
support360	boolean	false	build时是否构建出360浏览器版本的构建,360浏览器版本的构建的区别就是Chrome版本默认`update_url`,360浏览器版本的构建会复制一份Chrome版本的构建到360的目录,然后在`manifest.json`文件中增加`update_url`属性赋值到360的更新服务器	0.0.8
clearAbsPath	boolean or string	true	build之后因umijs不知道什么原因asyncToGenerator.js这个模块打包之后默认会用绝对路径作为变量名,导致编译后的结果在不同电脑下会有轻微差别导致在Firefox应用商店审核失败,开启该功能后,将自动在build之后寻找该变量名然后将名称全局替换成统一的前缀.统一的前缀:v1.0.3版本后支持传入字符串,若为字符串时,前缀为传入的字符串,若为true时则是"__ROOT__"	v1.0.1

`manifest.json`文件编写说明

在rootPath配置项对应的文件夹中创建manifest.json文件即可,编写内容和原版一致.只有以下字段不需要填写
只是不用填写content_scripts、background、options和popup部分的配置,将根据对应目录的文件信息自动生成相应的配置.
也不用填写update_url配置,这个配置chrome商店、edge商店、firefox商店上传时均不需要填写,若开启了360浏览器支持时将自动生成360的构建,对应构建中会自动填写该配置到360服务器.

`content_scripts`文件夹内子配置编写说明

只需要在mainFileName配置项对应入口文件的同文件夹下创建configFileName配置项对应名称的文件即可配置对应的入口文件配置.只需要原版manifest.json文件的content_scripts配置项的单一节点内容即可,例如:

{
  "matches": [
    "*://item.jd.com/*",
  ],
  "js": [
    "index.js"
  ],
  "css": [
    "index.css"
  ],
  "run_at": "document_start"
}

js需要固定写成index.js,如果对应的内容脚本中包含了css则需要加上index.css,这是构建后的默认名称,目录前缀会在编译后自动补全.

已知问题:

目前dev状态下偶尔会报umi入口不存在而停止运行,主要是因为通过浏览器直接访问了dev服务器的网页导致的,插件开发的过程中不需要访问网页,建议修改dev服务器的配置,将port修改到五位数大端口,将host修改成127.0.0.1,以保证不会被意外的访问导致dev服务器停止运行.导致该情况的原因暂时未知.

html-webpack-plugin webpack webpack-cli

@everything-registry/sub-chunk-3009

4 months ago

4 months ago

10 months ago

12 months ago

10 months ago