javascript - 如何为新窗口创建自定义谷歌浏览器扩展并在扩展的替代点击中保持关注新窗口

Question

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

Answer 1

添加新的 chrome 扩展 2 个文件是强制性的

manifest.json

背景.js

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

新建一个文件夹，在文件夹内添加以上两个文件。

您的 manifest.json 文件将如下所示:
{
“manifest_version”:2，
"name": "新窗口",
“版本”:“0.1”，
“权限”:[
"https://github.com/",
“标签”
],
“浏览器操作”:{
"default_icon": "icon.png",
"default_title": "扩展至新窗口"
},
“背景”: {
“脚本”:[“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 扩展(开发模式)
脚步 :

打开 Chrome 浏览器，然后单击右上角的 3 个点(...)。

选择更多工具 > 扩展。将打开 chrome 扩展页面。

启用窗口右上角的“开发者模式”选项。

将在同一窗口中启用开发人员选项，选择“加载解压”并从目录中浏览文件夹。

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