在这里，你将学习如何通过集成 Mellowtel 来实现你的 Plasmo 浏览器扩展的货币化。预计完成时间：5-15 分钟。

手动安装

如果你已经有一个 Plasmo 项目，请按照以下步骤添加 Mellowtel 集成。

安装依赖

首先，将 Mellowtel 包添加到你的项目中：

pnpm add mellowtel

配置 package.json

更新你的 package.json 以包含所需的权限：

{
  "manifest": {
    "permissions": [
      "storage",
      "declarativeNetRequest"
    ],
    "host_permissions": ["<all_urls>"]
  }
}

设置环境变量

创建或更新你的 .env 文件：

PLASMO_PUBLIC_MELLOWTEL=your_mellowtel_api_key_here

确保将 your_mellowtel_api_key_here 替换为你从仪表板获取的实际 Mellowtel API 密钥。

实现

后台脚本设置

创建或修改你的后台脚本 (background.ts)：

import Mellowtel from "mellowtel"

let mellowtel;

(async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  await mellowtel.initBackground()
})()

// 处理安装和更新
chrome.runtime.onInstalled.addListener(async function (details) {
  console.log("扩展已安装或更新", details)
  await mellowtel.generateAndOpenOptInLink()
})

内容脚本设置

创建或修改你的内容脚本 (content.ts)：

import Mellowtel from "mellowtel"
import type { PlasmoCSConfig } from "plasmo"

let mellowtel;

// 配置内容脚本行为
export const config: PlasmoCSConfig = {
  matches: ["<all_urls>"],
  all_frames: true,
  run_at: "document_start"
}

const start = async () => {
  mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
  const resp = await mellowtel.initContentScript()
}

start()

弹出实现

创建或修改你的弹出组件 (popup.tsx)：

import Mellowtel from "mellowtel"

const Popup: React.FC = () => {
  const handleMellowtelSettings = async () => {
    const mellowtel = new Mellowtel(process.env.PLASMO_PUBLIC_MELLOWTEL)
    const link = await mellowtel.generateSettingsLink()
    chrome.tabs.create({ url: link })
  }

  return (
    <div>
      <button onClick={handleMellowtelSettings}>
        更改 Mellowtel 设置
      </button>
    </div>
  )
}

export default Popup

开发命令

在开发过程中使用这些命令：

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 打包扩展
pnpm package

开发最佳实践

始终在开发和生产环境中彻底测试你的扩展
监控控制台以获取任何与 Mellowtel 相关的警告或错误
从用户的角度测试选择加入流程
验证设置链接是否正常工作
确保所有权限都已正确配置

测试

在提交你的扩展之前：

测试安装流程
验证选择加入过程是否有效
检查设置页面是否可访问
确认所有权限是否正常工作
如果针对多个平台，请在不同的浏览器上进行测试

有关 Mellowtel 功能和 API 的更多信息，请访问快速入门。

需要帮助？加入我们的 Discord 社区获取支持。

​手动安装

​安装依赖

​配置 package.json

​设置环境变量

​实现

​后台脚本设置

​内容脚本设置

​弹出实现

​开发命令

​测试

手动安装

安装依赖

配置 package.json

设置环境变量

实现

后台脚本设置

内容脚本设置

弹出实现

开发命令

测试