Sindar Sindar -4 years ago 150
Javascript Question

Create a new chrome tab/window from a Iframe

I'm currently have some issue with an iframe...

I have my iframe with a searchbox and i want to make this searchbox redirection when i click on go by creating a new tab/window

http://img51.imageshack.us/i/issuec.png/

So to be clear, my google chrome extension call as a content script : overlay.js Then this one will put at the end of the current page my "overlay.html" page.

So the problem come from that my .html is represented as a iframe and i don't see how i can redirect from this iframe.

overlay.html

<form id="searchForm" action="#" onsubmit="searchBoxRedirection(this)" method="post">
<img id="logo" src="images/extension.png" alt="Logo"></img>
<input type="search" value="" name="searching">
<input type="submit" value="Go !" />
</form>


overlay.js

var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},

injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');

body.append(iframe);
iframe.show();

//alert('Injection reussie');
}
}


Tool.js

function searchBoxRedirection(form)
{
tabs.create({url:"www.yahoo.fr"});
}


manifest.json

{

"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}

Answer Source

Since your using Content-Scripts you cannot call any Chrome API except a few chrome.extensions.*

Here are some examples of what content scripts can do:

Documentation Quote

Find unlinked URLs in web pages and convert them into hyperlinks'

  • Increase the font size to make text more legible
  • Find and process microformat data in the DOM

However, content scripts have some limitations. They cannot:

  • Use chrome.* APIs (except for parts of chrome.extension)
  • Use variables or functions defined by their extension's pages
  • Use variables or functions defined by web pages or by other content scripts
  • Make cross-site XMLHttpRequests

Now to do what you want, you need to goto a link, you have two choices:

  1. Use Messaging to redirect the page.
  2. Call "parent" within the iframe to do a redirect.

Messaging approach

Messaging is simple, all you do is send a request to the extension which will chrome.tabs.create the new page.

contentscript.js

chrome.extension.sendRequest({visit: "http://yahoo.fr"});

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.visit) {
    chrome.tabs.create({url: request.visit});
  }
  sendRepsonse({}); // Snub
});

Parent approach

Content Script injects:

<iframe src='iframe.html'></iframe>
<script type="text/javascript">
   function changeURL(url) {
 document.location=url;
   }        
</script>

IFrame contains:

 <a href="javascript:parent.changeURL('http://yahoo.fr');">Change to Yahoo</a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download