开发替代YouTube点踩按钮的Chrome扩展，如何搭建公共可访问的数据存储服务？

核心开发建议 #

• 优先使用Manifest V3版本开发：目前Chrome商店已逐步淘汰Manifest V2，V3用service worker替代传统后台页，资源占用更低，完全符合最新上架规则，注意适配V3的权限申请、网络请求规则即可。
• 视频唯一标识处理：直接取YouTube URL中v参数作为视频唯一ID，所有和服务端交互的场景都用该ID作为唯一键，避免计数重复。
• 防抖与去重处理：给点踩按钮点击事件加300ms左右的防抖，避免用户重复点击导致重复提交请求；同时本地存储用户对已点踩视频的标记，服务端也要做用户+视频ID的唯一性校验，防止刷数据。
• 单页应用适配：YouTube是SPA结构，页面切换不会触发浏览器刷新，不能只在页面加载时执行点踩数渲染逻辑，需要监听DOM变化或路由跳转，每次加载新视频时都重新拉取对应点踩数渲染。
• 权限最小化配置：只申请必要权限，host_permissions仅配置https://www.youtube.com/*和你自己的服务端域名，其他权限按需申请，既降低用户权限顾虑，也更容易通过Chrome商店审核。
• 跨域请求处理：不要在内容脚本里直接发跨域请求给你的服务端，把所有网络请求都放到service worker中执行，扩展后台请求不受跨域限制，安全性和稳定性更高。
• 合规性处理：不要收集用户账号、浏览记录等隐私信息，用户唯一标识用随机生成的字符串存在本地chrome.storage.local即可，仅用来做同用户重复点踩的去重，符合隐私政策要求。

核心功能代码示例 #

1. 点踩数拉取与渲染逻辑（content.js 内容脚本） #

// 从当前URL提取视频ID
function getVideoId() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('v');
}

// 拉取点踩数并渲染到原生按钮位置
async function renderDislikeCount() {
  const videoId = getVideoId();
  if (!videoId) return;

  // 调用service worker发请求规避跨域
  const count = await chrome.runtime.sendMessage({
    type: 'GET_DISLIKE_COUNT',
    videoId
  });

  // 定位YouTube原生点踩按钮容器
  const dislikeBtn = document.querySelector('ytd-dislike-button-renderer, ytm-dislike-button-renderer');
  if (!dislikeBtn) return;

  // 插入自定义点踩数文本
  let countEl = dislikeBtn.querySelector('.custom-dislike-count');
  if (!countEl) {
    countEl = document.createElement('span');
    countEl.className = 'custom-dislike-count';
    countEl.style.marginLeft = '6px';
    countEl.style.color = 'var(--yt-spec-text-secondary)';
    dislikeBtn.appendChild(countEl);
  }
  countEl.textContent = count ?? 0;
}

// 监听DOM变化适配SPA页面切换
const domObserver = new MutationObserver(renderDislikeCount);
domObserver.observe(document.body, { childList: true, subtree: true });

// 页面初始加载执行一次
renderDislikeCount();

2. 点踩事件提交逻辑（content.js 补充） #

let submitLock = false;
// 在你已经实现的点踩按钮监听回调中补充以下逻辑
dislikeBtn.addEventListener('click', async () => {
  if (submitLock) return;
  const videoId = getVideoId();
  if (!videoId) return;

  submitLock = true;
  // 提交点踩数据
  await chrome.runtime.sendMessage({
    type: 'SUBMIT_DISLIKE',
    videoId
  });
  // 提交后刷新点踩数
  await renderDislikeCount();
  // 300ms后解除提交锁
  setTimeout(() => submitLock = false, 300);
});

3. Service Worker逻辑（background.js 后台脚本） #

const SERVER_API_BASE = 'https://你的服务端地址/api';
// 初始化生成用户唯一标识
chrome.runtime.onInstalled.addListener(async () => {
  const { userId } = await chrome.storage.local.get('userId');
  if (!userId) {
    // 生成随机用户ID，仅本地存储用于去重
    const randomId = Math.random().toString(36).slice(2);
    await chrome.storage.local.set({ userId: randomId });
  }
});

// 监听内容脚本消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  (async () => {
    if (msg.type === 'GET_DISLIKE_COUNT') {
      const res = await fetch(`${SERVER_API_BASE}/dislike/count?videoId=${msg.videoId}`);
      const result = await res.json();
      sendResponse(result.count);
    } else if (msg.type === 'SUBMIT_DISLIKE') {
      const { userId } = await chrome.storage.local.get('userId');
      await fetch(`${SERVER_API_BASE}/dislike/submit`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          videoId: msg.videoId,
          userId
        })
      });
      sendResponse('success');
    }
  })();
  return true; // 异步返回响应必须返回true
});

4. Manifest V3配置参考（manifest.json） #

{
  "manifest_version": 3,
  "name": "YouTube点踩数恢复工具",
  "version": "1.0.0",
  "description": "替代原生YouTube点踩功能，展示真实点踩数",
  "permissions": ["storage", "scripting"],
  "host_permissions": ["https://www.youtube.com/*", "https://你的服务端地址/*"],
  "content_scripts": [
    {
      "matches": ["https://www.youtube.com/watch*"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  }
}

内容的提问来源于stack exchange，提问作者CupCat