Chrome Extension - How to interact between the main extension popup (default_popup) and a page script (web_accessible_resources)

Question

I created an extension, where I placed a script into a page markup and performs some actions according to the following article:

var s = document.createElement('script');
s.src = chrome.runtime.getURL('code.js');
s.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(s);

I also displayed a checkbox in "default_popup" which should indicate whether to execute a part of methods in script from "code.js" (web_accessible_resources) or not.

However, I have no idea how to interact between the script from "content_scripts" (which has access to "default_popup") and the script from "web_accessible_resources".

Could you suggest something?

I understand that I can completely replace the "web_accessible_resources" script, but this does not seem to be the best practice.

Thank you.

score 1 · Answer 1 · answered Nov 05 '22 at 21:27

I'm not sure exactly what you're asking but I'm assuming you have 3 things: (1) a pop up, (2) a content script, and (3) a script injected into the page, running in page context. Firstly, to send messages to the popup, you can run chrome.runtime.sendMessage() and have a listener in your popup's script.js file with chrome.runtime.onMessage(). To get the data from the page script is different, it cannot communicate with your browser extension directly. So, from your page context script, you can create an element with a unique ID and store some data in an attribute. Use a modification of a MutationObserver to run a waitForElm() function (see this thread - How to wait until an element exists?). In your content script, you'll wait for the element to be created, collect data from the attribute you set, and then run chrome.runtime.sendMessage() as mentioned earlier to get that data to your pop up.

Thank you for the reply. What I want to do is access the page's DOM from the Popup. That is, I have a script embedded on my page and a popup with a checkbox. If I click on the checkbox, my script should get the value of the checkbox. — Balaborka, Nov 07 '22 at 20:51

score 1 · Accepted Answer · answered Nov 06 '22 at 01:19

This is a sample of communication between popup and tab.

manifest.json

{
  "name": "content_scripts + popup",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "js": [
        "matches.js"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

popup.js

chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  console.log("Send");
  chrome.tabs.sendMessage(tabs[0].id, "message", (response) => {
    console.log("Recv response = " + response.title);
    document.getElementById("title").innerText = response.title;
  });
});

matches.js

console.log("matches.js");

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  console.log("Recv. Send response = " + document.title);
  sendResponse({ title: document.title });

  return true;
});

popup.html

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    * {
      font-size: x-large;
    }
  </style>
</head>

<body style="min-width:300px">
  <div id="title"></div><br>
  <script src="popup.js"></script>
</body>

</html>

Chrome Extension - How to interact between the main extension popup (default_popup) and a page script (web_accessible_resources)

2 Answers2

Linked