如何在Google Chrome扩展程序中启动新窗口

Question

我正在尝试开发Google Chrome扩展程序，但我遇到了一些问题，当用户在图标中点击它时，我想启动或创建一个新窗口。

像这样：http://i.imgur.com/8iRkEOb.png

非常感谢！

Answer 1

首先，如果您在清单中定义了default_popup，则需要将其删除，因为它会干扰您要捕获的点击事件。

然后，您需要在后台脚本中捕获事件：

chrome.browserAction.onClicked.addListener(function(tab) {
  // ...
});

接下来，如果我们想要一个窗口，我们可能想看一下windows API。 create()听起来像你需要的：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({/* options */});
});

您需要什么选择？假设您要从扩展程序中打开一个页面，则需要一个包含在chrome.runtime.getURL中的网址：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({
    // Just use the full URL if you need to open an external page
    url: chrome.runtime.getURL("mypage.html")
  });
});

然后，要显示一个像您一样显示的窗口，如果没有顶部工具栏，则需要一个窗口类型"popup"：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({
    url: chrome.runtime.getURL("mypage.html"),
    type: "popup"
  });
});

最后，如果您想在窗口打开后执行某些操作，请使用回调：

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({
    url: chrome.runtime.getURL("mypage.html"),
    type: "popup"
  }, function(win) {
    // win represents the Window object from windows API
    // Do something after opening
  });
});

Answer 2

背景.js

chrome.browserAction.onClicked.addListener(function(activeTab)
{
    chrome.windows.create({ url: chrome.runtime.getURL("popup.html"), type: 
    "popup" });
});

manifest.json

{  
    "manifest_version": 2,  
    "name": "",  
    "description": "",  
    "version": "1.0", 

    "chrome_url_overrides": {
        "newtab": "popup.html" //the html to show in popup
    },

    "browser_action": {
        "default_icon": "img/zi.png" //some icon
    },

    "permissions": [
        "tabs"
    ],

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    }
}