Question

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

Bellow是代码的一部分有什么想法吗？

的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上设置背景样式。如果您的目标是在加载页面时在您的应用中没有白框，则另一种方法可能是在页面加载时等待＃34; div覆盖页面加载时显示/隐藏的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>标记无法更改背景颜色

1 个答案: