CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
David
David

Reputation: 221

Chrome Extension: onclick extension icon, open popup.html in new tab

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?

Upvotes: 22

Views: 42529

Answers (5)

HynekS
HynekS

Reputation: 3307

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>

Upvotes: 1

BaiJiFeiLong
BaiJiFeiLong

Reputation: 4615

One complete, worked example:

Manifest.json

{
  "manifest_version": 2,
  "name": "HelloWorld",
  "version": "0.0.1",
  "description": "This is HelloWorld",
  "author": "[email protected]",
  "browser_action": {
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

background.js

// Created by [email protected] at 2022/4/13

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

popup.html

<!--Created by [email protected] at 2022/4/13-->

<body style="min-width: 500px">
<h1>Hello World</h1>
</body>

Upvotes: 0

Draško Kokić
Draško Kokić

Reputation: 1290

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 ;-)

Upvotes: 3

wander
wander

Reputation: 957

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});
});

Upvotes: 9

Mohamed Mansour
Mohamed Mansour

Reputation: 40159

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.
});

Upvotes: 22

Related Questions