如何为新 window 创建自定义 google chrome 扩展,并在替代点击扩展时保持对新 window 的关注

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

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

要添加新的 chrome 扩展程序,必须有 2 个文件

  1. manifest.json
  2. background.js

下面是创建新的自定义 chrome 扩展以在新的 chrome window.[=12= 中打开 Web URL 或自定义页面的示例]

  1. 新建一个文件夹,将以上两个文件添加到文件夹内。

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

    { "manifest_version": 2, "name": "新建Window", “版本”:“0.1”, “权限”:[ "https://github.com/", “标签” ], “browser_action”:{ "default_icon": "icon.png", "default_title": "扩展到新 Window" }, “背景”: { “脚本”:[“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});
    }
});

在新的window尺寸中您可以定义宽度和高度。 else 部分是在最小化新的window 之后关注相同的window id。 找到以下步骤以在本地(开发模式)启动 chrome 扩展 步骤 :

  1. 打开Chrome浏览器,点击右上角的3个点(...)。
  2. Select 更多工具 > 扩展。将打开 chrome 扩展页面。
  3. 启用 window 右上角的“开发者模式”选项。
  4. 将在同一个 window 中启用开发人员选项,选择“加载解压”并浏览目录中的文件夹。

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