Chrome Extension - Pass Value from background to popup

1,610 views
Skip to first unread message

Thaha AW

unread,
Sep 12, 2023, 3:56:31 PM9/12/23
to Chromium Extensions
0

I'm developing a Chrome extension where my content.js extracts data from a webpage and sends it to background.js using chrome.runtime.sendMessage. The data is correctly received and logged in background.js.

Now, I want to pass this data from background.js to popup.js and display it in my extension's popup HTML (popup.html). However, I'm encountering the error "Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist" when trying to send the data from background.js to popup.js.

How can I effectively send the data from background.js to popup.js and display it in popup.html?

Manifest - Relevant Portion

"action": { "default_popup": "popup.html" }, 
 "permissions": ["activeTab"], 
 "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] }], 
 "background":{ "service_worker": "background.js" }

Content.JS

const name = document.querySelector('#name'); chrome.runtime.sendMessage(name);

Background.JS

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {       console.log(message); chrome.runtime.sendMessage(message); 
});

POPUP.JS

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) { console.log("Message received in popup.js:", message); 
 document.getElementById("name").textContent = message; 
 });

POPUP.HTML

<!DOCTYPE html> 
<html>
 <head> 
 <title></title> 
</head>
 <body> 
 <p id="name"></p> 
 <script src="popup.js"></script> 
</body> 
</html>

Browser Extenstion

unread,
Sep 12, 2023, 5:02:22 PM9/12/23
to Chromium Extensions, Thaha AW
A popup must be open to receive the message.
So you need to open popup --> send message to background --> receive the data

Thaha AW

unread,
Sep 12, 2023, 5:35:17 PM9/12/23
to Chromium Extensions, Browser Extenstion, Thaha AW
The popup is open. 

Toby Dux

unread,
Sep 13, 2023, 4:03:11 PM9/13/23
to Chromium Extensions, Thaha AW, Browser Extenstion
In content.js / background.js
store the state in chrome.storage.local

In popup.js
since it reloads each time it is opened, on load, loop through items in chrome.storage.local to set UI state
while it remains open, add a listener to chrome.storage.onChanged to update UI state

wOxxOm

unread,
Sep 14, 2023, 4:56:10 AM9/14/23
to Chromium Extensions, Toby Dux, Thaha AW, Browser Extenstion
There are two problems.

1. DOM elements cannot be sent via messaging because it's not JSON-compatible, only their individual properties can be sent like textContent.

2. The content script runs when the page loads which may happen before the popup is open, so the solution is to make the popup initiate messaging or simply use executeScript without declaring a dedicated content script:

(async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const [{ result }] = await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: () => document.querySelector('#name')?.textContent,
  });
  document.getElementById('name').textContent = result;
})();


Reply all
Reply to author
Forward
0 new messages