@vitejs/plugin-legacy（使用 Vite 插件开发构建 Tampermonkey 用户脚本）

起因

一直以来 
    
    
，我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的：对于一些简单的脚本
     


     


    ，这没有什么问题 




 




 


，即改即看 
    
    
。但当代码多了以后问题就来了 

   

   

，自带编辑器开发体验确实不太舒服
     

     

   ，没有格式化  




  




  

，没有代码补全 


  


  


，无法模块化编写代码等等
     
     
  ，这时候我就想寻找一个打包方案   




   




   
，让我们可以在自己的编辑器如 VSCode 里开发 



 



 



，这样就可以充分利用前端工程化的便利           ，提升开发体验
     


     


    。常见的打包工具比如 webpack    
    
    、parcel  


     


     


、rollup 等
    




    




    ，首先排除 webpack（笑）














，然后试了下 parcel           ，效果不太理想
     



     



     ，之后试了 rollup 感觉还可以 




 




 


。转眼想到要用 vue 开发













，那就直接上 vite 吧 ? 
    
    
，vite 也是用 rollup 来打包生产代码的 

   

   

。直接打开 npm
     


     


    ，看看有没有人造轮子 




 




 


，然后发现下面几个包：

gorilla (rollup 插件） vite-plugin-tampermonkey vite-plugin-monkey

这几个都符合基本需求 

   

   

，其中 gorilla 不能打包样式
     

     

   ，另外两个插件都差不多  




  




  

，选了 vite-plugin-tampermonkey 进行改造
     

     

   。修改后的插件： Github | npm

插件特点

通过单独的配置文件或者 package.json 中的 tmHeader 字段来配置 Tampermonkey 的 Userscript Header 构建生产时支持自动分析代码用到的 grant 开发模式时默认导入所有 grant 


  


  


，并且把所有的 grant 方法加入到 unsafeWindow 可通过简单配置
     
     
  ，把引入的外部包 require 化   




   




   
，自动引入 jsdelivr CDN  



 



 



，详情见下面的插件配置

开始之前

Vite 官方中文文档Tampermonkey 文档gorillavite-plugin-tampermonkeyvite-plugin-monkey

初始化项目

兼容性注意Vite 需要 Node.js 版本 >= 12.0.0  




  




  

。然而           ，有些模板需要依赖更高的 Node 版本才能正常运行
    




    




    ，当你的包管理器发出警告时














，请注意升级你的 Node 版本 


  


  


。

使用 NPM:

$ npm create vite@latest

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite

按需选择框架推荐使用 TypeScript然后到项目目录开始安装依赖

插件使用

安装

yarn add vite-plugin-tm-userscript -D# ORnpm install vite-plugin-tm-userscript -D

配置 vite.config.ts

import { defineConfig } from viteimport Userscript from vite-plugin-tm-userscript// https://vitejs.dev/config/export default defineConfig({ plugins: [ Userscript({ externalGlobals: [vue] }) ]})

配置 Userscript Header

有四种方式来配置 Userscript Header, 优先级如下所示

header.config.json header.config.js header.config.txt package.json 中的 tmHeader 字段

其中 header.config.txt 使用 Tampermonkey 头部注释配置           ，不会经过处理
     



     



     ，直接插入脚本头部作为 Header 使用其他三种格式按 json 格式配置













，多个属性配置如 match 用数组表示 
    
    
，经过处理自动添加 grant 与 require示例配置见 example/header.config.js使用 js 文件来配置的好处是可以有自动补全：具体属性配置见 Tampermonkey 文档

插件配置

export interface TMPluginOptions { entry?: string; autoGrant?: boolean; externalGlobals?: string[] | Record<string, string | string[]>;}

externalGlobals

配置外部包
     


     


    ，比如 vue 




 




 


，axios 等 

   

   

，减少打包体积
     

     

   ，并且会自动声明 require   




  




  

，如下配置：三种配置形式 


  


  


，可自定义 CDN
     
     
  ，不配置 CDN 的话默认使用 jsdelivr CDN

// 1TMPlugin({ externalGlobals: [jquery]})// 2TMPlugin({ externalGlobals: { jquery: jQuery }})// 3TMPlugin({ externalGlobals: { jquery: [jQuery, https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js] }})// =>return { rollupOptions: { external: [jquery] output: { globals: { jquery: jQuery } } }}// @require https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js

autoGrant

boolean 类型   




   




   
，默认为 true自动分析代码中使用的 Tampermonkey 的 grant 



 



 



，并加入 Userscript Header 声明中

entry

入口文件           ，默认为 src/main.js 或者 src/main.ts

开发启动

npm run dev 或 yarn dev 运行开发服务
    




    




    ，然后点击下图所示链接安装

生产打包

npm run build 或 yarn build 进行生产模式打包














，打包文件放在 dist 文件夹里然后可以发布到插件市场或者直接安装到浏览器

示例

https://github.com/asadahimeka/vite-plugin-tm-userscript/tree/master/example

说明

vite 配置额外说明

生产构建模式将强制配置 config.build:

构建的包名为 package.json 的 name （必须填写）属性的驼峰模式           ，构建的文件名也与其相关 文件打包格式为 iife
     



     



     ，不压缩













，不分离 css 文件 额外配置了 rollupOptions 
    
    
，以支持其他功能

禁止 CSP(Content-Security-Policy)

在开发模式下
     


     


    ，需要通过 script 标签注入 vite 的脚本 




 




 


，有些网站开启了 CSP(Content-Security-Policy) 

   

   

，导致报错
     

     

   ，可以安装 Chrome 插件 Disable Content-Security-Policy 或者 Always Disable Content-Security-Policy  




  




  

，来禁止 CSP(Content-Security-Policy) 


  


  


，在开发时开启插件即可（其他时间记得关闭以保证网页浏览的安全性）
     
     
  。

https://www.nanoka.top/posts/3a8bdf22/fin.