如何制作Chrome扩展标题栏，例如Google Hangouts？

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。 为什么我的“面板”会以弹出式方式打开？

为了使扩展能够打开面板窗口，用户必须启用此（实验性）功能（当然底层操作系统必须支持它）。如果未启用面板，则“panel”或“detached_pa​​nel”类型的所有窗口都将打开为“popup”类型（ documentation ）。

---

3。 用户如何启用面板？

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

---

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

简短回答：源代码中列出了白名单 更长的答案：看看 this answer 。

---

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

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

---

6. 我有其他选择吗？

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

Answer 2

如果您只是想要发布视频群聊并通过一次点击将链接复制到该视频群聊，请查看此扩展程序（这显然对Google +来说不是一件容易的事）：

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