Javascript chrome扩展中的内容脚本和背景页面之间的消息传递无法正常工作_Javascript_Google Chrome Extension

Javascript chrome扩展中的内容脚本和背景页面之间的消息传递无法正常工作

javascript google-chrome-extension

Javascript chrome扩展中的内容脚本和背景页面之间的消息传递无法正常工作,javascript,google-chrome-extension,Javascript,Google Chrome Extension,我把代码贴在下面： manifest.json { "manifest_version": 2, "name": "Demo", "description": "all_frames test", "version": "1.0", "background": { "scripts": ["background.js"] }, "content_scripts": [{ "matches": ["*://*/*"],

我把代码贴在下面：

manifest.json

{
  "manifest_version": 2,

  "name": "Demo",
  "description": "all_frames test",
  "version": "1.0",

  "background": {
    "scripts": ["background.js"]
  },

  "content_scripts": [{
        "matches":    ["*://*/*"],
        "js":         ["content.js"],
        "all_frames": true
    }],

  "permissions": [
          "tabs",
          "*://*/*"
   ]
}

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var tabStatus = changeInfo.status;

    if (tabStatus == 'complete') {

        function return_msg_callback() {
            console.log('Got a msg from cs...')
        }

        chrome.tabs.sendMessage(tabId, {
            text: 'hey_cs'
        }, return_msg_callback);
    }

});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    .............
    // before Chrome 49 it was chrome.webNavigation.getAllFrames(tabId, .....
    // starting with Chrome 49 tabId is passed inside an object
    chrome.webNavigation.getAllFrames({tabId: tabId}, function(details) {
        details.forEach(function(frame) {
            chrome.tabs.sendMessage(
                tabId,
                {text: 'hey_cs'},
                {frameId: frame.frameId},
                function(response) { console.log(response) }
            );
        });
    });
});

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    console.log("Received %o from %o, frame", msg, sender.tab, sender.frameId);
    sendResponse("Gotcha!");
});

content.js

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == 'hey_cs')) {
        console.log('Received a msg from bp...')
        sendResponse('hey_bp');
    }
});

chrome.runtime.sendMessage({text: "hey"}, function(response) {
    console.log("Response: ", response);
});

然后，如果我访问一个包含多个跨源iFrame的站点，例如，您会看到页面中的所有iFrame都从后台页面接收消息，但只有一个iFrame能够响应。这是正常的行为吗

提前感谢您的回答。

您只发送了一条带有直接回调的消息，因此Chrome自然可以只使用此响应回调一次（它是与一个实体的一次性连接，无论是页面还是iframe）

解决方案1：向每个iframe显式发送多条消息：

manifest.json，其他权限：

"permissions": [
    "webNavigation"
],

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var tabStatus = changeInfo.status;

    if (tabStatus == 'complete') {

        function return_msg_callback() {
            console.log('Got a msg from cs...')
        }

        chrome.tabs.sendMessage(tabId, {
            text: 'hey_cs'
        }, return_msg_callback);
    }

});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    .............
    // before Chrome 49 it was chrome.webNavigation.getAllFrames(tabId, .....
    // starting with Chrome 49 tabId is passed inside an object
    chrome.webNavigation.getAllFrames({tabId: tabId}, function(details) {
        details.forEach(function(frame) {
            chrome.tabs.sendMessage(
                tabId,
                {text: 'hey_cs'},
                {frameId: frame.frameId},
                function(response) { console.log(response) }
            );
        });
    });
});

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    console.log("Received %o from %o, frame", msg, sender.tab, sender.frameId);
    sendResponse("Gotcha!");
});

解决方案2：修改后台脚本逻辑，使内容脚本成为通信的主导，并让它在加载消息后发送消息

content.js

/* Listen for messages */
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    /* If the received message has the expected format... */
    if (msg.text && (msg.text == 'hey_cs')) {
        console.log('Received a msg from bp...')
        sendResponse('hey_bp');
    }
});

chrome.runtime.sendMessage({text: "hey"}, function(response) {
    console.log("Response: ", response);
});

background.js

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    var tabStatus = changeInfo.status;

    if (tabStatus == 'complete') {

        function return_msg_callback() {
            console.log('Got a msg from cs...')
        }

        chrome.tabs.sendMessage(tabId, {
            text: 'hey_cs'
        }, return_msg_callback);
    }

});

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    .............
    // before Chrome 49 it was chrome.webNavigation.getAllFrames(tabId, .....
    // starting with Chrome 49 tabId is passed inside an object
    chrome.webNavigation.getAllFrames({tabId: tabId}, function(details) {
        details.forEach(function(frame) {
            chrome.tabs.sendMessage(
                tabId,
                {text: 'hey_cs'},
                {frameId: frame.frameId},
                function(response) { console.log(response) }
            );
        });
    });
});

chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    console.log("Received %o from %o, frame", msg, sender.tab, sender.frameId);
    sendResponse("Gotcha!");
});

chrome.tabs.executeScript(tabId, {file: "script.js"}, function(results) {
  // Whichever is returned by the last executed statement of script.js
  //   is considered a result.
  // "results" is an Array of all results - collected from all frames
})

// script.js
/* ... */
result = { someFrameIdentifier: ..., data: ...};
// Note: you shouldn't do a "return" statement - it'll be an error,
//   since it's not a function call. It just needs to evaluate to what you want.

script.js

getAllFrames

chrome.webNavigation.getAllFrames（{tabId:tabId}，函数（详细信息）…

frameId