Question

我正在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});
    }

background.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;

            }      
 });

content.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 }, "*");
            }

content.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。

扩展不能使用此方法将消息发送到内容脚本。要将消息发送到内容脚本，请使用tabs.sendMessage。（请参阅runtime.sendMessage document）

这是代码。

iframe.js：

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

content.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和内容脚本之间的通信 - 通过后台页面传递消息

1 个答案: