美文网首页chrome扩展
[chrome扩展开发] 消息传递

[chrome扩展开发] 消息传递

作者: w_w_wei | 来源:发表于2018-08-30 17:56 被阅读0次

    扩展主要由3部分组成。

    • popup
    • content_scripts
    • background

    消息传递,一般指3部分之间发送接收消息。

    消息的监听机制

    监听消息都是一样的。

    chrome.extension.onMessage.addListener(
        function(request, sender, sendResponse) {
            console.log('收到消息',request);
            sendResponse("回答处理结果");
        }
    );
    

    他们是怎么相互通信的?

    1. popup 发送消息到 background
    chrome.runtime.sendMessage({from: "popup"},   
         function(response) {
              console.log(response);
          }
    );
    
    image.png
    1. background 发送消息到 popup
    chrome.runtime.sendMessage({greeting: "dd"},                                                
                function(response) {
                    console.log(response);
                }
    );
    
    1. content_scripts 发送消息到 background
    chrome.runtime.sendMessage({from: "content_scripts"}, function(response) {
            console.log(response);
        });
    
    1. content_scripts 发送消息到 popup
    chrome.runtime.sendMessage({from: "content_scripts"}, function(response) {
            console.log(response);
        });
    
    1. popup 发送消息到 content_scripts
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
          {
              chrome.tabs.sendMessage(tabs[0].id, {from:'popup',to:'content_scripts'}, function(response)
              {
                  console.log(response);
              });
          });
    
    1. background 发送消息到 content_scripts
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
          {
              chrome.tabs.sendMessage(tabs[0].id, {from:'background',to:'content_scripts'}, function(response)
              {
                  console.log(response);
              });
          });
    

    注意事项

    1. content_scripts 发送消息 popupbackground 都可以收到

    相关文章

      网友评论

        本文标题:[chrome扩展开发] 消息传递

        本文链接:https://www.haomeiwen.com/subject/icrdwftx.html