The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "chrome-extension". Protocols must match

0
votes

Uncaught SecurityError: Blocked a frame with origin "brickseek.com" from accessing a frame with origin "chrome-extension://id". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "chrome-extension". Protocols must match.

I am having trouble trying to replace text within a p tag. I've tried a couple ways to get element by id and replace text but no luck. I don't understand what this security error is telling me because I had injected the iframe into the website but when trying to manipulate it, the program thinks it belongs to the website. I really need help fixing this for school.

Content.js Where I Created iframe

var iframe  = document.createElement ('iframe');
iframe.src  = chrome.extension.getURL ('iframe.html');
var topview = document.getElementById('sidebar-content');
topview.parentNode.insertBefore(iframe, topview)

iframe.html That I Injected

<div>
    <p id="title">Tom Clancy</p>
</div>

What I Have Tried To Manipulate iframe:

iframe.getElementById('title').innerHTML = "Harry Potter";

and

iframe.contentWindow.getElementById('title').innerHTML = "Harry Potter";
1
javascriptgoogle-chrome-extension

1 Answers

0
votes

It looks as if you're hosting this code at https://brickseek.com.

However, this line of code:

chrome.extension.getURL ('iframe.html');

seems to be setting the iframe src to something like "chrome-extension://id"

(I don't have a lot of experience with Chrome Extensions, but they don't seem particularly relevant to the question.)

The error is saying that you cannot iframe a document on different protocol (chrome-extension://) to the page where the iframe appears (https://). They both must be https://

Try hosting your iframe.html on the same server and then simplify your code with

iframe.src = "/iframe.html"