Chrome扩展Manifest V3中如何在Popup读取剪贴板？

权限配置（manifest.json） #

首先在你的manifest.json中配置对应权限：

• 若通过用户交互触发剪贴板读取（推荐方式），无需额外权限，Popup、Content Script等扩展页面默认属于安全上下文，可直接使用navigator.clipboard。
• 若需在后台（Service Worker）无交互读取剪贴板，需添加"clipboardRead"权限：

{
  "manifest_version": 3,
  "permissions": ["clipboardRead"],
  // 其他扩展配置（name、action等）
}

优先在Popup中实现 #

Popup是用户直接交互的界面，完全符合浏览器对剪贴板API的安全要求（必须由用户手势触发，比如点击），实现简单且无需复杂配置。

React代码示例 #

在Popup组件中添加按钮，触发剪贴板读取并填充表单：

import { useState } from 'react';

function PopupForm() {
  const [formValue, setFormValue] = useState('');

  const pasteFromClipboard = async () => {
    try {
      // 读取剪贴板文本内容
      const clipboardContent = await navigator.clipboard.readText();
      // 将内容填充至表单
      setFormValue(clipboardContent);
    } catch (err) {
      console.error('剪贴板读取失败:', err);
      alert('无法读取剪贴板，请检查浏览器权限或版本');
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // 执行表单提交逻辑
    console.log('提交内容:', formValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formValue}
        onChange={(e) => setFormValue(e.target.value)}
        placeholder="输入内容或点击粘贴剪贴板"
      />
      <button type="button" onClick={pasteFromClipboard}>
        从剪贴板粘贴
      </button>
      <button type="submit">提交</button>
    </form>
  );
}

export default PopupForm;

Background（Service Worker）场景的使用说明 #

仅当你需要无用户交互的后台剪贴板操作时才考虑使用Background，Chrome对此场景限制严格：

• 必须配置clipboardRead权限
• 只能在特定触发事件（如chrome.runtime.onMessage）中调用剪贴板API
• 无法直接操作Popup表单，需通过消息通信将剪贴板内容传递给Popup

Background示例（service-worker.js） #

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === 'FETCH_CLIPBOARD') {
    try {
      const text = await navigator.clipboard.readText();
      sendResponse({ success: true, content: text });
    } catch (err) {
      sendResponse({ success: false, error: err.message });
    }
    return true; // 保持消息通道开放至响应完成
  }
});

Popup中调用Background读取剪贴板 #

const fetchFromBackgroundClipboard = async () => {
  const response = await chrome.runtime.sendMessage({ type: 'FETCH_CLIPBOARD' });
  if (response.success) {
    setFormValue(response.content);
  } else {
    alert('读取失败：' + response.error);
  }
};

核心注意事项 #

• navigator.clipboard必须由用户手势触发（点击、触摸等），不能在组件挂载、自动渲染时调用，否则会被浏览器拦截。
• 确保扩展页面处于安全上下文（Popup、Content Script默认满足，无需额外配置）。
• 若用户禁用剪贴板权限，需捕获错误并给出友好提示。

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