如何为新窗口创建自定义 google chrome 扩展程序并在扩展程序的替代点击中保持新窗口的焦点

Question

我想创建一个新的自定义 chrome 扩展程序以在新窗口中打开一个 web URL 或自定义页面。

Answer 1

要添加新的 chrome 扩展，2 个文件是必需的

1. 清单文件
2. 背景.js

以下是创建新的自定义 chrome 扩展程序以在新的 chrome 窗口中打开 Web URL 或自定义页面的示例。

1. 创建一个新文件夹并将上述两个文件添加到文件夹中。

2. 您的 manifest.json 文件将如下所示：

   { "manifest_version": 2, "name": "New Window", "version": "0.1", "permissions": [ "https://github.com/", "tabs" ], "browser_action": { "default_icon": "icon.png", "default_title": "扩展到新窗口" }, "background": { "scripts": ["background.js"] } }

这里的 icon.png 是 chrome 扩展图标。保留文件夹的图标根。3. 你的 background.js 文件将如下所示：

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

在新的窗口大小中你可以定义宽度和高度。else 部分是在最小化新窗口后关注相同的窗口 id。查找以下步骤以在本地（开发模式）中启动 chrome 扩展 步骤：

1. 打开 Chrome 浏览器，然后单击右上角的 3 个点（...）。
2. 选择更多工具 > 扩展。将打开 chrome 扩展页面。
3. 从窗口右上角启用“开发人员模式”选项。
4. 将在同一窗口中启用开发人员选项，选择“加载解包”并从目录中浏览文件夹。

代码池：https : //github.com/Nayana-chandran/chrome-new-window-extension