/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.ts、package.json中修改 可在uno.config.ts中修改颜色主题配置

注意事项

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

帮助文档