22

I have created a chrome extension and managed to open the popup.html file using window.open. however I want to open it in a new tab, I've tried lots of different ways including:

<script type="text/javascript" language="JavaScript">
  chrome.tabs.create('url': 'popup.html');

Am I just placing the code in the wrong place or is it the wrong code altogether?

Max Shawabkeh
  • 37,799
  • 10
  • 82
  • 91
David
  • 221
  • 1
  • 2
  • 3

5 Answers5

22

why would you want to open the popup.html in a new tab? You should create a different page for that. Anyways, if you want to open up the popup.html, in a new tab, you would need to pass in the extension url.

http://code.google.com/chrome/extensions/extension.html#method-getURL

chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
  // Tab opened.
});
Mohamed Mansour
  • 39,445
  • 10
  • 116
  • 90
  • 4
    This snippet needs to be called from the background page, so if you're trying to open the tab from a content script, send a message to the background page that will trigger this code. Here is the appropriate page on sending messages this way: http://code.google.com/chrome/extensions/messaging.html – Arne Roomann-Kurrik Mar 10 '10 at 00:56
  • 2
    I had to wrap the 'url':chrome.extension.getURL('popup.html') in brackets. {'url': chrome.extension.getURL('popup.html')} – AdamB Apr 09 '10 at 00:48
  • Just keep in mind that requires a "tabs" permission will show the user a warning upon installation that the chrome extension needs to "Read your browsing history", but if you just wanna open a new tab then just use "activeTab" permission instead, it won't trigger that warning. – Mahmoud Felfel Apr 17 '19 at 20:36
9

Now you can use Event Pages to open popup.html in new tab when extension icon is clicked without creating a default_popup page.

manifest:

"background": {
    "scripts": ["background.js"],
    "persistent": false
}

js:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': true});
});
wander
  • 937
  • 1
  • 7
  • 15
  • 3
    This will open new tab on every click. It is probably wise to check if extension popup is already open and if yes, just select it – Andrej Kaurin Mar 30 '16 at 20:22
  • `selected` is deprecated as of chrome 33 and you should use `active` instead of that. https://developer.chrome.com/extensions/tabs#method-create – Gangadhar Jannu Aug 03 '18 at 21:00
3

Use chrome.tabs.create(Object properties, function callback) as described on http://code.google.com/chrome/extensions/tabs.html

The object properties could contain fields for windowId, index, url and selected. The optional callback function receives a Tab object of the newly created tab.

So the simplest example to create a new tab in the current window and get it selected would look like this:

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

Not sure why you would like to show the popup.html in a new tab, but I find it very useful while developing/debugging my extension ... it is quite a pain that on the extension page there is "usually" only a link to the background page.

Would love to know how to open it in a new window and maybe in a kiosk mode ;-)

Draško Kokić
  • 1,280
  • 1
  • 19
  • 34
  • 2
    Note that `selected` is now deprecated. Use `highlighted` instead. – Brad Jun 02 '17 at 21:11
  • `selected` is deprecated as of chrome 33 and you should use `active` instead of that. https://developer.chrome.com/extensions/tabs#method-create – Gangadhar Jannu Aug 03 '18 at 21:01
0

One complete, worked example:

Manifest.json

{
  "manifest_version": 2,
  "name": "HelloWorld",
  "version": "0.0.1",
  "description": "This is HelloWorld",
  "author": "BaiJiFeiLong@gmail.com",
  "browser_action": {
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

background.js

// Created by BaiJiFeiLong@gmail.com at 2022/4/13

chrome.browserAction.onClicked.addListener(async () => {
    await chrome.tabs.create({url: chrome.extension.getURL("popup.html")});
})

popup.html

<!--Created by BaiJiFeiLong@gmail.com at 2022/4/13-->

<body style="min-width: 500px">
<h1>Hello World</h1>
</body>
BaiJiFeiLong
  • 3,716
  • 1
  • 30
  • 28
0

Manifest v3, 2023

Most answers likely won't work with manifest v3; a lot of the APIs have changed with the update. This is an updated version of @BaiJiFeiLong's answer that will work in v3:

manifest.json

{
  "manifest_version": 3,
  "name": "My nice little extension",
  "description": "Just an example",
  "version": "0.0.1",
  "action": {},
  "background": {
    "service_worker": "background.js"
  },
}

background.js

chrome.action.onClicked.addListener(async () => {
  await chrome.tabs.create({ url: chrome.runtime.getURL("popup.html") });
});

popup.html

<body>
  <h1>Hello from my extension!</h1>
</body>
HynekS
  • 2,738
  • 1
  • 19
  • 34