如何在Google Chrome扩展程序中打开一个新窗口

Question

我正在尝试开发一个适用于谷歌Chrome的扩展程序，但我遇到了一些问题，希望当用户点击图标时能够启动或创建一个新窗口。

就像这样：http://i.imgur.com/8iRkEOb.png 非常感谢！

- Richard

---

请注意，您的示例显示了一个标题栏。如果有人想要删除标题栏，则目前在Web扩展中无法实现此操作。 - David Spector

Answer 1

首先，如果你的manifest中定义了default_popup，你需要将其删除，因为它会干扰你想捕捉的点击事件。

接下来，你需要在后台脚本中捕捉该事件：

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

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

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

您需要哪些选项？假设您想从您的扩展程序中打开一个页面，您需要使用 chrome.runtime.getURL 包装的 URL：

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
  });
});

- Xan

---

清单文件应该怎么写？我有这个：{ "name": "示例DOM", "version": "1.31", "manifest_version": 2, "permissions": ["tabs"], "browser_action": { "name": "示例", "icons": ["icon.png"], "default_icon": "icon.png" }, "content_scripts": [ { "js": [ "jquery.min.js", "background.js" ], "matches": [ "http:///", "https:///"] }] } - Richard

我应该在哪里放置事件以捕获点击事件？ - Richard

非常感谢您，Xan先生，您真的帮了我很多。同时，解决方案在这里：https://developer.chrome.com/extensions/examples/api/tabs/inspector.zip - Richard

检查器示例现在生成错误消息。 - David Spector

谢谢。我想打开一个新标签页，所以我使用了 chrome.tabs.create 而不是 chrome.windows.create :) - deadcoder0904

我之前使用我的扩展程序作为弹出窗口。但是在将其更改为窗口后，我在扩展审查器中遇到了“无法建立连接。接收端不存在。”的错误。看起来与contentScript.js的连接已经断开了。有什么建议吗？ - Mostafa Nobaqi

Answer 2

background.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
    }
} 

- t-nail

---

不需要包括 "chrome_url_overrides"，它会在 Chrome 的每个新标签中打开 popup.html，这是不可取的。Manifest V3也有各种变化，例如，“browser.actions”现在只是“actions”等。谷歌的文档对于v2与新的v3清单更改并没有让开发人员更容易理解。文档零散分布。我希望他们有一个统一的文档，我们可以在同一网站上选择v2文档'vs' v3文档。他们确实有V3文档，但我们必须根据与清单v2相比的更改来弄清楚一些东西。 - John Yepthomi

好的附加组件与Manifest V3。 - t-nail

Answer 3

chrome.action.onClicked.addListener(tab => {
  chrome.windows.create({
    url: chrome.runtime.getURL("index.html"),
    type: "popup" //No Address bar
    //In here you can also add constrain for the window
    //This is for manifest v3
  })
});

- STICH6669