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

- 日理万妓 2023-10-04 20:35 45阅读 0赞

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

如果想和content.js进行通讯，请看：[https://xiaoshen.blog.csdn.net/article/details/128830779][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：

![e3e5b93ad8d9464cb70cb0fb95db9dea.png][]

不过这次用的方法是：

const response = await chrome.runtime.sendMessage(tab.id);

在popue.html里面添加一个按钮：

![ee532854a6a644ffb93ef765030d4cc4.png][]

点击插件，然后可以看到：

![55f3821b41124e009ae2a78d3a782ca0.png][]

点击一下之后，右键打开插件的检查：可以看到日志输出

![8ca25014898c4399afb4e5d055dbd0b7.png][]

然后打开百度页面的检查：可以看到backgroun.js给content.js通讯也成功了

![676cea6868a04fb78f7ebb7ad2cddecc.png][]

至此说明，和background.js通讯圆满结束，哈哈哈哈哈哈

[https_developer.chrome.com_docs_extensions_reference_runtime]: https://developer.chrome.com/docs/extensions/reference/runtime/
[https_xiaoshen.blog.csdn.net_article_details_128830779]: https://xiaoshen.blog.csdn.net/article/details/128830779
[e3e5b93ad8d9464cb70cb0fb95db9dea.png]: https://img-blog.csdnimg.cn/e3e5b93ad8d9464cb70cb0fb95db9dea.png
[ee532854a6a644ffb93ef765030d4cc4.png]: https://img-blog.csdnimg.cn/ee532854a6a644ffb93ef765030d4cc4.png
[55f3821b41124e009ae2a78d3a782ca0.png]: https://img-blog.csdnimg.cn/55f3821b41124e009ae2a78d3a782ca0.png
[8ca25014898c4399afb4e5d055dbd0b7.png]: https://img-blog.csdnimg.cn/8ca25014898c4399afb4e5d055dbd0b7.png
[676cea6868a04fb78f7ebb7ad2cddecc.png]: https://img-blog.csdnimg.cn/676cea6868a04fb78f7ebb7ad2cddecc.png