Chrome扩展中如何正确导出API函数内的选中文本变量？

1. API返回值误解：chrome.contextMenus.onClicked.addListener的返回值是用于移除监听器的函数，而非回调函数中return的文本。你导出的string本质是这个移除函数，自然无法获取选中文本。
2. 上下文隔离限制：Chrome扩展的后台Service Worker与操作DOM的内容脚本（你的main.js）属于完全隔离的执行上下文，不能通过ES模块的import/export直接共享变量，这是扩展架构的核心设计规则。

要实现后台获取选中文本并传递给内容脚本，需使用Chrome扩展的消息传递机制或存储API，以下是两种可行方案：

方案1：消息传递（实时传递） #

后台脚本 eventPage.js #

// 初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "saveSelection",
    title: "保存选中文本",
    contexts: ["selection"]
  });
});

// 监听右键菜单点击，发送文本到当前标签页的内容脚本
chrome.contextMenus.onClicked.addListener((onClickedData) => {
  if (onClickedData.menuItemId === "saveSelection") {
    const selectedText = onClickedData.selectionText;
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {
        type: "SELECTED_TEXT",
        text: selectedText
      });
    });
  }
});

内容脚本 main.js #

// 存储选中文本的变量
let selectedText = "";

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "SELECTED_TEXT") {
    selectedText = message.text;
  }
});

// 点击事件中使用文本
const clickMe = document.getElementById("clickMe");
clickMe.addEventListener('click', () => {
  console.log("选中的文本：", selectedText);
});

方案2：Chrome存储API（持久化存储） #

适合需要持久保存文本，或后续延迟读取的场景：

后台脚本 eventPage.js #

chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "saveSelection",
    title: "保存选中文本",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((onClickedData) => {
  if (onClickedData.menuItemId === "saveSelection") {
    chrome.storage.local.set({selectedText: onClickedData.selectionText});
  }
});

内容脚本 main.js #

const clickMe = document.getElementById("clickMe");
clickMe.addEventListener('click', async () => {
  // 从存储中读取文本
  const result = await chrome.storage.local.get("selectedText");
  console.log("选中的文本：", result.selectedText || "未选中任何文本");
});

必要的Manifest配置补充 #

确保你的manifest.json包含以下权限和内容脚本配置：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "eventPage.js",  
    "type": "module"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你需要注入的网站规则
      "js": ["main.js"]
    }
  ],
  "permissions": ["contextMenus", "storage", "tabs"]
}

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