/content-script-vue

使用Vite、Vue3和TypeScript开发浏览器脚本,集成常用工具库,支持打包为油猴脚本。

Primary LanguageTypeScriptMIT LicenseMIT

使用Vite、Vue3和TypeScript开发浏览器脚本,集成常用工具库,支持打包为油猴脚本。

示例

特性

  • 基于Vite构建,可充分利用Vite生态插件
  • 样式与原网页相互隔离,最大程度减少对原网页的影响
  • 使用Unocss,可使用tailwindcss编写样式
  • 支持主题定制
  • 使用VueUse作为工具库
  • 内置脚本窗口和日志组件
  • 内置模拟输入和点击脚本
  • 支持选择使用jQuery作为DOM操作库
  • 可打包为扩展或油猴脚本等形式

使用

建议使用pnpm安装依赖,节省磁盘空间

IDE推荐使用VSCode,并安装项目推荐的插件

git clone https://github.com/wearzdk/content-script-vue.git # 克隆项目
cd content-script-vue # 进入项目目录
pnpm install # 安装依赖
pnpm dev # 启动开发

# 打包为扩展
pnpm build
# 打包为油猴脚本
pnpm build-tm

脚本信息可在src/manifest.tspackage.json中修改 可在uno.config.ts中修改颜色主题配置

注意事项

  • 脚本css样式将默认限制在脚本容器内,不会影响原网页样式,如须修改可在vite.config.ts中配置要忽略的样式选择器
  • 在MV3规则下,部分操作是不允许的(如动态注入其他代码),具体可参考chrome官方文档
  • 一些现代网站使用虚拟DOM,如Vue、React等,此时使用浏览器原生的点击、输入等操作可能无法触发事件,可使用内置的模拟点击、输入脚本

帮助文档