Naval Pilgrim's Mayflower

    vite-plugin-tampermonkey
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    vite-plugin-tampermonkey

    基于 vitetampermonkey 开发构建插件。

    特点

    • 通过 package.jsontampermonkey 属性配置 tampermonkey 的头部描述。
    • 构建生产时会支持自动分析代码用到的 grant ,开发模式则默认导入所有,并且把所有的 grant 方法加入到 unsafeWindow
    • 可通过简单配置,把引入的外部包 require 化,自动引入 unpkg.comCDN ,详情见下面的插件配置

    使用

    yarn add vite-plugin-tampermonkey -D
    npm install vite-plugin-tampermonkey -D
    
    import { defineConfig } from 'vite'
    import tampermonkey from 'vite-plugin-tampermonkey'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        tampermonkey({
          externalGlobals: ['vue']
        })
      ],
    })

    插件配置

    externalGlobals

    外部包配置,比如 vueaxios 等,减少打包体积,并且会自动声明 require ,require 会按数组(或者Object.keys)的顺序生成,如下配置:

    类型如下

    type AnyObj = Record<string, string>
    
    interface ExternalGlobalItem {
      /**包名,可以是代码(type = code),或者链接 */
      pkgName: string
      varName?: string
      type?: 'code' | 'package'
      path?: string
    }
    export type ExternalGlobal =
      | AnyObj
      | (string | ExternalGlobalItem | [pkgName: string, varName: string])[]

    简单使用

    const options = {
      externalGlobals: ['vue'],
      // externalGlobals: { vue: 'Vue' }
    }
    
    // => 
    
    const rollupOptions = {
      external: ['vue']
      output: {
        globals: {
          vue: 'Vue'
        },
      }
    }
    
    // @require           https://unpkg.com/vue@3.2.20

    更多配置方法

    请点击此处查看更多高级用法,可配置路径,代码,链接等。

    cdn string 类型,默认为 https://unpkg.com

    配置后,依旧可以使用 externalGlobals 选项的高级用法覆盖。

    autoGrant boolean 类型,默认为 true

    自动分析代码中使用的 tampermonkergrant,并加入声明中

    vite 配置额外说明

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

    • 入口为 src/main.js 或者 src/main.ts,由 vite.config.(j|t)s 文件决定
    • 构建的包名为 package.jsonname必须填写)属性的驼峰模式,构建的文件名也与其相关,文件打包格式为 iife,不压缩,不分离 css 文件。
    • 额外配置了 rollupOptions,以支持其他功能。

    UnoCSS

    如果你有使用 Unocss 的话,需要把 UnoCSS 插件放置在本插件之前,确保在 UnoCSS 处理完样式后再由本插件来合并到入口文件内。

    import { defineConfig } from 'vite'
    import tampermonkey from 'vite-plugin-tampermonkey'
    import Unocss from 'unocss/vite'
    
    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [
        Unocss(),
        tampermonkey({
          externalGlobals: ['vue']
        })
      ],
    })

    禁止CSP(Content-Security-Policy)

    在开发模式下,需要通过 script 标签注入 vite 的脚本,有些网站开启了 CSP(Content-Security-Policy),导致报错,可以安装Chrome插件Disable Content-Security-Policy或者Always Disable Content-Security-Policy,来禁止CSP(Content-Security-Policy)在开发时开启插件即可(其他时间记得关闭以保证网页浏览的安全性)

    Install

    npm i vite-plugin-tampermonkey

    DownloadsWeekly Downloads

    17

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    40 kB

    Total Files

    11

    Last publish

    Collaborators

    • thinkerljn