chrome分机通讯网页->content_script->popup.js

Question

我在写 chrome 带通信的扩展时遇到了问题。关于如何使用此扩展的几句话：

是生成对象的页面（不是扩展的一部分）。这些对象将被发送到扩展程序，在那里它们将以以下形式列出并显示给用户：simply list

好了，进入正题。代码如下所示：

manifest.json

"name": "Img_",
"version": "1.0",

"browser_action": {
"default_icon":"icon.png",
"default_popup":"popup.html"
},

"permissions": [
"activeTab", "tabs", "<all_urls>", "http://*/*",
"https://*/*",
"https://www.google.com/*",
"http://www.google.com/*",
"storage"

],

"externally_connectable": {
"matches": ["The address of the external server to which we are connecting"]
},

"content_scripts": [
{
  "matches": ["*://*/*"],
  "js": ["content_script.js"],
  "run_at": "document_start"

}
]

}

网页（不是扩展的一部分）

<body>
<button id="theButton"> klik </button>

 <script>

// Here is the code that will be responsible for generating the 
  // objects to be sent

 document.getElementById("theButton").addEventListener("click",
     function() {
       window.postMessage({ type: "FROM_PAGE", value: {name: "xyx", age: 111}}, "*");
         window.postMessage({ type: "FROM_PAGE", value: {name:"ccv", age: 222}}, "*");

     }, false);
 </script>

content_script:

_Img= {
storage: []
}



window.addEventListener("message", function(event) {


if (event.source != window)
    return;

if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Connection works!! ");

    __Img.storage.push(event.data.value)
    console.log(event.data.value);
    console.log(_Img.storage) // It shows the values that sent the page without problem

    console.log("we have  "+ _Img.storage.length + " instance") // show 0 

 List= _Img.storage.forEach(function(element) {
      console.log(element);
    return
   }); // List the values that the page sent - works ok



};

}, false);


  console.log(_Img) // This is displayed before clicking on the button - so _Img is obviously empty

看起来像：console

popup.js

$(function () {

demoP = document.getElementById("demo");
result = document.getElementById("app");


const Result = _Img.storage.length;

result.innerText = result.innerText + "Instance -" + Result

const List =_Img.storage.forEach(myFunction)

function myFunction(item) {

    demoP.innerHTML = demoP.innerHTML + item + "<br>";
}


  }); // Here nothing is displayed - for popup.js _Img is still empty

Popup.js 可以访问 _Img（如果我手动将一些值输入到存储中——如下例所示——这个列表没有问题——看起来像上面显示的简单列表）

content.script:

_Img= {
    storage: [{name: "opop", age: 121}, {name:"qwe", age: 333}]
}

window.addEventListener("message", function(event) { Here's the code 
as above - no changes } )

如何popup.js更新_Img状态？如何让popup.js在content_script收到消息后才能访问_Img？

或者，我可以更改网页以将所有 _Img 发送到 content_script:

 <script>
 _Img = {
     storage: []
 }


 document.getElementById("theButton").addEventListener("click",
     function() {
        window.postMessage({ type: "FROM_PAGE", value: _Img.storage}, "*");


     }, false);
 </script>

然后内容脚本如下所示：

window.addEventListener("message", function(event) {

    if (event.source != window)
        return;

    if (event.data.type && (event.data.type == "FROM_PAGE")) {
         console.log("we have a connection");

       console.log(event.data.value);
       console.log("we have"+ event.data.value.length + " instance")

      List= event.data.value.forEach(function(element) {
         console.log(element);
        return
       });



  };

}, false);

-但我不知道这有什么帮助:)

Answer 1

好的，万岁 - 问题解决了！我查看了 Stack Overflow 并在找到了它 - @Xan 谢谢！ -多亏了这个 post 我解决了我的问题

刚刚添加了背景和砰！它按照我想要的方式工作。

这是代码 - 也许有一天会有人帮助它：

manifest.json:

{
 "manifest_version": 2,


"name": "Img",
"version": "1.0",

"browser_action": {
"default_icon":"icon.png",
"default_popup":"popup.html"
},

"permissions": [
"activeTab", "tabs", "<all_urls>", "http://*/*",
"https://*/*",
"https://www.google.com/*",
"http://www.google.com/*",
"storage"

],
"background": {
"scripts": ["background.js"],
"persistent" : false

},

"externally_connectable": {
"matches": ["The address of the external server to which we are connecting"]
},

 "content_scripts": [
{
  "matches": ["*://*/*"],
  "js": ["content_script.js"],
  "run_at": "document_start"

}
]

}

example.html（不是扩展的一部分）：

<script>

    _Img = {
  storage: [{name: "opop", age: 121}, {name:"qwe", age: 333}]
 }



 document.getElementById("theButton").addEventListener("click",
     function() {
         window.postMessage({ type: "FROM_PAGE", value: _Img.storage}, "*");




     }, false);

backkground.js:

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) {
       switch(message.type) {
           case "setValidator":
            temp = message.validator;
            break;
           case "getValidator":
            sendResponse(temp);
            break;
        default:
            console.error("Unrecognised message: ", message);
    }
}

);

content_script.js:

window.addEventListener("message", function (event) {

if (event.source != window)
    return;

if (event.data.type && (event.data.type == "FROM_PAGE")) {
    console.log("Connection works! ");
    console.log(event.data.value);
    console.log(event.data.value.length + " instancc")

    _ImgG= event.data.value;

    chrome.runtime.onMessage.addListener(
        function(message, sender, sendResponse) {
            switch(message.type) {
                case "getValidator":
                    sendResponse(_ImgG);
                    break;
                default:
                    console.error("Unrecognised message: ", message);
            }
        }
    );
    List = event.data.value.forEach(function (element) {
        console.log(element.name);
        return
    });

}
;

}, false);

popup.js:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) 
{
chrome.tabs.sendMessage(tabs[0].id, {type: "getValidator"}, 
function(validator) {
    if(typeof validator == "undefined") {
        console.log("error")
        if(chrome.runtime.lastError) {
            console.log("counldn't talk")
        }
    } else {
        console.log (validator)
        result = document.getElementById("app");
        result.innerText = result.innerText + "Instancji: " + validator.length

        demoP = document.getElementById("demo");
        const List = validator.forEach(myFunction)

        function myFunction(item) {

            demoP.innerHTML = demoP.innerHTML + item.name + "<br>";
        }
    }
});
  });

chrome分机通讯网页->content_script->popup.js

chrome extension communication web page -> content_script -> popup.js

javascript

message-passing

google-chrome-extension