Skip to content

FirefoxBar/userscript

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

用户脚本列表

开发说明

  • 代码修改请在main分支上进行。
  • GM头信息请写在各个脚本下的meta.yml文件中。Yaml语法可参考这里
  • 可以使用这个工具将原有的GM头信息转为Yaml格式。
  • 提交后CI会自动build并发布。

使用NPM开发

基本说明

  • 进入你的脚本目录,使用npm初始化。各类参数可自由指定。
  • 如果需要,可以在脚本目录下进一步安装npm依赖。
  • 新建入口文件,在其中编写脚本代码。
    • 如果你想要使用TypeScript,则新建src/index.ts
    • 如果你想要使用普通JS,则新建src/index.js
  • 编写过程中,运行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'];