How to launch a new window in Google Chrome Extension
background.js
chrome.browserAction.onClicked.addListener(function(activeTab)
{
chrome.windows.create({ url: chrome.runtime.getURL("popup.html"), type:
"popup" });
});
manifest.json
{
"manifest_version": 2,
"name": "",
"description": "",
"version": "1.0",
"chrome_url_overrides": {
"newtab": "popup.html" //the html to show in popup
},
"browser_action": {
"default_icon": "img/zi.png" //some icon
},
"permissions": [
"tabs"
],
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
First off, if you have a default_popup
defined in the manifest - you need to remove it, as it interferes with the click event you want to catch.
Then, you need to catch the event in a background script:
chrome.browserAction.onClicked.addListener(function(tab) {
// ...
});
Next, if we want a window, we probably want to look at the windows
API. create()
sounds like what you need:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({/* options */});
});
What options do you need? Assuming you want to open a page from your extension, you'll need an URL wrapped in a chrome.runtime.getURL
:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
// Just use the full URL if you need to open an external page
url: chrome.runtime.getURL("mypage.html")
});
});
Then, to show a window like you're showing, without top toolbar, you need a window type "popup"
:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: chrome.runtime.getURL("mypage.html"),
type: "popup"
});
});
Finally, if you want to do something after the window has opened, use the callback:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: chrome.runtime.getURL("mypage.html"),
type: "popup"
}, function(win) {
// win represents the Window object from windows API
// Do something after opening
});
});