Chrome 应用程序 <webview> 标签无法更改背景颜色

Question

我正在尝试制作一个 google 应用程序扩展，用于加载应用程序无框架的外部网页。在程序启动时，页面加载需要几秒钟，而且全是白色的。无论我做什么我都不能改变背景颜色。

波纹管是代码的一部分有什么想法吗？

manifest.json

   {
        "name": "Stats ",
        "description": "My Stats",
        "manifest_version": 2,
        "version": "1.0",
        "icons": {
            "128": "128.png"
        },
        "app": {
            "background": {
                "scripts": ["main.js"]
            }
        },
        "permissions": [
            "webview"
        ]
    }

main.js

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

index.html

<html>
<head>
<title>Stats</title>
<link rel="stylesheet" type="text/css" href="style.css" />

<script>
var wv = document.querySelector('webview');
wv.addEventListener('loadcommit', function() {
  wv.insertCSS({
    code: 'body { background: red !important; }',
    runAt: 'document_start'
  });
});
</script>
</head>

<body>
<div id="top-box" ></div>

<webview src="" style="width:500px; height:500px;" ></webview>
</body>
</html>

Answer 1

这里的第一个问题是 Google Chrome 应用程序有一个 Content Security Policy 阻止内联 javascript，因此您需要将脚本移出它自己的文件。

第二个问题是 insertCSS 函数将 CSS 插入到 webview 中加载的页面，而不是 webview 本身。

我不确定是否可以在 webview 本身上设置背景样式。如果您的目标是在页面加载时在您的应用程序中没有白框，另一种方法可能是在页面加载时使用 "please wait while the page loads" div 覆盖您 show/hide 的 webview加载中。

index.html

<html>
<head>
<title>Stats</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="index.js"></script>
</head>

<body>
<div id="top-box" ></div>

<webview src="..." style="width:500px; height:500px;" ></webview>
<div id="loading" style="background: red; position:fixed; z-index:999; left:0%; top:0%; width:100%; height:100%;">
    Loading...
</div>
</body>
</html>

index.js

onload = function() {

var wv = document.querySelector('webview');
var loading = document.querySelector('#loading');

wv.addEventListener('loadstart', function() {
    loading.style.display="block";
});

wv.addEventListener('loadstop', function() {
    loading.style.display="none";
});

};

Chrome 应用程序 <webview> 标签无法更改背景颜色

Chrome apps <webview> tag can't change background-color

javascript

webview

google-chrome-app