- 进入你的脚本目录,使用npm初始化。各类参数可自由指定。
- 如果需要,可以在脚本目录下进一步安装npm依赖。
- 新建入口文件,在其中编写脚本代码。
- 如果你想要使用TypeScript,则新建
src/index.ts
。 - 如果你想要使用普通JS,则新建
src/index.js
。
- 如果你想要使用TypeScript,则新建
- 编写过程中,运行
npm run dev 你的目录名称
,例如npm run dev Putian_Warning
,即可启动自动编译,在你的目录下生成脚本代码,并会随着你的修改自动重新编译。 - 编写完成后,运行编译命令,即可在你的目录下生成脚本代码。
- 如果需要未经压缩的,请运行
npm run build-dev 你的目录名称
,例如npm run build-dev Putian_Warning
- 如果需要优化后的,请运行
npm run build 你的目录名称
,例如npm run build Putian_Warning
。这个版本会进行tree shaking,减小脚本体积。
- 如果需要未经压缩的,请运行
编译工具内置了CSS Module支持。因此,你可以直接编写CSS文件,并且不需要担心样式冲突的问题。但注意在meta.yml中申请GM_addStyle权限。
首先新建一个CSS,例如src/index.css
,写入以下内容:
.my-button {
color: red;
}
在你的脚本中,可以这样使用:
import { locals } from './index.css';
const button = document.createElement('button');
button.className = locals['my-button'];