打开新窗口 Chrome 扩展 - Javascript

简介

本文将介绍如何使用 Javascript 编写 Chrome 扩展，以实现在当前页打开一个新的浏览器窗口。

实现思路

在 Chrome 扩展中使用 Javascript 实现打开新窗口功能的基本思路：

• 获取当前浏览器窗口的 ID
• 在当前浏览器窗口打开一个新的浏览器窗口
• 在新的浏览器窗口中加载指定的 URL

具体的实现过程，可以通过以下步骤完成：

1. 配置清单文件

在 Chrome 扩展中，配置清单文件（manifest.json）用于定义扩展的基本信息，包括扩展的名称、版本号、权限等。在清单文件中，需要添加 tabs 和 activeTab 权限：

{
  "name": "打开新窗口",
  "version": "1.0",
  "manifest_version": 2,
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "browser_action": {
    "default_icon": "icon.png"
  }
}

其中，permissions 表示扩展需要的权限，tabs 和 activeTab 权限是打开新窗口所需要的权限。

2. 获取当前浏览器窗口的 ID

在 Javascript 中，可以通过 chrome.windows.getCurrent() 方法获取当前浏览器窗口的 ID：

chrome.windows.getCurrent(function(window) {
  var currentWindowId = window.id;
});

3. 在当前浏览器窗口打开一个新的浏览器窗口

在 Javascript 中，可以通过 chrome.windows.create() 方法在当前浏览器窗口打开一个新的浏览器窗口：

chrome.windows.getCurrent(function(window) {
  var currentWindowId = window.id;
  chrome.windows.create({
    url: "https://www.google.com",
    left: window.left + 10,
    top: window.top + 10,
    width: 500,
    height: 500,
    type: "popup"
  });
});

其中，url 表示需要打开的网页地址；left 和 top 表示浏览器窗口的左上角相对于当前窗口的偏移量；width 和 height 表示新打开的浏览器窗口的宽度和高度；type 表示浏览器窗口的类型，包括 popup、normal 和 detached_panel。

4. 在新的浏览器窗口中加载指定的 URL

在 Javascript 中，可以通过 chrome.tabs.create() 方法在新的浏览器窗口中加载指定的 URL：

chrome.windows.getCurrent(function(window) {
  var currentWindowId = window.id;
  chrome.windows.create({
    url: "https://www.google.com",
    left: window.left + 10,
    top: window.top + 10,
    width: 500,
    height: 500,
    type: "popup"
  }, function(newWindow) {
    chrome.tabs.create({
      url: "https://www.baidu.com",
      active: true,
      windowId: newWindow.id
    });
  });
});

其中，url 表示需要打开的网页地址；active 表示是否在新的浏览器窗口中激活该标签页；windowId 表示需要加载该标签页的浏览器窗口的 ID。

完整代码

以下是完整的 Chrome 扩展的 Javascript 代码片段：

chrome.windows.getCurrent(function(window) {
  var currentWindowId = window.id;
  chrome.windows.create({
    url: "https://www.google.com",
    left: window.left + 10,
    top: window.top + 10,
    width: 500,
    height: 500,
    type: "popup"
  }, function(newWindow) {
    chrome.tabs.create({
      url: "https://www.baidu.com",
      active: true,
      windowId: newWindow.id
    });
  });
});

结论

本文介绍了如何使用 Javascript 实现在当前页打开一个新的浏览器窗口的 Chrome 扩展。实现思路包括获取当前浏览器窗口的 ID、在当前浏览器窗口打开一个新的浏览器窗口、在新的浏览器窗口中加载指定的 URL。通过清单文件、Javascript 代码片段等，本文帮助程序员理解了实现的基本方法和设计思路。