在新标签页中打开Chrome扩展程序

Question

我已经开发了一个Chrome扩展程序。想知道能否在新标签页中打开弹出窗口（popup.html）？每次单击页面时，弹出窗口都会消失 :( .. 想知道是否可以将其固定在页面上，或者有没有一种方法可以在新页面中打开扩展程序？

- sharath

Answer 1

是的，弹出页面只是一个正常的扩展页面，您可以执行以下操作以从后台页打开新的弹出选项卡。每当用户首次安装扩展时，我都会打开关于页面，您也可以对弹出页面执行相同的操作。

chrome.tabs.create({url: 'popup.html'}) 

我有一个扩展程序，我的Hangouts，在弹出页面中有一个小的“作为标签页打开”按钮，我将该链接的点击事件绑定到以下代码：

chrome.tabs.create({url: chrome.extension.getURL('popup.html#window')});

我传递哈希的原因是，当用户在弹出窗口中打开它时，我想要添加更多内容，因为有更多的可用空间。

在弹出窗口中，我使用常规JavaScript来区分我是在新标签页中打开该选项卡还是在普通页面中打开，如下所示:

if (window.location.hash == '#window') {
  this.displayAsTab = true;
}

您可以使用这种技巧来提高您的扩展程序的用户体验。

- Mohamed Mansour

---

哇..听起来真的很酷..我尝试在popup.html上做以下操作，但有点不起作用。我做错了什么吗？（我已经包含了jquery）$(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); });我也尝试在background.html中做同样的事情，但没有成功。有没有简单的方法可以让我看到这个工作呢？比如，点击一个链接，整个弹出窗口就会在一个新标签页中打开？ - sharath

当我尝试使用以下代码时： $(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html'), 'selected': 'true'});}); 它没有起作用，但是当我尝试使用以下代码时： $(function() { chrome.tabs.create({'url': 'http://www.google.com', 'selected': 'true'});}); 它可以正常工作。所以对于谷歌而言，它可以正常工作，但对于popup.html则不行。我将以上代码放在了popup.html中。 - sharath

@paypalcomp，您能否发布更多的代码，比如在gist.github.com或pastebin上？您是否检查了控制台中的错误？右键单击弹出窗口，选择检查。点击控制台选项卡，查看错误信息。（同样适用于您的后台页面，但它可以在设置/选项窗口中找到。） - Mohamed Mansour

Answer 2

这里有一个相似的问题：Chrome扩展：单击扩展图标，在新标签页中打开popup.html 使用方法：

chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}, function(tab) {
    // Tab opened.
});

属性“pinned”用于固定选项卡。

- Vinta

---

哇..听起来真的很酷..我尝试在popup.html上做以下操作，但有点不起作用。我做错了什么吗？（我已经包含了jquery）$(function() { chrome.tabs.create({'url': chrome.extension.getURL('popup.html')}); }); 我也尝试在background.html中做同样的事情，但没有起作用。有没有简单的方法可以让我看到这个工作呢？比如，点击一个链接，整个弹出窗口就会在一个新标签页中打开？ - sharath

这些 chrome.* API 只能在扩展进程中调用（后台页面、选项页面、弹出窗口等）。你可以使用消息传递。 - Vinta