Chrome 应用程序 webview 标签 - 如何及时注入 CSS 或 JS？

Question

我正在编写一个应用程序，该应用程序应将特定网站嵌入到 <webview> 并注入一些 CSS 和 JS 代码以使该网站适应在某些触摸感应设备上查看。

问题是我找不到在页面加载时注入代码的方法，而是在页面呈现后注入代码，因此所有修改都变得可见。

虽然代码注入与 chrome 扩展和内容脚本完美配合（通过在 manifest.json 上将 run_at 属性设置为 document_end，但 webviews 并非如此。

这是我的代码：

ma​​nifest.json

{
  "name": "App",
  "version": "0.0.1",
  "manifest_version": 2,

  "app": {
    "background": {
      "scripts": [ "main.js" ]
    }
  },

  "permissions": [
    "webview"
  ]
}

ma​​in.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', { state: "normal" },
    function(win) {
      win.contentWindow.onload = function() {
        var wv = this.document.querySelector('webview');
        wv.addEventListener('contentload', function(e) {
          this.insertCSS({ code: "body { background: red !important; }" });
        });
      }
    }
  );
});

index.html

<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>

要点相同：https://gist.github.com/OnkelTem/ae6877d2d7b2bdfea5ae

如果你尝试这个应用程序，你会看到只有在 webview 加载并完全呈现后，我的 CSS 规则才被应用并且页面背景变为红色。在这个例子中，我使用了 contentload webview 事件，但我也尝试了所有其他 webview 事件：loadstart、loadstop、loadcommit - 没有任何区别。

我也尝试使用 webview.contentWindow，但这个对象一直是空的，尽管应该使用 documentation states。

有什么想法吗？有可能吗？

Answer 1

首先，使用loadcommit event 而不是contentload event。

其次，将runAt: 'document_start' 添加到webview.insertCSS 调用（如果您想使用它，这也适用于webview.executeScript）。 executeScript 的实现与扩展的 executeScript 实现共享，但不幸的是应用文档不完整。看看chrome.tabs.insertCSS，直到应用文档修复。

这是一个可以按需要工作的示例：

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', { state: 'normal' },
    function(win) {
      win.contentWindow.onload = function() {
        var wv = this.document.querySelector('webview');
        // loadcommit instead of contentload:
        wv.addEventListener('loadcommit', function(e) {
          this.insertCSS({
            code: 'body { background: red !important; }',
            runAt: 'document_start'  // and added this
          });
        });
      }
    }
  );
});

注意：虽然前面的工作正常，但我建议将操作 webview 的脚本放在 index.html 中，因为生成的代码要整洁得多。

// main.js
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', { state: 'normal' });
});

<!-- index.html -->
<webview src="https://developer.chrome.com/apps/tags/webview" style="width: 100%; height: 100%;"></webview>
<script src="index.js"></script>

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