一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    chrome插件的通讯

    技术 285 2021-06-03 10:49

    1.先在contentScript里面创建一个端口,并且发送一个消息


    contentScript.js

          saveDetail() {
            var port = chrome.extension.connect({ name: "menu" });
            port.postMessage({ detail: { name: "hello!?~" } });
    
                    //这里主要是为了接受回传的值
            port.onMessage.addListener((msg) => {
              if (msg.res) {
                console.log(msg.res);
              }
            });
          },
        },
    

    2.然后在background.js里面接受,并且进行api访问,拿到结果再回传给contentScript


    background.js

    chrome.extension.onConnect.addListener(function (port) {
      console.log(port);
      if (port.name === "menu") {
        port.onMessage.addListener(function (msg) {
          if (msg.detail) {
            axios.get("http://biaoblog.cn:3000/blogData/mood").then((res) => {
              port.postMessage({ res });
            });
          }
        });
      }
    });
    

    3.添加popup向contentScript发送消息的实例


    popup.js

      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.sendMessage(tabs[0].id, { greeting: "hello" }, function (
          response
        ) {
          console.log(response.farewell);
        });
      });
    

    contentScript

      chrome.runtime.onMessage.addListener(function (
        request,
        sender,
        sendResponse
      ) {
        console.log(
          sender.tab
            ? "from a content script:" + sender.tab.url
            : "from the extension"
        );
        if (request.greeting == "hello") {
          sendResponse({ farewell: "I'm contentscript,goodbye!" });
        }
      });
    
    

    最后记得在manifest.json中添加background配置:

      "background": {
        "scripts": ["lib/axios.js", "background.js"]
      },
    


    4.poppup/background主动向contenscript发生消息

    background.js / poppup.js

        // 遍历所有已打开的tab 全部发送
        chrome.tabs.query({}, function (tabs) {
          // 遍历标签页数组
          for (var i = 0; i < tabs.length; i++) {
            // 向每个标签页的 content script 发送消息
            chrome.tabs.sendMessage(tabs[i].id, {
              greeting: "formBackground",
              data: shadeValue,
            });
          }
        });
    

     

    contentscript

    //监听从poppup 输入框的变化 并重新调整dom的阴影值
      chrome.runtime.onMessage.addListener(function (
        request,
        sender,
        sendResponse
      ) {
      if (request.greeting == "formBackground") {
          console.log(request);
          console.log("formBackground!!!");
        }
      });
    

    参考文档:http://chrome.cenchy.com/messaging.html

    https://blog.csdn.net/zhongping136/article/details/16869819?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control

    文章评论

    评论列表(0