促使我自行构建解决方案的剪贴板问题

Source: Dev.to

我又一次丢失了剪贴板的内容。我复制了一段复杂的 SQL 查询，切换到另一个标签页后又复制了别的东西，结果查询内容不见了，只能凭记忆重新写。

这种情况屡屡发生。作为一名经常在笔记本和台式机之间切换的远程工作者，我会在一台设备上复制内容，然后切换到另一台设备，结果内容又消失了。我尝试过几款剪贴板管理工具，但都不符合我的工作流。

于是我自己动手写了一个。下面是我学到的经验、遇到的挑战以及如果再来一次我会做的不同之处。

痛点

• 跨设备丢失 – 在笔记本上复制代码片段，切换到台式机时就没了。
• 意外覆盖 – 复制邮件模板后切换标签页，再复制别的东西，导致模板丢失。
• 在历史记录中滚动 – 需要在 50 条剪贴板项目中滚动才能找到每天使用的那个。

我尝试过的工具

大多数扩展只保存历史记录。我必须在几十个项目中滚动才能找到每天粘贴的电子邮件签名。这违背了初衷。

我的解决方案：自定义浏览器扩展

功能

• 在 Chrome 和 Edge 浏览器之间同步剪贴板历史。
• 学习我最常粘贴的内容并优先显示这些项目。
• 提供右键上下文菜单，快速访问。
• 在 Google Docs、Reddit、Notion 等复杂网站上也能正常工作。

关键区别 – 它跟踪我实际粘贴的内容，而不仅仅是点击的内容。经常粘贴的项目会自动移到顶部。

技术深度解析

Clipboard API 的怪癖

// This works in some contexts, not others
navigator.clipboard.readText().then(text => {
  // But what if the page doesn't have focus?
  // What if it's a content script?
});

问题

• 需要 HTTPS 或 localhost。
• 内容脚本并不总是能直接访问剪贴板。
• 权限处理因上下文而异。

解决方案 – 在内容脚本和后台 Service Worker 之间使用消息传递，并提供回退方案。

Service Worker 生命周期

// This state gets lost when the service worker dies
let clipboardHistory = [];

// Had to persist everything
chrome.storage.local.set({ clipboardHistory });

挑战

• Service Worker 随时可能被终止。
• 内容脚本注入的时机问题。
• CSP 限制会阻止某些做法。

解决方案 – 将状态持久化到 chrome.storage.local，并在启动时重新初始化。

在复杂站点中粘贴

组合方案

async function pasteText(element, text) {
  // Try modern approach first
  try {
    element.focus();
    await navigator.clipboard.writeText(text);
    element.dispatchEvent(new ClipboardEvent('paste'));
    return true;
  } catch (e) {
    // Fallback to execCommand
    try {
      element.focus();
      document.execCommand('insertText', false, text);
      return true;
    } catch (e2) {
      // Last resort: direct manipulation
      element.textContent = text;
      return true;
    }
  }
}

实时同步 vs. 轮询

轮询（我想避免的方式）

setInterval(async () => {
  const latest = await fetchLatestClipboard();
  // Check for changes...
}, 5000); // Too slow, or too resource‑intensive

解决方案：实时订阅（Supabase 示例）

const subscription = supabase
  .channel('clipboard-changes')
  .on('postgres_changes', {
    event: 'INSERT',
    schema: 'public',
    table: 'clipboard_items'
  }, payload => {
    // Handle new item instantly
    updateLocalClipboard(payload.new);
  })
  .subscribe();

挑战

• 处理连接中断。
• 当同一条目在多台设备上被更新时的冲突解决。
• 管理订阅的生命周期。

跨浏览器兼容性

抽象层

const browserAPI = {
  storage: {
    local: {
      get: key => {
        if (typeof chrome !== 'undefined' && chrome.storage) {
          return new Promise(resolve => {
            chrome.storage.local.get(key, resolve);
          });
        } else if (typeof browser !== 'undefined') {
          return browser.storage.local.get(key);
        }
      },
      set: items => {
        if (typeof chrome !== 'undefined' && chrome.storage) {
          return new Promise(resolve => {
            chrome.storage.local.set(items, resolve);
          });
        } else if (typeof browser !== 'undefined') {
          return browser.storage.local.set(items);
        }
      },
      // ...similar for remove, clear, etc.
    }
  }
};

经验教训

• 持久化所有内容 – 假设 Service Worker 随时可能被终止。
• 从简开始 – 先实现仅本地存储的 MVP，然后再添加同步。
• 跟踪真实使用情况 – 监控粘贴事件，而不仅仅是点击。
• 在所有目标浏览器上测试 – Chrome、Firefox、Edge 的行为各不相同。
• 提前规划冲突解决方案 – 否则后期会成为主要痛点。
• 从一开始就加入健壮的错误处理 – 重试、回退逻辑等。
• 提前构建测试基础设施 – 单元测试 + 集成测试能节省时间。
• 尽早获取用户反馈 – 避免长时间孤立开发。

Source:

我仍在探索的未解之问

1. 剪贴板权限 – 在不同浏览器的扩展中，如何可靠地处理它们？
2. 粘贴兼容性 – 对于复杂站点（Google Docs、Notion、CodePen 等），有什么更好的方案？
3. 实时同步架构 – 如何以最小的延迟和冲突，实现剪贴板数据的最稳健同步？
4. Manifest V3 Service Worker 生命周期 – 持久化状态和处理重启的最佳实践是什么？

如果你已经解决了其中的任何一个问题，欢迎分享你的想法！

最佳实践？

如何高效地在多个浏览器上测试扩展？

如果你构建过类似的东西或有想法，期待听到你的意见。

使用了几个月后，它运行良好。我很少丢失剪贴板内容，常用项目也能快速出现。虽然并不完美，但已符合我的工作流。

如果你想尝试，它已在 Chrome 和 Edge 上可用。更重要的是，我想听到：

• 你是如何解决类似问题的
• 在浏览器扩展开发中遇到的挑战
• 哪些功能会让它真正有用

这仍在持续开发中，我也在不断学习。

作者： Anurag G.
LinkedIn：