chrome extensions插件中自己的popue.js和content.js进行通讯通信消息传递manifest V3版

古城微笑少年丶 2023-10-04 20:32 23阅读 0赞

有能力的可以看官网文档：[https://developer.chrome.com/docs/extensions/reference/tabs/\#method-sendMessage][https_developer.chrome.com_docs_extensions_reference_tabs_method-sendMessage]

想学习和background.js通讯的可以看：[https://xiaoshen.blog.csdn.net/article/details/128832758][https_xiaoshen.blog.csdn.net_article_details_128832758]

比如有一个需求：想要通过插件的方式，修改请求头里面的user-agent，比如修改为iphone的头，然后通过按钮切换的方式，可以通过点击就可以控制是否修改，或者是有一个输入框，输入什么值，就把user-agent修改为什么值。

但是问题出现了：修改user-agent只能使用declarativeNetRequest声明式网络请求，而且这种请求要放在background.js里面，可以查看文章：[https://xiaoshen.blog.csdn.net/article/details/128817318][https_xiaoshen.blog.csdn.net_article_details_128817318]

但是插件页面的内容和js是不能写在background.js里面的，那怎么办呢，就需要使用两端或者多端通讯实现了：

#### 这里的通讯其实又分为两种：一个是和content.js通讯，一个是和background.js通讯。 ####

任意一方和content.js通讯需要使用：比如popue.js或者background.js给content发消息

chrome.tabs.sendMessage(
      tabId: number,
      message: any,
      options?: object,
      callback?: function,
    )

任意一方和background.js通讯需要使用：比如popue或者content给background发消息

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

#### 这篇文章讲第一种：给content.js发消息通讯 ####

先注册content.js和background.js：![0e1af17c9312483a9c2de21215c1035d.png][]

然后在content.js里面开启监听消息的方法：content.js

chrome.runtime.onMessage.addListener(
      function (request, sender, sendResponse) {
        console.log('这是ContentScript脚本执行内容');
        console.log(sender.tab ?
          "from a content script:" + sender.tab.url :
          "from the extension");
        document.body.style.backgroundColor = 'orange';
        // 执行百度自动翻页到最后，并自动点击下一页的按钮
        console.log('开始执行自动滚动内容');
        const next = document.getElementsByClassName("n")
        let nextBtn = null
        for (const key in next) {
          if (Object.hasOwnProperty.call(next, key)) {
            const element = next[key];
            if (element.innerText === "下一页 >") {
              nextBtn = element
            }
          }
        }
        nextBtn.scrollIntoView(false)
        nextBtn.click()
        // sendBackgroun()
        if (request.greeting === "hello") {
          sendResponse({ farewell: "goodbye if " })
        } else {
          sendResponse({ farewell: "goodbye else " })
        }
      }
    );

在popup.html里面添加一个按钮，当点击这个按钮的时候，给content.js发一个消息：

![f50443eab1604a21ac69aa824e216b18.png][]

然后在popue.js里面开启按钮监听：

![396c832d167449409b9ea1d5b512846f.png][]

其中const response = await chrome.tabs.sendMessage(tab.id, \{ greeting: "hello" \}); 就是给content.js发送消息的。

最后看一下页面：

![aaa00baeeb8b40758308b370a54b5e5a.png][]

然后当点击这个按钮的时候，可以打开插件页面的控制台，看到log信息：

![fdf60d56c9fc48a88ead5bad6160e931.png][]

打开百度页面的控制台：就可以看到content.js输出的内容

![6d229d625ac74b938b333a0d5fa2feae.png][] 至此，说明popue和content通讯已经成功！！！！！

[https_developer.chrome.com_docs_extensions_reference_tabs_method-sendMessage]: https://developer.chrome.com/docs/extensions/reference/tabs/#method-sendMessage
[https_xiaoshen.blog.csdn.net_article_details_128832758]: https://xiaoshen.blog.csdn.net/article/details/128832758
[https_xiaoshen.blog.csdn.net_article_details_128817318]: https://xiaoshen.blog.csdn.net/article/details/128817318
[0e1af17c9312483a9c2de21215c1035d.png]: https://img-blog.csdnimg.cn/0e1af17c9312483a9c2de21215c1035d.png
[f50443eab1604a21ac69aa824e216b18.png]: https://img-blog.csdnimg.cn/f50443eab1604a21ac69aa824e216b18.png
[396c832d167449409b9ea1d5b512846f.png]: https://img-blog.csdnimg.cn/396c832d167449409b9ea1d5b512846f.png
[aaa00baeeb8b40758308b370a54b5e5a.png]: https://img-blog.csdnimg.cn/aaa00baeeb8b40758308b370a54b5e5a.png
[fdf60d56c9fc48a88ead5bad6160e931.png]: https://img-blog.csdnimg.cn/fdf60d56c9fc48a88ead5bad6160e931.png
[6d229d625ac74b938b333a0d5fa2feae.png]: https://img-blog.csdnimg.cn/6d229d625ac74b938b333a0d5fa2feae.png