How to create custom google chrome extension for new window And keep focus the new window in alternative click of extension

Question

I want to create a new custom chrome extension to open a web URL or custom page in new window.

Answer 1

For adding a new chrome extension 2 files are mandatory

1. manifest.json
2. background.js

Here is the example to create a new custom chrome extension to open a web URL or custom page in the new chrome window.

1. Create a new folder and add the above two files inside the folder.

2. And your manifest.json file will look like this:

   { "manifest_version": 2, "name": "New Window", "version": "0.1", "permissions": [ "https://github.com/", "tabs" ], "browser_action": { "default_icon": "icon.png", "default_title": "Extension into New Window" }, "background": { "scripts": ["background.js"] } }

Here the icon.png is the chrome extension icon. Keep the icon root of the folder. 3. And your background.js file will look like:

/**
 * Listens for the app launching then creates the window
 */
var ba = chrome.browserAction;

// Function to open the chrome extension into new chrome window
var windowNotOpenTitle = 'Open popup window';
var windowIsOpenTitle = 'Popup window is already open. Click to focus popup.';
var popupWindowId = false; //popupWindowId can be true, false, or the popup's window Id.
ba.onClicked.addListener(function () {
    let width= 1100;
    let height= 650;
    if(popupWindowId === false){
        popupWindowId = true; //Prevent user pressing the button multiple times.
        ba.setTitle({title:windowIsOpenTitle});
        chrome.windows.create({ 
            'url': 'https://github.com/', 
            'type': 'panel',
            'width': width,
            'height': height,
            'left': (screen.width/2) - (width/2),
            'top': (screen.height/2) - (height/2),
            'focused': true
        },function(win){
            popupWindowId = win.id;
        });
        return;
    }else if(typeof popupWindowId === 'number'){
        //The window is open, and the user clicked the button., Focus the window.
        chrome.windows.update(popupWindowId,{focused:true});
    }
});

In the new window size that you can define the width and height. The else part is to focus on the same window id after minimizing the new window. Find the below steps to launch the chrome extension in your local (develop mode) Steps :

1. Open Chrome browser, and click the 3 dots(...) on the top right.
2. Select More tools > Extensions. Will open the chrome extension page.
3. Enable the "Developer mode" option from the top right of the window.
4. Will enable developer options in the same window, Choose "Load unpacked" and browse the folder from the directory.

For code pool: https://github.com/Nayana-chandran/chrome-new-window-extension