CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Silvio Langereis
Silvio Langereis

Reputation: 471

Not able to change iframe attributes

I'm working on a chrome extension that needs to stay on top of the page, so we opted for an iframe implementation. The iframe is created through content_script.js, the UI is added with HTML and JS, everything is in place. One of the UI settings is the ability to change the position of the UI (iframe). I tested the code that does that, with success, by diretly changing the attributes when the iframe is created in content_script.js.

However, when I want to assign these attributes live, I can't seem to be able to put the iframe in a variable, because the JS code doesn't find the ID I assigned it.

content_script.js:

var iframe = document.createElement('iframe');
iframe.style.position = "fixed";
iframe.style.height = "800px";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "1"; //temporary, so we can see the bounds while developing.
iframe.overflow = "hidden";
iframe.id = "main-UI";
iframe.src = chrome.extension.getURL("popup.html");

document.body.appendChild(iframe);

The relevant JS code in popup.js:

var mainUI = document.getElementById('main-UI');

function changeUIPosition(position) {

    if (position === positions.topLeft.name)
    {
        mainUI.style.top = '0px';
        mainUI.style.left = '0px';
    }
    else if (position === positions.bottomLeft.name)
    {
        mainUI.style.bottom = '0px';
        mainUI.style.left = '0px';
    }
    else if (position === positions.bottomRight.name)
    {
        mainUI.style.bottom = '0px';
        mainUI.style.right = '0px';
    }
    else if (position === positions.topRight.name)
    {
        mainUI.style.top = '0px';
        mainUI.style.right = '0px';
    }
}

error: Uncaught TypeError: Cannot read property 'style' of null

Console screenshot of the iframe:

Console screenshot of the iframe

I've picked up countless elements from the DOM by ID... I don't get it, is it because it is created by content_script ? I'm fairly new to (vanilla) Javascript, one of my personal goals this project is to not use a single framework so I can sharpen my Javascript skills.

EDIT 1: Getting the element by name gives a slightly different error:

Cannot set property 'bottom' of undefined

Upvotes: 1

Views: 645

Answers (1)

Silvio Langereis
Silvio Langereis

Reputation: 471

Directly manipulating the iframe from the script inside the iframe is not possible.

I managed to solve this issue by sending a message from popup.js to content_script.js. Once there, the attributes are easily changed so that the UI can be positioned as per user's wish.

popup.js:

function changeUIPosition(position) {
    chrome.tabs.getCurrent(
        function(tab){
            chrome.tabs.sendMessage(tab.id, position);
        });
}

content_script.js:

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg === "toggle") toggle();
    else (position(msg))
});

function position(msg) {

//remove current alignment styles, if you leave them, they will start to act up.
iframe.style.removeProperty('right');
iframe.style.removeProperty('bottom');
iframe.style.removeProperty('top');
iframe.style.removeProperty('left');

switch(msg) {
    case positions.topLeft.name:
        iframe.style.top = '0px';
        iframe.style.left = '0px';
        break;
    case positions.bottomLeft.name:
        iframe.style.bottom = '0px';
        iframe.style.left = '0px';
        break;
    case positions.bottomRight.name:
        iframe.style.bottom = '0px';
        iframe.style.right = '0px';
        break;
    case positions.topRight.name:
        iframe.style.top = '0px';
        iframe.style.right = '0px';
        break;
    default:
        break;
}

Upvotes: 2

Related Questions