如何制作像 Google Hangouts 一样的 Chrome 扩展标题栏？

Question

这不起作用：

How to build an chrome extension like Google Hangouts

我的问题与此类似：

How do I customize the title bar of a popup in a chrome extension?

我用了chrome.windows.create({...type:panel});，但是它的外观是这样的：

是否可以自定义“普通标题栏”区域？

代码在这里。

var createWindow = function (tab) {
  if (appWindow) {
    chrome.windows.remove(appWindow.id);
  }
  chrome.windows.create({
    tabId: tab.id,
    url: 'http://localhost:8080', 
    left: Math.round(screen.width - 300),
    top: Math.round(screen.height - 500),
    width: 300,
    height: 500,
    type: 'panel'
  }, function(win) {
    appWindow = win;
    chrome.tabs.executeScript(appWindow.tabs[0].id, { file: './js/app_inject.js'}, function(){
         // console.log('inject executed'); 
        });
  });
};
chrome.browserAction.onClicked.addListener(createWindow);

"//localhost:8080" 是我的本地服务器页面。

Answer 1

我相信您（显然很简单）的问题暗示了更多问题，因此我将尝试将其拆分并分别解决每个问题：

---

1.为什么我的“面板”看起来与环聊不同？

环聊以面板形式打开（因此它的样式也是如此）。
您的“面板”作为弹出窗口打开（因此它的样式是这样的）。

---

2. 为什么我的“面板”会弹出？

为了使扩展能够打开面板窗口，用户必须启用此（实验性）功能（当然，底层操作系统必须支持它）。如果面板未启用，所有“面板”或“分离面板”类型的窗口都以“弹出”类型打开 (documentation)。

---

3.用户如何启用面板？

导航到chrome://flags/#enable-panels，然后点击Enable。

---

4. 当标志被禁用时，环聊如何打开面板窗口？

简答：它在源代码中被列入白名单。
更长的答案：看看 this answer。

---

5.我可以为弹出窗口的标题栏设置样式吗？

不是真的。标题栏显示（除其他外）页面的标题，因此您可以自定义该部分:)

---

6.我有其他选择吗？

如果您绝对需要能够设置窗口样式，可以使用 Packaged App。应用程序可以打开 frameless windows，因此您可以使用 HTML/CSS 创建（和设置样式）标题栏。

Answer 2

如果你只是想发起一个环聊并通过 1 次点击复制一个环聊的链接，请查看这个扩展程序（这显然对 Google+ 来说仍然不是一件容易的事）：

https://chrome.google.com/webstore/detail/one-click-google-hangout/aokjakdncnbbfhhammcdkbblmcglpobn