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

Ric*_*ard 12 javascript google-chrome-extension

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

像这样:http://i.imgur.com/8iRkEOb.png 在此输入图像描述

非常感谢!

Xan*_*Xan 25

首先,如果default_popup清单中有一个已定义的 - 您需要将其删除,因为它会干扰您要捕获的click事件.

然后,您需要在后台脚本中捕获事件:

chrome.browserAction.onClicked.addListener(function(tab) {
  // ...
});
Run Code Online (Sandbox Code Playgroud)

接下来,如果我们想要一个窗口,我们可能想看一下windowsAPI.create()听起来像你需要的:

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.windows.create({/* options */});
});
Run Code Online (Sandbox Code Playgroud)

你需要什么选择?假设您要从扩展程序中打开一个页面,您需要一个包含在以下内容中的URL 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")
  });
});
Run Code Online (Sandbox Code Playgroud)

然后,要显示一个像您正在显示的窗口,没有顶部工具栏,您需要一个窗口类型"popup":

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

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

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
  });
});
Run Code Online (Sandbox Code Playgroud)