# e-syncme > 自动化打包chrome extention项目，自动关联文件路径到主程序配置，对关键代码进行混淆压缩（待开发），优化项目目录结构，有助于快速开发功能复杂的扩展程序。 Latest version **0.1.11-beta** (published 2021-11-22) · MIT license · 0 weekly downloads ## Install ```sh npm install e-syncme pnpm add e-syncme yarn add e-syncme bun add e-syncme ``` ## 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.1.11-beta | | Published | 2021-11-22 | | First published | 2021-06-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 13 | | Unpacked size | 17 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Eki | | Maintainers | i_eki | ## Links - npm: https://www.npmjs.com/package/e-syncme - npm.io page: https://npm.io/package/e-syncme ## Dependencies (13) - [gulp](https://npm.io/package/gulp.md) ^4.0.2 - [rollup](https://npm.io/package/rollup.md) ^2.52.3 - [cheerio](https://npm.io/package/cheerio.md) ^1.0.0-rc.10 - [gulp-less](https://npm.io/package/gulp-less.md) ^5.0.0 - [gulp-clean](https://npm.io/package/gulp-clean.md) ^0.4.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.14.6 - [gulp-cssnano](https://npm.io/package/gulp-cssnano.md) ^2.1.3 - [gulp-flatten](https://npm.io/package/gulp-flatten.md) ^0.4.0 - [through-gulp](https://npm.io/package/through-gulp.md) ^0.5.0 - [rollup-plugin-babel](https://npm.io/package/rollup-plugin-babel.md) ^4.4.0 - [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^7.0.2 - [rollup-plugin-commonjs](https://npm.io/package/rollup-plugin-commonjs.md) ^10.1.0 - [rollup-plugin-node-resolve](https://npm.io/package/rollup-plugin-node-resolve.md) ^5.2.0 ## Recent versions - 0.1.11-beta (latest) — 2021-11-22 - 0.1.10-beta — 2021-11-18 - 0.1.9-beta — 2021-11-09 - 0.1.6-beta — 2021-07-01 - 0.1.5-beta — 2021-06-30 ## README #### SyncMe ##### 简介 自动化打包chrome extention项目，自动关联文件路径到主程序配置，对关键代码进行混淆压缩（待开发），优化项目目录结构，有助于快速开发功能复杂的扩展程序。 ##### 目录说明 ----项目根目录 ----index.js 打包主程序代码 ----src 扩展项目目录 ------manifest.json 扩展主配置文件，部分项为自动生成，不允许手动配置，请参考[选项](#选项) ------icons 图标目录，仅支持ico格式图标，且名称是支持的大小，如48.ico，建议使用标准大小[16, 48, 128] ------pages 扩展模块目录 --------background 原扩展后台模块 --------\[xxx\] 其他模块 ----------\[xxx.html\] background模块有效，存在时使用页面模式，否则仍然寻找js文件作为主入口 ----------\[xxx.js\] 主程序文件 ----------\[xxx.json\] 模块配置文件，主要可配置加载时机和匹配规则等 ----------\[xxx.(less|css)\] 模块加载的样式文件 ----------其他引用的js和样式文件可在以上主文件中使用import/@import等语法导入 ##### 快速上手 + 全局安装脚手架 ``` npm install e-syncme-cli -g ``` + 新建项目 - 新建并自动安装依赖项 ``` syncme create ``` - 选项 -ni | 添加此选项后，不会自动安装依赖项 ``` syncme create -ni ``` 或者参考[手动搭建SyncMe框架](#手动搭建SyncMe框架项目) + 运行项目 ``` syncme start npm run start ``` + 构建项目生产版本 ``` syncme build npm run build ``` ##### 手动搭建SyncMe框架项目 + 安装依赖包 ``` npm install e-syncme -save--dev ``` + 运行项目 ``` gulp --watch ``` + 打包项目生产版本 ``` gulp ``` **建议在项目package.json中添加命令，使用npm run xxx运行** ##### 项目内命令 + 创建模块 ``` syncme m -c [name] ``` 会以脚手架模板文件为基础，在项目根目录/src/pages下创建一个新的模块。 若键入名称为background，则按照background模块创建。 若指定位置已存在模块同名文件夹，则命令无效。 + 删除模块 ``` syncme m -d [name] ``` 在项目根目录/src/pages下删除匹配name的模块文件夹。 若文件夹不存在，则会抛出错误。 + 重命名模块 ``` syncme m -r [oldname] [newname] ``` 模块名称仅可包含英文字母、数字和下划线，并且以英文字母开头。 #### 选项 ##### manifest.json选项 + manifest_version | *原配置项* | 必须存在且目前**只能**为2. + name | *原配置项* | 扩展项目的名称 + version | *原配置项* | 扩展项目的版本号 + description | *原配置项* | 扩展项目的描述说明 + permissions | *原配置项* | 扩展所需权限声明，参考[permission](https://developer.chrome.com/docs/extensions/mv3/declare_permissions/) + browser_action | ***暂不支持*** + icons | **不允许手动配置** | 需要将使用的文件放入src/icons文件夹，参考[目录说明](#目录说明) + background | **不允许手动配置** | 后台模块，可在pages/backgound中直接书写代码 + content_scripts | **不允许手动配置** | 非后台模块，可在pages中对应目录下直接书写代码 + 其余涉及自定义文件的配置项**均不支持**，剩余需要在manifest.json中手动配置实现。 ##### 模块目录下同名json选项 + matches | *原配置项* | 模块匹配的路径规则 + run_at | *原配置项* | 模块加载时机，默认为document_idle + js或scripts | **不允许手动配置** | 在模块目录下同名js文件中书写代码即可 + css | **不允许手动配置** | 在模块目录下同名css文件中书写代码即可 #### 方法 ##### 内置方法 + **syncLoad** | 异步dom加载执行模块 - 参数  parentNode  string | Node 父节点或其选择器 - 参数  childSelector   string     子节点选择器 - 参数  callback    function    异步加载回调 - 参数  config      object     监听配置项 - 返回值 void 子节点选择器需要传入从父节点下算起的局部选择器，既不包含父节点及更外层节点； 回调方法中可使用两个参数，即异步加载获取得到的父节点对象和子节点对象； 使用MutationObserver监听，因此监听配置项为其实例的observe方法中传入的配置对象，具体参考[observe方法](https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver/observe)； **注意：**父节点参数不能传入一个动态节点，否则初始化或其改变时不能重新加载回调；并且丢失后内存无法回收。 --- _Source: https://npm.io/package/e-syncme · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._