Question

这是我当前的manifest.json文件：

{
  "manifest_version": 2,
  "name": "My App",
  "description": "My App Description",
  "author": "My Name",
  "version": "1.0.0",
  "app": {
    "urls": [
      "http://www.example.com"
    ],
    "launch": {
      "web_url": "http://www.example.com",
      "container": "panel",
      "height": 500,
      "width": 500
    }
  },
  "icons": {
    "128": "app128.png"
  },
  "permissions": []
}

发生了什么：应用程序在带有系统边框的500x500px窗口中打开。

我需要的是：应用需要使用Chrome风格的边框打开。（与Google Keep应用相同，或者如果您没有Google Keep应用，请转到应用启动器=＆gt;汉堡按钮=＆gt;设置）

我需要更改或添加到manifest.json文件中？谢谢！

我获得的内容与我需要的内容截图 enter image description here

Answer 1

虽然我基本上不了解区分hosted app，Chrome App和packaged app的细微差别，但我有怀疑你的怀疑＆＃34;托管＆＃34;应用程序使用其主机＆＃34;的系统边框操作系统，并重写为＆＃34; Chrome＆＃34;应用程序会为您提供与Google Keep相同的Chrome风格边框。

请尝试重写;我非常好奇，看看它是否有效:(你必须使用<webview>）

的manifest.json

{
  // name, description, manifest_version, etc
  // NOT "launch"
  "app": { "background": { "scripts": ["main.js"] } },
  "permissions": ["webview"]
}

main.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("webview-embedder.html");
});

网页视图的embedder.html

<!DOCTYPE html>
...
  <body><webview src="http://www.example.com"></webview></body>
</html>

如果有效的话，我会被抽出来:-p。

Answer 2

我认为实现这一目标的最简单方法是在background.js中创建窗口时向窗口选项添加“frame”：“none”。

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create("frameless_window.html",
    {  frame: "none",
       id: "framelessWinID",
       innerBounds: {
         width: 360,
         height: 300,
         left: 600,
         minWidth: 220,
         minHeight: 220
      }
    }
  );
});

https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/frameless-window

Answer 3

请尝试进行以下CSS更改，将红色边框应用于无框chrome-app：

html,body {
    border: 1px solid #ff0000;
}

使用特殊窗口边框运行Chrome应用

3 个答案:

的manifest.json

main.js

网页视图的embedder.html