Question

我想在DOM中使用注入的脚本获取一些js变量。为此，我有两个文件，一个是将脚本注入DOM，另一个是通过值发送的文件。

getPageSource.js

var s = document.createElement('script');
    s.src = chrome.extension.getURL('script.js');
    (document.head||document.documentElement).appendChild(s);
    s.onload = function() {
    s.parentNode.removeChild(s);
};

function getTag(){
    document.addEventListener('ITAG_connectExtension', function(e) {
    return e.detail;
});}

chrome.extension.sendMessage({
    action: "getSource",
    source: getTag()
});

的script.js

var tagType = {};
tagType = itsClickPI;
setTimeout(function() {
    document.dispatchEvent(new CustomEvent('ITAG_connectExtension', {
        detail: tagType
    }));
}, 0);

然而，popup.js中的request.source未定义。

popup.js

chrome.extension.onMessage.addListener(function(request, sender) {
  if (request.action == "getSource") {
    message.innerText = request.source;
  }
});

你可以在这里给我点灯吗？

提前致谢。

Answer 1

问题在于getTag()功能 - 它是asynchronous and cannot possibly return e.detail。

即使这样，逻辑也是可疑的 - 你正在添加一个事件监听器，但是你在之前触发事件。

那么预期的流程是什么？

准备好接收回复。

注入发送数据的脚本（我们准备接收）。

将该数据发送到其他地方。

正确的事件链是：

function sendTag(tag) { // chrome.extension.sendMessage / onMessage are deprecated! chrome.runtime.sendMessage({ action: "getSource", source: tag }); } // 1. Get ready to listen document.addEventListener('ITAG_connectExtension', function(e) { // This code executes asynchronously only when the event is received, so: // 3. Send the data sendTag(e.detail); }); // 2. Inject the script var s = document.createElement('script'); s.src = chrome.extension.getURL('script.js'); (document.head||document.documentElement).appendChild(s); s.onload = function() { s.parentNode.removeChild(s); };

如果您需要多次执行此操作，则只需再次注入脚本（因为侦听器已准备就绪）。

同样，在接收方使用chrome.runtime.onMessage。

来自DOM chrome扩展的JS变量

1 个答案: