chrome扩展中，content-script与background.js之间的通信

最新推荐文章于 2025-02-18 15:41:43 发布

valentinelzt

最新推荐文章于 2025-02-18 15:41:43 发布

阅读量1w

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/valentinelzt/article/details/107083244

版权

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

`background.js`发消息给`content-script`

background.js发送

// bg---->content
chrome.tabs.query({
  active: true,
  currentWindow: true
}, (tabs) => {
  let message = {
    //这里的内容就是发送至content-script的内容
    info: window.localStorage.getItem('isShow')
  }
  chrome.tabs.sendMessage(tabs[0].id, message, res => {
    console.log('bg=>content')
    console.log(res)
  })
})

content-script接收

// get popup2content info
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    console.log(request.info)
    // 这里是返回给bg的内容
    sendResponse('get the message')
})

`content-script`发消息给`background.js`

content-script发送

Chrome提供的大部分API是不支持在content_scripts中运行
sendMessage onMessage 是可以使用

chrome.runtime.sendMessage({
  info: isShow
}, res => {
  // 答复
  // alert(res)
})

background.js接收

chrome.runtime.onMessage.addListener((req, sender, sendResponse) => {
  const res = req.info
  console.log(res)
})

补充

background给popup发消息

// background.js中
function toPopup () {
  alert('to popup')
}

// popup.js中
const bg = chrome.extension.getBackgroundPage()
document.getElementById('btn').onclick = function () {
  bg.toPopup()
}

popup.html中


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">click</button>

    <script src="./popup.js"></script>
  </body>
</html>