Chrome扩展执行JS后函数未定义且变量无法传递问题排查

核心问题根源 #

1. copyToClipboard is not defined 报错：你在service-worker.js中直接调用func: copyToClipboard()，但该函数仅存在于侧边栏的sidepanel.js中，且service-worker的执行上下文与侧边栏完全隔离，无法直接调用。同时你错误地将侧边栏脚本注入到网页内容脚本中，混淆了网页内容脚本和扩展侧边栏页面的执行边界。
2. text变量无法传递：内容脚本的DOM环境与侧边栏的DOM环境相互独立，你无法在网页内容脚本中操作侧边栏的元素，变量也无法跨上下文直接共享。

修复后的代码 #

service-worker.js #

// 初始化右键菜单
chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        id: "addterm",
        title: "add term",
        contexts: ["selection"]
    });
});

chrome.contextMenus.onClicked.addListener(async (info, tab) => {
    if (info.menuItemId === "addterm") {
        const selectedText = info.selectionText;
        if (!selectedText) return;

        // 直接用Chrome API复制文本到剪贴板
        try {
            await chrome.clipboard.writeText(selectedText);
            console.log("文本已复制到剪贴板");
        } catch (err) {
            console.error("复制失败:", err);
        }

        // 将选中的文本存入本地存储，供侧边栏读取
        await chrome.storage.local.set({ currentTerm: selectedText });

        // 打开侧边栏
        await chrome.sidePanel.open({ windowId: tab.windowId });
    }
});

sidepanel.js #

const paragraph = document.getElementById("p");

// 页面加载时读取存储的文本并显示
async function loadSelectedTerm() {
    const { currentTerm } = await chrome.storage.local.get("currentTerm");
    if (currentTerm) {
        paragraph.textContent += currentTerm;
        // 可选：清空存储，避免下次打开侧边栏重复显示
        await chrome.storage.local.remove("currentTerm");
    }
}

// 页面初始化时执行
document.addEventListener("DOMContentLoaded", loadSelectedTerm);

sidepanel.html（无需修改） #

<!DOCTYPE html>
<html>
  <head>
    <title>My Sidepanel</title>
  </head>
  <body>
    <h1>All sites sidepanel extension</h1>
    <p id="p">text</p>
    <button id="btn">Change specialkeys</button>
    <script src="sidepanel.js"></script>
  </body>
</html>

关键修复说明 #

1. 简化剪贴板操作：使用Chrome官方提供的chrome.clipboard.writeTextAPI直接在后台完成复制，无需依赖内容脚本的复杂监听逻辑，更稳定可靠（需在manifest.json中添加"clipboardWrite"权限）。
2. 跨上下文数据传递：通过chrome.storage.local实现后台与侧边栏的数据共享，替代错误的跨DOM操作逻辑。
3. 明确上下文边界：移除错误的内容脚本注入逻辑，区分开网页内容脚本（网页环境）和扩展侧边栏页面（扩展独立环境）的执行范围。

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