从0开始开发一个chrome插件（3）

接着讲一下各个js之间的通信；

backgroud.js是中间商

backgroud.js可以和content_script.js之间相互通信
backgroud.js也可以和popup.js之间相互通信
content_script.js和popup.js之间不能直接通信；

backgroud.js和content_script.js通信：

通信的数据预先存储在本地存储中,方便存取

• 在backgroud.js中

//监听来自content_script的消息，接收消息并回复
chrome.runtime.onMessage.addListener(function(senderRequest,sender,sendResponse) {//接收到content
    console.log(senderRequest);
    if(senderRequest.fromContent&&senderRequest.fromContent=='getDB'){
        DBdata('get',function(res){//从本地取数据
            console.log(res);
            if(res.LocalDB){
                var LocalDB=res.LocalDB;
                switch(LocalDB.Content){
                    case 'TEST':
                        chrome.tabs.query({
                            active: true, 
                            currentWindow: true
                        }, function(tabs){
                            chrome.tabs.sendMessage(tabs[0].id, {LocalDB: LocalDB});//发送到content        
                        });
                        break;
                  
                    default:
                        break;
                }
            }else{
                chrome.tabs.query({
                    active: true, 
                    currentWindow: true
                }, function(tabs){
                    chrome.tabs.sendMessage(tabs[0].id, {msg: 'no data'});//发送到content        
                });
            }
        });
    }
    sendResponse('已接收')
});

从background.js直接发送消息给content.script.js

//给background发消息
chrome.runtime.sendMessage(chrome.runtime.id, {//当页面刷新时发送到bg
    fromContent: 'getDB'
});
//从数据库取数据发送到content_script.js
function sendToContent(){
    DBdata('get',function(res){
        var LocalDB=res.LocalDB;
        console.log(LocalDB)
        chrome.tabs.query({active: true, currentWindow: true
        }, function(tabs){
            chrome.tabs.sendMessage(tabs[0].id, {LocalDB:LocalDB},function(response){
                console.log(response)
            });//发送到content        
        });
    })
}

• content_script.js中

//监听background的消息
chrome.runtime.onMessage.addListener(function(senderRequest,sender, sendResponse) {//接收到bg
    console.log('demo已运行');
    var LocalDB=senderRequest.LocalDB;
    console.log(LocalDB);
    if(!!LocalDB){
        console.log(LocalDB.Content);
        switch(LocalDB.Content){
            case 'TEST':
                console.log('收到消息了');
                break;
            case 'content':
                console.log('执行操作');
                del()
                break;
        }
    }else{
        console.log(senderRequest)
    }
    sendResponse('已接收')
});

• popup.js中

给backgroud.js发消息，并监听background发来的消息

//初始化bgCommunicationPort
window.bgCommunicationPort = chrome.runtime.connect();
//给bg发消息
let startDel = document.getElementById("startDel");
startDel.addEventListener("click", async () => {
  let page_num = $('#page').val()
  bgCommunicationPort.postMessage({//发送到bg,键值可以自由设置
    Content :'content',//说明
    Page_num : page_num,//数据
    step : 0//步骤
  });
})

//打开popup时触发，读取之前存储的参数
$(document).ready(function(){
    bgCommunicationPort.postMessage({fromPopup:'getDB'});//向background发送消息
    bgCommunicationPort.onMessage.addListener(function(receivedPortMsg) {//监听background
        console.log(receivedPortMsg);//这是background发来的内容
        if(receivedPortMsg&&receivedPortMsg.Page_num){
        $('#page').val(receivedPortMsg.Page_num)
        }
    });
});

• backgroud.js监听popup.js的消息

popup可以通过backgroud.js中转发消息给content_script.js

//监听脚本 监听来自popup的消息
chrome.runtime.onConnect.addListener(function(port) {//接收到popup
    port.onMessage.addListener(function(receivedMsg) {//监听popup发来的内容receivedMsg
        if(receivedMsg.fromPopup&&receivedMsg.fromPopup=='getDB'){//如果接收到了getDB，这里读取数据并返回相当于初始化popup页面
            DBdata('get',function(res){
                port.postMessage(res.LocalDB);//发送到popup
            });
        }else{//如果不是，则说明是收到来自popup手动点击设置的数据，存入以用于popup打开时展示
            DBdata('set','',receivedMsg)
            //发送消息给content_script; 
            sendToContent(receivedMsg)            
        }
    })
});