0

I'm using the code from this thread (How to make side panel in chrome extension?) to inject a side panel instead of the default popup window and its working fine but my content scripts dont have access to any of the iframe's children.

I can search the DOM for the iframe, but doing iframe.children returns null even though they exist. And calling iframe.children in the google chrome console works as expected. I suspect it might be a security feature which restricts communication between content script and iframe contents, is there anyway to circumvent this? I need to add an event listener to a button in the iframe.

//Listening for background.js message that extension was pressed
chrome.runtime.onMessage.addListener(function (msg, sender) {
    if (msg == "toggle") {
        console.log("message received");
        toggle();
    }
});

//creates the iframe that will be the canvas for the panel
var iframe = document.createElement('iframe');
iframe.style.background = "black";
iframe.style.borderRadius = "15";
iframe.style.height = "90%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.style.border = "0px";
iframe.src = chrome.runtime.getURL("popup.html")
document.body.appendChild(iframe);

//this returns null for all elements in the popup.html that is placed on the iframe
console.log(document.querySelector("some element present in popup.html"));

edit: I forgot to say that inline code has been banned since manifest-v3 so i cant write any javascript code directly into the popup.html

frezz
  • 1
  • 1
  • You can't access a cross-origin iframe directly. All you need is to load popup.js in popup.html e.g. `` and there'll have direct access to the popup's DOM via `document` and `window`, no need for any `iframe.children`. – wOxxOm Aug 24 '22 at 05:01
  • @wOxxOm Thats what i tried to do at first but i got this error: `Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-oeJ6OG4lhlzTOwGlYf0iVhJ4ZCmIXKGJXLNMqqfrDGg='), or a nonce ('nonce-...') is required to enable inline execution.` – frezz Aug 24 '22 at 22:15
  • Judging by the error you didn't do what I said. See [onclick or inline script isn't working in extension](https://stackoverflow.com/q/13591983) – wOxxOm Aug 25 '22 at 05:55
  • @wOxxOm I looked at the link and I did as the solution said. I link to popup.js in my html file with `` and in the javascript file I have this: `btn = document.querySelector(".chat-btn"); console.log(btn) btn.addEventListener("click", sentMessage);` The error points to the line where i load the script in my popup.html – frezz Aug 25 '22 at 07:10
  • @wOxxOm Ok so I double checked my code and realized my IDE was auto completing the script tag with one ">" sign missing which made it interpret the file name as inline code. A stupid mistake I should've caught but thanks for the help anyway. – frezz Aug 25 '22 at 07:30

0 Answers0