我靠这个Chrome插件每月多赚3000，完整代码开源我靠这个Chrome插件每月多赚3000，完整代码开源先上成果

我靠这个Chrome插件每月多赚3000，完整代码开源

不用懂设计，复制粘贴就能上线。附完整代码+ monetization攻略。

先上成果

开发时间：2个周末（约20小时）
上线时间：2025年11月
当前用户：1.2万人
月收入：¥3200（付费版+广告）
技术栈：原生JS + Tailwind CSS（不用懂设计）

程序员做副业的痛点

我们有：

技术能力 ✅
逻辑能力 ✅
执行力 ✅

我们没有：

审美 ❌
UI设计能力 ❌
产品感 ❌

结果：做了一堆工具，界面丑得自己都不想用，更别说付费。

解决方案：用现成的UI组件库，不自己设计。

这个插件做什么

功能：网页内容AI总结助手

使用场景：

看长文时，一键提取核心观点
读论文时，快速生成摘要
逛小红书/知乎，直接看总结

为什么选这个方向：

AI总结是刚需（省时间）
技术实现简单（调用API）
用户愿意付费（省的时间值钱）

完整代码（复制粘贴就能用）

项目结构

ai-summary-extension/
├── manifest.json          # 插件配置
├── popup.html            # 弹窗界面
├── popup.js              # 弹窗逻辑
├── content.js            # 页面注入脚本
├── background.js         # 后台服务
├── styles.css            # 样式（用Tailwind）
└── icons/                # 图标
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

1. manifest.json（插件身份证）

{
  "manifest_version": 3,
  "name": "AI网页总结助手",
  "version": "1.0.0",
  "description": "一键总结网页内容，支持小红书、知乎、公众号等",
  "permissions": [
    "activeTab",
    "storage",
    "scripting"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

2. popup.html（弹窗界面）

重点：用Tailwind CSS，不用自己写样式。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body { width: 360px; min-height: 400px; }
  </style>
</head>
<body class="bg-gray-50">
  <!-- 头部 -->
  <div class="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <h1 class="text-lg font-bold">🤖 AI网页总结</h1>
    <p class="text-xs opacity-80">一键提取核心内容</p>
  </div>

  <!-- 内容区 -->
  <div class="p-4">
    <!-- API Key输入 -->
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
      <input type="password" id="apiKey" 
             class="w-full px-3 py-2 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500"
             placeholder="输入你的DeepSeek API Key">
      <p class="text-xs text-gray-500 mt-1"><a href="https://platform.deepseek.com" target="_blank" class="text-blue-500">获取API Key →</a></p>
    </div>

    <!-- 总结长度选择 -->
    <div class="mb-4">
      <label class="block text-sm font-medium text-gray-700 mb-1">总结长度</label>
      <select id="length" class="w-full px-3 py-2 border rounded-lg text-sm">
        <option value="short">简短（1-2句话）</option>
        <option value="medium" selected>适中（3-5句话）</option>
        <option value="long">详细（段落形式）</option>
      </select>
    </div>

    <!-- 总结按钮 -->
    <button id="summarizeBtn" 
            class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition">
      🚀 开始总结
    </button>

    <!-- 加载状态 -->
    <div id="loading" class="hidden mt-4 text-center">
      <div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500"></div>
      <p class="text-sm text-gray-600 mt-2">AI正在分析...</p>
    </div>

    <!-- 结果展示 -->
    <div id="result" class="hidden mt-4">
      <div class="bg-white border rounded-lg p-3 shadow-sm">
        <h3 class="text-sm font-semibold text-gray-800 mb-2">📋 总结结果</h3>
        <p id="summaryText" class="text-sm text-gray-700 leading-relaxed"></p>
        <button id="copyBtn" class="mt-2 text-xs text-blue-500 hover:text-blue-700">复制内容</button>
      </div>
    </div>

    <!-- 错误提示 -->
    <div id="error" class="hidden mt-4 bg-red-50 border border-red-200 rounded-lg p-3">
      <p class="text-sm text-red-600"></p>
    </div>
  </div>

  <!-- 底部 -->
  <div class="border-t p-3 text-center">
    <p class="text-xs text-gray-400">Powered by DeepSeek AI</p>
  </div>

  <script src="popup.js"></script>
</body>
</html>

UI效果：渐变头部 + 卡片式布局 + Tailwind默认配色，不用自己调。

3. popup.js（弹窗逻辑）

document.addEventListener('DOMContentLoaded', function() {
  const apiKeyInput = document.getElementById('apiKey');
  const lengthSelect = document.getElementById('length');
  const summarizeBtn = document.getElementById('summarizeBtn');
  const loading = document.getElementById('loading');
  const result = document.getElementById('result');
  const error = document.getElementById('error');
  const summaryText = document.getElementById('summaryText');
  const copyBtn = document.getElementById('copyBtn');

  // 加载保存的API Key
  chrome.storage.sync.get(['apiKey', 'length'], function(data) {
    if (data.apiKey) apiKeyInput.value = data.apiKey;
    if (data.length) lengthSelect.value = data.length;
  });

  // 保存设置
  apiKeyInput.addEventListener('change', () => {
    chrome.storage.sync.set({ apiKey: apiKeyInput.value });
  });
  lengthSelect.addEventListener('change', () => {
    chrome.storage.sync.set({ length: lengthSelect.value });
  });

  // 总结按钮
  summarizeBtn.addEventListener('click', async () => {
    const apiKey = apiKeyInput.value.trim();
    if (!apiKey) {
      showError('请输入API Key');
      return;
    }

    // 显示加载
    loading.classList.remove('hidden');
    result.classList.add('hidden');
    error.classList.add('hidden');
    summarizeBtn.disabled = true;

    try {
      // 获取当前标签页内容
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      
      // 注入content script获取内容
      const [{ result: pageContent }] = await chrome.scripting.executeScript({
        target: { tabId: tab.id },
        func: extractContent
      });

      if (!pageContent || pageContent.length < 100) {
        throw new Error('页面内容太少，无法总结');
      }

      // 调用DeepSeek API
      const summary = await callDeepSeek(apiKey, pageContent, lengthSelect.value);
      
      // 显示结果
      summaryText.textContent = summary;
      result.classList.remove('hidden');
      
    } catch (err) {
      showError(err.message || '总结失败，请重试');
    } finally {
      loading.classList.add('hidden');
      summarizeBtn.disabled = false;
    }
  });

  // 复制按钮
  copyBtn.addEventListener('click', () => {
    navigator.clipboard.writeText(summaryText.textContent);
    copyBtn.textContent = '已复制!';
    setTimeout(() => copyBtn.textContent = '复制内容', 2000);
  });

  function showError(msg) {
    error.querySelector('p').textContent = msg;
    error.classList.remove('hidden');
  }
});

// 在页面中执行的函数
function extractContent() {
  // 提取主要内容（去除广告、导航等）
  const article = document.querySelector('article') || 
                  document.querySelector('.post-content') ||
                  document.querySelector('.article-content') ||
                  document.querySelector('#content') ||
                  document.body;
  
  // 清理脚本和样式
  const clone = article.cloneNode(true);
  clone.querySelectorAll('script, style, nav, aside, .ads, .comment').forEach(el => el.remove());
  
  return clone.innerText.trim().substring(0, 8000); // 限制长度
}

// 调用DeepSeek API
async function callDeepSeek(apiKey, content, length) {
  const lengthPrompt = {
    short: '用1-2句话总结核心观点',
    medium: '用3-5句话总结主要内容',
    long: '用段落形式详细总结，包含关键论点'
  };

  const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: 'deepseek-chat',
      messages: [
        {
          role: 'system',
          content: `你是一个内容总结助手。${lengthPrompt[length]}。请用中文输出。`
        },
        {
          role: 'user',
          content: `请总结以下内容：\n\n${content}`
        }
      ],
      temperature: 0.7,
      max_tokens: 500
    })
  });

  if (!response.ok) {
    const err = await response.json();
    throw new Error(err.error?.message || 'API请求失败');
  }

  const data = await response.json();
  return data.choices[0].message.content;
}

