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

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应用，请转到应用启动器=>汉堡包按钮=>设置）

我需要在manifest.json文件中进行更改或添加什么？谢谢！

我所得到的与我所需要的截屏： “在此处输入图像描述”

Answer 1

尽管我基本上不知道区分hosted app，Chrome App和packaged app的细微差别，但我有一个[[suspicion，您的“托管”应用使用其“主机”的系统边界操作系统，并重写为“ Chrome”应用程序，将为您提供与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"); });
webview-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应用运行特殊的窗口边框

问题描述投票：4回答：3

3个回答

`{ // 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"); });`
webview-embedder.html

`<!DOCTYPE html> ... <body><webview src="http://www.example.com"></webview></body> </html>`
如果可行的话，我会非常高兴的：-p。

最新问题

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

问题描述 投票：4回答：3

3个回答

{ // 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"); }); webview-embedder.html

<!DOCTYPE html> ... <body><webview src="http://www.example.com"></webview></body> </html> 如果可行的话，我会非常高兴的：-p。

最新问题

问题描述投票：4回答：3

`{ // 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"); });`
webview-embedder.html

`<!DOCTYPE html> ... <body><webview src="http://www.example.com"></webview></body> </html>`
如果可行的话，我会非常高兴的：-p。