谷歌浏览器插件 v3版本 backgound ,content,popup直接如何通信

555 阅读1分钟

这里就不过多的阐述谷歌浏览器插件的一些概念了,直接上他们如何通信

主要涉及两个api

chrome.runtime.onMessage.addListener

chrome.runtime.sendMessage

popup.js



//主动发消息chrome.tabs.sendMessage
domcument.addEventListener('click',async () => {
//这里权限需要配置 tabs
  const [tab] =await chrome.tabs.query({active:true,currentWindow:true})
  //发消息
  chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) {
        console.log(response);  // 向content-script.js发送请求信息
        }
    });

})



//接受消息
chrome.runtime.onMessage.addListener((request, _sender, sendResponse) => {
  const { val1, val2,url } = request;
  console.log('request',request);
});

content.js

这里是接受消息
chrome.runtime.onMessage.addListener(
  
  function(request, sender, sendMessage) {if (request.greeting == "hello"){
    let body = document.body.innerHTML
    sendMessage(body);
  } else {
    sendMessage("FUCK OFF");
  }
  });

background

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
 chrome.tabs.onActivated.addListener(() => {
          chrome.runtime.sendMessage({ val1: 1, val2: 2,message:message });
        });    

});