4. content.js（页面注入）

// 可选：在页面上添加悬浮按钮
// 这部分代码按需启用

function addFloatingButton() {
  const btn = document.createElement('div');
  btn.innerHTML = '🤖';
  btn.style.cssText = `
    position: fixed;
    right: 20px;
    bottom: 100px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
    transition: transform 0.2s;
  `;
  
  btn.addEventListener('mouseenter', () => btn.style.transform = 'scale(1.1)');
  btn.addEventListener('mouseleave', () => btn.style.transform = 'scale(1)');
  btn.addEventListener('click', () => {
    chrome.runtime.sendMessage({ action: 'openPopup' });
  });
  
  document.body.appendChild(btn);
}

// 只在特定网站显示悬浮按钮（可选）
if (location.hostname.includes('zhihu.com') || 
    location.hostname.includes('xiaohongshu.com') ||
    location.hostname.includes('juejin.cn')) {
  addFloatingButton();
}

5. background.js（后台服务）

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'openPopup') {
    chrome.action.openPopup();
  }
});

// 安装时打开欢迎页
chrome.runtime.onInstalled.addListener(() => {
  chrome.tabs.create({
    url: 'https://github.com/yourname/ai-summary-extension#readme'
  });
});

如何部署上线

步骤1：本地测试

打开Chrome浏览器，输入 chrome://extensions/
打开右上角"开发者模式"
点击"加载已解压的扩展程序"
选择你的项目文件夹
看到插件图标说明成功

步骤2：准备素材

图标制作（不会设计？用这3个工具）：

IconKitchen - 自动生成各尺寸图标
Canva - 简单设计
Flaticon - 免费图标库

截图（必须）：

1280x800的展示图3-5张
展示核心功能界面

步骤3：发布到Chrome Web Store

注册开发者账号（$5一次性费用）
打包扩展程序（zip格式）
填写商店信息
提交审核（通常1-3天）

怎么赚到3000/月

收入来源1：付费版（主要收入，70%）

免费版限制：

每天只能总结5次
只能用简短模式

付费版（¥9.9/月或¥69/年）：

无限次数
所有总结模式
历史记录保存

技术实现：用Chrome的chrome.payments或接入Stripe/Paddle

收入来源2：广告（次要收入，20%）

在popup底部加一行推荐：

<div class="mt-3 p-2 bg-yellow-50 rounded text-xs text-center">
  <a href="https://your-affiliate-link.com" target="_blank" class="text-yellow-700">
    💡 推荐：DeepSeek API充值满100送20 →
  </a>
</div>

收入来源3：导流（10%）

在插件里引导用户：

关注公众号领"AI提示词大全"
加入微信群交流
后续卖课/咨询服务

程序员的优势（终于用上了）

相比设计师/产品经理：

我们能自己实现，不用求人
能快速迭代（一天改3版）
懂技术，能处理API对接

用这个插件练手的收获：

学会Chrome Extension开发（简历加分）
了解产品从0到1的流程
积累 monetization经验
每个月多3000块

开源代码

完整代码已上传： 📦 GitHub: github.com/yourname/ai-summary-extension

包含：

完整源码
图标素材
上架攻略PDF
monetization方案

Star过100，出视频教程。

你准备做哪个方向？

评论区聊聊： A. AI总结类（本文这个） B. 效率工具类（待办、笔记） C. 内容下载类（视频、图片） D. 其他（补充）

点赞最高的方向，我再写一篇完整教程。

本文约2500字，阅读时间8分钟。