使用Trae将油猴脚本打包成谷歌插件

作为一个效率至上的开发者，我一直习惯用油猴脚本来扩展网页功能，提升日常开发效率。这也是我写下《油猴脚本实战指南》这本小册的初衷。

直到有一天，我突然想到：能不能把油猴脚本直接"打包"成原生谷歌插件？这样既能保留脚本的灵活性，又能享受插件的完整能力，岂不是一举两得？

想要做到这一点，就必须掌握谷歌插件的基本开发流程。于是，我整理并写下了一篇超详细、超全面的《谷歌插件极速入门实战指南》。

最终，我也梳理出一套可行的方法，能帮助大家把油猴脚本"无缝迁移"到原生谷歌插件中，供大家参考。

油猴脚本打包成谷歌插件的本质

首先我们要明确，油猴脚本与 Chrome 插件在开发与发布方式上存在显著差异。目前并没有任何工具可以实现"一键打包"将油猴脚本直接转换为原生 Chrome 插件。

这里我们所说的"打包"，更准确地说，是借助一些辅助手段，将油猴脚本的项目结构和逻辑迁移为一个可运行的 Chrome 插件。

在《谷歌插件极速入门实战指南》一节中，我介绍了一个简单插件通常包含如下目录结构：

js 复制代码

my-extension/
├── manifest.json     # 插件的核心配置文件（必需）
├── background.js     # 后台脚本，处理事件监听、消息通信等（可选）
├── content.js        # 注入到网页中的脚本，操作 DOM 等（可选）
└── icon.png          # 插件图标（可选）

简单脚本的改造

如果你的油猴脚本 未使用任何油猴 API（即 @grant none） ，那么迁移成本几乎为零。你只需将脚本元信息转写为 manifest.json 配置，将核心逻辑复制到 content.js 中即可。

例如，将下面这个简单的油猴脚本------"自动切换网页背景图"迁移成 Chrome 插件，操作非常直接：

要改造的原生油猴脚本

js 复制代码

// ==UserScript==
// @name         石小石的背景切换脚本
// @namespace    http://tampermonkey.net/
// @version      0.0.1
// @description  自动为网页更换高清背景图片
// @author       石小石
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  console.log("====石小石的背景切换油猴脚本====");

  const randomImageUrl = `https://picsum.photos/1920/1080?random=${Date.now()}`;

  document.body.style.backgroundImage = `url(${randomImageUrl})`;
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundPosition = "center";
  document.body.style.backgroundRepeat = "no-repeat";
})();

改造后的 Chrome 插件结构

js 复制代码

my-extension/
├── manifest.json
├── content.js

manifest.json

js 复制代码

{
  "manifest_version": 3,
  "name": "石小石的背景切换脚本",
  "version": "0.0.1",
  "description": "自动为网页更换高清背景图片",
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ],
}

content.js

js 复制代码

//content.js

console.log("====石小石的背景切换谷歌插件====");

(function () {
  const randomImageUrl = `https://picsum.photos/1920/1080?random=${Date.now()}`;
  document.body.style.backgroundImage = `url(${randomImageUrl})`;
  document.body.style.backgroundSize = "cover";
  document.body.style.backgroundPosition = "center";
  document.body.style.backgroundRepeat = "no-repeat";
})();

但是，如果一个脚本使用了很多油猴API，迁移工作就会复杂一点，我们需要将使用的油猴API替换成谷歌插件API，同时，需要将部分逻辑写在background.js

perl 复制代码

my-extension/
├── manifest.json        # 插件的核心配置文件           
├── background.js        # 后台脚本，可以使用谷歌插件的所有API   
├── content.js           # 注入网页的脚本，有限制的使用谷歌插件API

复杂脚本的改造

当你的脚本使用了大量油猴特有的 API（如 GM_xmlhttpRequest、GM_setValue、GM_registerMenuCommand 等），迁移就不再是"复制粘贴"这么简单了。

此时，你需要将油猴 API 替换为 Chrome 插件所支持的 API，同时根据功能拆分逻辑：

将页面操作部分保留在 content.js 中
将需要权限、跨域请求、持久存储等复杂逻辑拆分至 background.js 中
在 manifest.json 中声明权限，类似油猴的@grant

示例结构如下：

js 复制代码

my-extension/
├── manifest.json     # 插件核心配置
├── background.js     # 后台脚本，可使用完整的 Chrome API
├── content.js        # 页面脚本，权限受限

使用Trae的智能体实现脚本迁移

自定义智能体

借助Trae的智能体，将油猴脚本迁移成谷歌插件非常便捷容易。创建一个脚本迁移的自定义智能体步骤如下：

在Trae的AI 对话窗口中点击**「设置」** 图标，然后切换至**「智能体」**选项。

提示词部分填入如下自定义Prompt：

js 复制代码

你是一位专业的油猴脚本转换专家，擅长将油猴脚本迁移为原生 Chrome 插件。
请遵循以下要求改造：
基本要求：
 - 功能保持一致：仅进行代码迁移，确保不改变原有功能逻辑。
 - 符合 Manifest V3 规范：输出完整的 manifest.json，其内容应尽量还原脚本原有元信息（如名称、描述、匹配规则等）。
 - 标准插件结构：目录结构应清晰规范，便于开发者直接加载和调试。
 - 项目迁移完毕，可以删除项目中多余的文件。
情况一：脚本未使用油猴 API
 - 直接将脚本逻辑迁移至 content.js，作为 Content Script 注入页面。。
 - 结构保持精简，仅包含 manifest.json 和 content.js。
情况二：脚本使用了油猴 API
 - 将油猴 API 替换为对应且合适的 Chrome 插件 API
 - 合理拆分代码逻辑，页面交互部分放入 content.js，与权限、数据、网络相关的逻辑放入 background.js。
 - 如有API使用情况，配置合适的 permissions、host_permissions 等字段。