从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(tabs0.id, {LocalDB: LocalDB});//发送到content }); break;

代码语言：txt复制

                default:

代码语言：txt复制

                    break;

代码语言：txt复制

        }else{

代码语言：txt复制

            chrome.tabs.query({

代码语言：txt复制

                active: true,

代码语言：txt复制

                currentWindow: true

代码语言：txt复制

            }, function(tabs){

代码语言：txt复制

                chrome.tabs.sendMessage(tabs[0].id, {msg: 'no data'});//发送到content

代码语言：txt复制

});

代码语言：txt复制

});

代码语言：txt复制

sendResponse('已接收')

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

代码语言：javascript复制

//给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中

代码语言：javascript复制

//监听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发来的消息

代码语言：javascript复制

//初始化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

代码语言：javascript复制

//监听脚本 监听来自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)            
        }
    })
});

javascript 编程算法 httpchrome 浏览器插件

0 人点赞