抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

官方文档写的已经够清楚了.这里记录一些我遇到的问题.

中文配置文件

// vite.config.ts
export type MonkeyUserScript = {
  /**
   * 用户脚本入口文件路径
   */
  entry: string;
  userscript?: MonkeyUserScript;
  format?: Format;

  /**
   * vite-plugin-monkey/dist/client 的别名
   * @default '$'
   * @example
   * // vite-env.d.ts 用于类型提示
   *
   * // 如果使用默认值 `$`
   * /// <reference types="vite-plugin-monkey/client" />
   *
   * // 如果使用其他别名 other_alias
   * declare module other_alias {
   *   export * from 'vite-plugin-monkey/dist/client';
   * }
   */
  clientAlias?: string;
  server?: {
    /**
     * 当用户脚本注释发生变化时,自动在默认浏览器中打开安装地址
     *
     * 并设置 `viteConfig.server.open ??= monkeyConfig.server.open`
     * @default 
     * process.platform == 'win32' || process.platform == 'darwin' // 如果是Win/Mac平台
     */
    open?: boolean;

    /**
     * 名称前缀,用于区分 server.user.js 和 build.user.js 在猴子扩展安装列表中的名称,如果不需要前缀,设置为false
     * @default 'server:'
     */
    prefix?: string | ((name: string) => string) | false;

    /**
     * 将 GM_api 挂载到 unsafeWindow 上,不推荐使用,应该通过 ESM 导入使用 GM_api,或使用 [unplugin-auto-import](https://github.com/antfu/unplugin-auto-import)
     * @default false
     * @example
     * // 如果设置为 true,可以使用 `vite-plugin-monkey/global` 进行类型提示
     * // vite-env.d.ts
     * /// <reference types="vite-plugin-monkey/global" />
     */
    mountGmApi?: boolean;
  };
  build?: {
    /**
     * 构建的用户脚本文件名
     *
     * 应该以 '.user.js' 结尾
     * @default (package.json.name??'monkey')+'.user.js'
     */ 
    fileName?: string;

    /**
     * 构建的只包含注释的用户脚本文件名,可以用于 userscript.updateURL
     *
     * 检查更新时,只下载这个小的文件而不是整个脚本
     *
     * 应该以 '.meta.js' 结尾,如果设置为 false,不会生成此文件
     * 
     * 如果设置为 true,会等于 fileName.replace(/\\.user\\.js$/, '.meta.js')
     *
     * @default false
     */
    metaFileName?: string | boolean | ((fileName: string) => string);

    /**
     * 这个配置可以是数组或对象,数组=Object.entries(对象)
     *
     * 如果值是字符串或函数,它或它的返回值是 exportVarName
     *
     * 如果值是数组,第一个项或它的返回值是 exportVarName,之后的项都是 [require url]
     *
     * 如果模块未导入,插件不会向用户脚本添加 require url
     *
     * @example
     * { // 映射结构
     *  vue:'Vue',
     *  // 如果这样设置
     *  // 需要在 `vite build` 时手动设置 userscript.require = ['https://unpkg.com/[email protected]/dist/vue.global.js']
     *
     *  vuex:['Vuex', (version, name)=>`https://unpkg.com/${name}@${version}/dist/vuex.global.js`],
     *  // 插件会自动将此 url 添加到 userscript.require
     *
     *  'prettier/parser-babel': [
     *    'prettierPlugins.babel',
     *    (version, name, importName) => {
     *      // name == `prettier`
     *      // importName == `prettier/parser-babel`
     *      const subpath = `${importName.split('/').at(-1)}.js`;
     *      return `https://unpkg.com/${name}@${version}/${subpath}`;
     *    },
     *  ],
     *  // 有时导入名与包名不同
     * }
     * @example
     * [ // 数组结构,这个例子来自 [playground/ex-vue-demi](https://github.com/lisonge/vite-plugin-monkey/tree/main/playground/ex-vue-demi)
     *   [
     *     'vue',
     *     cdn
     *       .jsdelivr('Vue', 'dist/vue.global.prod.js')
     *       .concat('https://unpkg.com/vue-demi@latest/lib/index.iife.js')
     *       .concat(
     *         await util.fn2dataUrl(() => {
     *           window.Vue = Vue;
     *         }),
     *       ),
     *   ],
     *   ['pinia', cdn.jsdelivr('Pinia', 'dist/pinia.iife.prod.js')],
     *   [
     *     'element-plus',
     *     cdn.jsdelivr('ElementPlus', 'dist/index.full.min.js'),
     *   ],
     * ]
     */
    externalGlobals?: ExternalGlobals;

    /**
     * 根据最终代码包,自动向用户脚本注释授予 GM_* 或 GM.* 权限
     *
     * 移除无用代码,然后如果代码包含 'GM_xxx',向 \@grant 添加 GM_xxx
     * @default true
     */
    autoGrant?: boolean;

    /**
     * @deprecated 使用 vite>=4.2.0 中的 [viteConfig.build.cssMinify](https://vitejs.dev/config/build-options.html#build-cssminify)
     *
     * 现在 minifyCss 不起作用
     */
    minifyCss?: boolean;

    /**
     * @example
     * {  // 默认资源名是包的导入名
     *   'element-plus/dist/index.css': pkg=>`https://unpkg.com/${pkg.name}@${pkg.version}/${pkg.resolveName}`,
     *   'element-plus/dist/index.css': {
     *     resourceName: pkg=>pkg.importName,
     *     resourceUrl: pkg=>`https://unpkg.com/${pkg.name}@${pkg.version}/${pkg.resolveName}`,
     *     loader: pkg=>{ // 默认有支持 [css, json, vite支持的资源, ?url, ?raw] 后缀名文件的 loader
     *        const css = GM_getResourceText(pkg.resourceName);
     *        GM_addStyle(css);
     *        return css;
     *     },
     *     nodeLoader: pkg=>{
     *        return [
     *          `export default (()=>{`,
     *          `const css = GM_getResourceText(${JSON.stringify(pkg.resourceName)});`,
     *          `GM_addStyle(css);`,
     *          `return css;`,
     *          `})();`
     *        ].join('');
     *     },
     *   },
     *   'element-plus/dist/index.css': [
     *      (version, name, importName, resolveName)=>importName,
     *      (version, name, importName, resolveName)=>`https://unpkg.com/${name}@${version}/${resolveName}`,
     *       // 向下兼容 externalGlobals cdn 函数,如果参数都是空字符串,插件会使用默认值
     *   ],
     *   'element-plus/dist/index.css': cdn.jsdelivr(),
     * }
     */
    externalResource?: ExternalResource;

    /**
     * 当使用动态导入时,插件会使用 systemjs 构建你的代码
     *
     * `cdn.jsdelivr()[1]` 例子 -> [dynamic-import.user.js](https://github.com/lisonge/vite-plugin-monkey/blob/7645b185605faf9b48c43116db5ea01726188e03/playground/dynamic-import/dist/dynamic-import.user.js)
     *
     * `'inline'` 例子 -> [test-v3.user.js](https://github.com/lisonge/vite-plugin-monkey/blob/7645b185605faf9b48c43116db5ea01726188e03/playground/test-v3/dist/test-v3.user.js)
     *
     * @default
     * cdn.jsdelivr()[1]
     */
    systemjs?: 'inline' | ModuleToUrlFc;

    /**
     * @default
     * const defaultFc = () => {
     *   return (e: string) => {
     *     if (typeof GM_addStyle == 'function') {
     *       GM_addStyle(e);
     *       return;
     *     }
     *     const o = document.createElement('style');
     *     o.textContent = e;
     *     document.head.append(o);
     *   };
     * };
     * @example
     * const defaultFc1 = () => {
     *   return (e: string) => {
     *     const o = document.createElement('style');
     *     o.textContent = e;
     *     document.head.append(o);
     *   };
     * };
     * const defaultFc2 = (css:string)=>{
     *   const t = JSON.stringify(css)
     *   return `(e=>{const o=document.createElement("style");o.textContent=e,document.head.append(o)})(${t})`
     * }
     */
    cssSideEffects?: (
      css: string,
    ) => IPromise<string | ((css: string) => void)>;
  };
};

Refused to load the script

出现这个的原因是内容安全策略(CSP),只会在server时出现这个问题,下载插件Disable-CSPCSP Unblock

评论