官方文档写的已经够清楚了.这里记录一些我遇到的问题.
中文配置文件
// 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-CSP或CSP Unblock