用 Svelte 开发油猴脚本

1. 首先，您需要安装 Svelte

npm install -g svelte

2. 然后，您需要创建一个新的 Svelte 项目。您可以使用 Svelte 官方的模板创建一个项目。在您的命令行终端中执行以下命令：

npx degit sveltejs/template my-svelte-userscript
cd my-svelte-userscript
npm install

这将会创建一个新的 Svelte 项目，并在 my-svelte-userscript 目录中进行初始化。

3. 接下来，您需要创建一个用于加载您的用户脚本的 tampermonkey.js 文件。在 public 目录下创建一个名为 tampermonkey.js 的文件，然后将以下代码复制到该文件中：

// ==UserScript==
// @name         My Svelte Userscript
// @version      0.1
// @description  My Svelte userscript description
// @match        http://*/*
// @match        https://*/*
// @grant        none
// ==/UserScript==

const script = document.createElement('script');
script.src = 'http://localhost:5000/build/bundle.js';
document.body.appendChild(script);

4. 您需要将 my-svelte-userscript 目录下的 rollup.config.js 文件进行修改，以便将 Svelte 打包成一个用户脚本。您需要在文件顶部添加以下代码：

import replace from "@rollup/plugin-replace";
import {terser} from "rollup-plugin-terser";

然后，您需要更改 output 部分以将代码打包成一个可用于用户脚本的 JavaScript 文件。在 output 部分添加以下内容：

output: {
  file: 'public/build/bundle.js',
  format: 'iife',
  sourcemap: false,
  plugins: [terser()],
  name: 'mySvelteUserscript',
},

5. 然后，您需要修改 package.json 文件中的 scripts 部分，以便在编译时运行 rollup 并启动开发服务器。在 scripts 部分添加以下内容：

"scripts": {
  "build": "rollup -c",
  "dev": "rollup -c -w",
  "start": "npm run dev & npx http-server public"
},

6. 最后，您可以在 Svelte 项目的根目录下运行以下命令来启动开发服务器：

npm start

现在，您可以在浏览器中打开 http://localhost:8080，并在您的代码编辑器中编辑 src 目录下的 Svelte 文件，然后在浏览器中实时查看更改。

当您准备发布用户脚本时，运行以下命令来构建压缩的用户脚本：

npm run build

这将生成一个打包好的 JavaScript 文件，位于 public/build/bundle.js 目录下。您可以将此文件上传到用户脚本管理器中，并在浏览器中安装您的用户脚本。

注意：不要从不受信任的网站加载外部脚本，不要修改网站的核心功能等