How to launch a new window in Google Chrome Extension

Question

I\'m trying to develop a Extension for Google Chrome, but I have some problems, I want to launch or create a new window when user click on it in the icon.

Like this: htt

Answer 1

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

Answer 2

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