chrome extensions插件中popue.js和background.js进行通讯manifest V3版

最新推荐文章于 2024-10-06 00:13:18 发布

原创最新推荐文章于 2024-10-06 00:13:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #chrome #前端

HTML前端专栏收录该内容

741 篇文章

订阅专栏

本文介绍了如何在Chrome扩展中实现background.js与content.js之间的通信，通过chrome.runtime.sendMessageAPI进行交互，并提供了示例代码展示监听与响应消息的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有能力的可以看官方文档：https://developer.chrome.com/docs/extensions/reference/runtime/

如果想和content.js进行通讯，请看：https://xiaoshen.blog.csdn.net/article/details/128830779

其实原理都差不多，只是用的通讯方法不一样，和background.js进行通讯用的方法是：

chrome.runtime.sendMessage(
  extensionId?: string,
  message: any,
  options?: object,
  callback?: function,
)

首先要在background.js里面开启监听消息的方法：

  // 消息传递
  const user = {
    username: 'demo-user'
  };

  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    // 2. A page requested user data, respond with a copy of `user`
    console.log('这是background脚本onMessage', message);
    if (message === 'get-user-data') {
      sendResponse(user);
    } else {
      console.log('background脚本onMessage: else', message);
      sendContent(message)
    }
    sendResponse(user);
  });

  // 给content.js发送消息
  async function sendContent(tabID) {
    const response = await chrome.tabs.sendMessage(tabID, { greeting: "hello" });
    // do something with response here, not outside the function
    console.log("sendContentResponse---", response);
  }

然后在popue.js里面开启按钮的监听事件，然后发一个消息给background.js：