Popup HTML page doesnot show messages unless dev tools are open

Question

Popup HTML page doesnot show messages unless dev tools are open

60 views Asked by novice_kd At 21 November 2022 at 10:17

I am trying to pass message from my content script to Chrome extension Popup HTML page. The messages are rendered in the popup page only when I open dev tools. It works perfectly fine. Here is the script:

Content JS:

 chrome.runtime.sendMessage(message);

POP UP:

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) 
     { document.getElementById("text").innerHTML+="<br\>"+request;

     })

I have tried another approach to which it works but then messages in the popup page doesnot append. So i am stuck in both the approach.

Content JS: The "message" is based on few case conditions where it keeps changing and I want to append all the values and show it in the popup page, it works fine in 1st approach ,but here appending doesnot work.Only the 1st element shows up,other responses simply overwrite it.

 chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
 if (request.greeting === "hello")
{
 sendResponse({getmessage: message});}
});

POP Up page:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response)
{
const node = document.createElement("li");
const textnode = document.createTextNode(response.farewell);
node.appendChild(textnode);
document.getElementById("MyData").appendChild(node);

});
});

I have tried the two approaches mentioned in the description but I am stuck in both approach. The first approach needs the dev tool to be opened first and the 2nd approach doesnot append the 2nd message to the 1st one while displaying data in the pop up page.

Original Q&A

There are 1 answers

**novice_kd** · Answer 1 · 2022-11-21T13:04:00+00:00

Pop up:

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

const node = document.createElement("li");
const textnode = document.createTextNode(response.farewell);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
});
});

chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) 

  { 
document.getElementById("text").innerHTML+="<br\>"+request;
 });

POPUP HTML:


<!DOCTYPE html>
<html>

<head>
<style>
    body {
      width: 300px;height: 100px
    }
    </style>

</head>

<body>
</input>

<div id="text"> </div>
<ul id="myList">
 </ul>
<script type="text/javascript" src="popup.js"></script>

</body>

</html>

Content JS:

chrome.runtime.onMessage.addListener(
 function(request, sender, sendResponse) {
 if (request.greeting === "hello")
{
 sendResponse({farewell: "hello"});}
});



window.addEventListener('mouseup', ClickFunction);

function ClickFunction() {
const labels = document.getElementsByTagName("label");
let l=0;
for (const label of labels) {
  label.addEventListener('click', function onClick()
 {
     txt =  label.innerText;
     b=this.text;
    message='Field: '+txt+';';
    console.log(message);
 
chrome.runtime.sendMessage(message);

  });
}


}

Manifest:

{
  "manifest_version": 3,
  "name": "test1",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
     ],
     "js": ["content.js"]
   }
 ],

 "permissions": [
    "storage",
    "activeTab",
    "scripting"
],
  
  "action": {

    "default_popup": "popup.html",
    
  }
}

TechQA.

Popup HTML page doesnot show messages unless dev tools are open

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in GOOGLE-CHROME-EXTENSION

Related Questions in MESSAGE-PASSING

Popular Questions

Popular Tags

Trending Questions