google-chrome-extension - 注入(inject)的 iframe 和内容脚本之间的通信——通过后台页面传递消息

Question

我正在注入(inject) iframe在 tab .现在在iframe里面，根据用户的操作，我需要显示一些 error/warning/success notifications .但是我想在 tab 中显示这些通知不在 iframe .所以我需要在iframe之间进行交流和 content script .现在这些 notifications是根据用户的行为动态的，所以我想到了 message passing iframe之间和 content script通过 background page .

所以我所做的是从 iframe 发送消息至background .现在两个background page和 content script收听这些消息，但只收听 background page能够接收它们。在收到消息时，它会将它们反射回 sender tab .现在content script可以接收这些来自 background page 的消息.

现在我尝试使用 custom events但它没有用。

但我想知道任何其他比我正在做的更有效的方法？

编辑 : 这是相关代码

iframe.js:

    $scope.hideFrame = function(){                                        
       sendMessageToBackground("hideFrame");
    };

     $scope.checkIfFormValid = function(){
       if(!($scope.taskName === "" || $scope.group.selectedGroup === null )){
          $scope.addTask();
        }
        else{
          sendMessageToBackground("invalidForm");
        }
     };

    function sendMessageToBackground(msg){
       chrome.runtime.sendMessage({type: msg});
    }

背景.js:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
   switch (request.type){

                case "hideFrame":
                   chrome.tabs.sendMessage(sender.tab.id,{type:"hideFrame"});
                   break;
                case "invalidForm":
                   chrome.tabs.sendMessage(sender.tab.id,{type:"invalidForm"});
                   break;

            }      
 });

内容.js:

  chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
                switch (request.type){
                     case "invalidForm":
                         var n = noty({
                                        text        : ' Please fill all details',
                                        type        : 'error',
                                        layout      : 'topRight',
                                        timeout     :  10000,
                                        theme       : 'defaultTheme'
                                    });
                        break;

                    case "hideFrame":
                      $("#isolatedFrame").hide();
                      break;
                }      
    });

使用 window.parent.postMessage (不工作) :

iframe.js:

 function sendMessageToContent(msg){
             // chrome.runtime.sendMessage({type: msg});
             window.parent.postMessage({ type: "fromFrame", message: msg }, "*");
            }

内容.js:

window.addEventListener("message", function(event) {

  if (event.source != window)
    return;

  if (event.data.type && (event.data.type == "fromFrame")) {
    console.log("Content script received: " + event.data.message);

  }
}, false);

另外，当我添加 breakpoint在 window.parent.postMessage({ type: "fromFrame", message: msg }, "*");并尝试查看 window.parent对象， inspected target已断开连接。我不明白为什么会这样？？

Answer 1

是的，有一个更有效的方法来实现它 - 使用 tabs.sendMessage .

extensions cannot send messages to content scripts using this method. To send messages to content scripts, use tabs.sendMessage. (see runtime.sendMessage document )

这是代码。
iframe.js:

  chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });

内容.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    console.log('greeting:", request.greeting);
    sendResponse({farewell: "goodbye"});

也可以引用 https://developer.chrome.com/extensions/messaging#simple了解更多详情。
编辑
由于 iframe.js是内容脚本，您应该使用 chrome.runtime.sendMessage 发送消息并且不使用 chrome.tabs API。否则， chrome.tabs将是 undefined .