12

I have implemented a chrome extension. Was wondering if the popup.html can be opened in a new tab? Every single click on the page, and the popup disappears :( .. Was wondering if I can stick it to the page or is there a way to open the extension in a new page?

abraham
  • 46,583
  • 10
  • 100
  • 152
sharath
  • 3,501
  • 9
  • 47
  • 72

2 Answers2

10

Yes, a popup page is just a normal extension page, you can do the following to open a new popup tab from the background page. I use that every time when the user first installs the extension, I open the about page, you can do the same for the popup page.

chrome.tabs.create({url: 'popup.html'})

For one of my extensions, My Hangouts, I have a small "open as tab" button within the popup, I bind the click event for that link to execute this:

chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});

The reason why I passed the hash is because I wanted to add more content when the user opens it in a popup because there is more real estate to play with.

Within the popup, I use normal JavaScript to differentiate whether I opened the tab in the new tab page or in a normal page like the following:

if (window.location.hash == '#window') {
  this.displayAsTab = true;
}

You can do tricks like this to make your extensions user experience better.

Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • wow.. thts sounds really cool.. I tried doing the following on the popup.html, but kinda didnt work. Is there anything I am doing wrong ? (I have included jquery) $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); }); I tried doing the same in the background.html as well, but didnt work. is there a simple way I can see this work ? Like, click on a link and the whole popup opens up in a new tab ? – sharath Mar 08 '12 at 02:10
  • When I tried $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': 'true'});}); it didnt work, but when i tried $(function() { chrome.tabs.create({'url': 'http://www.google.com', 'selected': 'true'});}); it worked. So for google, it worked, but for popup.html it didnt. I have the above code inside popup.html – sharath Mar 08 '12 at 02:25
  • @paypalcomp can you post more code, perhaps at gist.github.com or pastebin? Have you checked your console for errors? Right click on your popup, and choose Inspect. Click on the console tab, and view the errors. (same goes for your background page but it is available in your settings/options window. – Mohamed Mansour Mar 09 '12 at 14:38
2

here is the same issue: Chrome Extension: onclick extension icon, open popup.html in new tab

use:

chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
    // Tab opened.
});

property "pinned" to stick the tab.

Community
  • 1
  • 1
Vinta
  • 387
  • 4
  • 10
  • wow.. thts sounds really cool.. I tried doing the following on the popup.html, but kinda didnt work. Is there anything I am doing wrong ? (I have included jquery) $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); }); I tried doing the same in the background.html as well, but didnt work. is there a simple way I can see this work ? Like, click on a link and the whole popup opens up in a new tab ? – sharath Mar 08 '12 at 02:14
  • those chrome.* API can only be called in extension process (background page, option page, popup, etc.). you may use Message Passing. – Vinta Mar 08 '12 at 10:09