0

I'm trying to make a firefox extension that creates a new panel in the devtools and log all of the URL of the scripts tag loaded in the current page. But I'm having some troubles with the communication between the panel and the inspected window. This is how it looks like:

Panel image

And when you click the button it may appear in the panel all the scripts loaded.

I don't know how to communicate the panel script with the inspector of the window, I tried with postMessage but returns undefined.

Always return undefined when calling it:

Undefined image

This is my manifest.json:

{
  "manifest_version":2,
  "version":"1.0",
  "name":"Panel",
  "devtools_page": "devtools/devtools-page.html",

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

  "permissions": [
   "contextualIdentities", "cookies", "tabs", "storage", "webRequest", "<all_urls>"
  ],

 "content_scripts": [
 {
   "run_at": "document_end",
   "matches": ["http://*/*", "https://*/*", "<all_urls>"],
   "js":
   [
     "main.js"
   ]
 }]
}

I will appreciate if you may help me a bit with this.

TheImporter
  • 1
  • 1
  • Use chrome.runtime [messaging](https://developer.chrome.com/extensions/messaging). See also these examples for Chrome which also apply to Firefox: [one](https://stackoverflow.com/a/42681111) + [two](https://stackoverflow.com/a/72902614). – wOxxOm Jan 10 '23 at 13:03
  • Hi @wOxxOm thank you for your answer and the examples! I have the communication between the panel and the background. But to get the scripts of the current page I need to call from the content script. I created a event in the content script to call the background script via postMessage but doesn't seems to work. Do you have some more example or some way to archive it? I will appreciate it – TheImporter Jan 10 '23 at 15:33
  • I've already linked two examples of doing it. – wOxxOm Jan 10 '23 at 17:02

0 Answers0