Chrome扩展页面向跨域弹出窗口postMessage失败排查

问题根源拆解 #

你的代码存在三个核心问题，导致消息传递失败和元素操作报错：

• postMessage目标源错误：原代码用扩展自身URL作为目标源，浏览器会拦截跨域消息
• 内容脚本origin判断逻辑颠倒：错误过滤掉了来自扩展的合法消息
• 元素选择时机过早：弹窗页面元素尚未渲染完成就尝试操作，导致compBox为null

修正后的代码 #

1. 扩展页面JS修改 #

const pathTsr_1 = "../tsr/tsr_templates/mailbox_quota.txt";
const myTsr = new XMLHttpRequest();
myTsr.open("GET", pathTsr_1);
myTsr.send();

myTsr.addEventListener("load", () => {
    const linka = myTsr.responseText;

    document.getElementById("linkTSR_BT").addEventListener("click", () => {
        navigator.clipboard.writeText(linka);
        const tooltip = document.getElementById("myTooltip");
        tooltip.innerHTML = "COPIED!";
    });

    document.getElementById("linkTSR_BT_TSR").addEventListener("click", () => {
        const receiver = window.open('https://teams.somepage.com/share?', 'ms-teams-share-popup', 'width=700,height=600');
        
        // 用轮询替代不可靠的load事件监听，确保页面加载完成
        const checkLoaded = setInterval(() => {
            if (receiver && receiver.document.readyState === "complete") {
                clearInterval(checkLoaded);
                // 明确设置targetOrigin为弹窗域名，避免消息被拦截
                receiver.postMessage(linka, "https://teams.somepage.com");
            }
        }, 200);
    });
});

function outFunc() {
    document.getElementById("myTooltip").innerHTML = "Copy to clipboard";
}

2. 内容脚本修改 #

window.addEventListener("message", (event) => {
    // 验证消息来自你的扩展，避免接收恶意消息
    const extensionOrigin = `chrome-extension://${chrome.runtime.id}`;
    if (event.origin !== extensionOrigin) return;

    // 延迟重试确保目标元素存在
    const setComposeText = () => {
        const compBox = document.querySelector("#share-form-compose > p");
        if (compBox) {
            compBox.textContent = event.data;
        } else {
            setTimeout(setComposeText, 200);
        }
    };
    setComposeText();
});

额外注意事项 #

• 确认manifest.json中已正确声明内容脚本权限：

  "content_scripts": [
      {
          "matches": ["https://teams.somepage.com/*"],
          "js": ["your-content-script.js"],
          "run_at": "document_idle"
      }
  ]
  

• 如果弹窗包含多层iframe，需要在对应的iframe中注入内容脚本，或者调整消息监听逻辑
• 永远不要用*作为postMessage的targetOrigin，必须指定明确的目标域名，保障安全性

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