Access elements inside frame in google chrome extension

Question

I am developing a chrome extension when user clicked on the browser action button, a new tab should have to open there the screen should be splitted using frames. Inside the frames i have text box as well as iframe. The text box will acts like url bar, when the user enters the url in text box, i will update the content of iframe.

Here comes my actual problem, when the user clicks on any link inside the iframe, i have to update the url bar, but i can't able to add event listener for the links that are inside the iframe, the problem is i can't able to access the element inside the iframe, i am getting error as "Unsafe javascript attempt to access URL ...... from the frame ....".

This page is chrome extension tab, if it is other page, i could inject content script to add event listener inside frame, so i can't use the content script here.

Things that i tried but didn't work: i) In manifest.json i added permission as "permissions": [ "tabs", "http:///", "https:///" ] but didn't work. ii) tried --allow-file-access-from-files in chrome browser but didn't work

Answer 1

You don't need to inject scripts into html files inside the extension. From those, you'll be able to access the chrome.* API from page scripts.

That being said, if the iframe and the frame with the textbox are in different domains, you cannot access one from the other, since cross-site scripting security prevents it.

I'd need to see more of the HTML file you already have, but you might be able to do something like this...

In the extension tab (that contains the text box):

chrome.extension.onRequest.addListener(function (response) {
   if (response.type === "urlUpdate") {
      document.getElementById("addressBar").value = response.url;
   }
});

In the background page:

chrome.extension.onRequest.addListener(function(request, sender) {
   if (request.type === "urlUpdate") {
      chrome.tabs.sendRequest(sender.tab.id, {type: "urlUpdate", url: request.url});
   }
});

Finally, a content script to be run on http://* and https://*. Make sure that you have this in your manifest (add it to an existing list of content scripts):

"content_scripts": [
   {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["address.js"],
      "all_frames": true
   }
 ];

It is important that you have the all_frames set to true to get the script to run inside the iframe.

Then, you'd have this in address.js:

if (window.top !== window) {
   chrome.extension.sendRequest({type: "urlUpdate", url: location.href});
}

Basically, the window.top check should avoid confusion by only sending the url update message from inside iframes. You might need more filtering to keep it from running on other pages you don't want it to.

This is untested, but I'm fairly confident that this kind of solution would work.