google-chrome-app - Chrome 应用程序 webview 标签 - 如何及时注入(inject) CSS 或 JS？

Question

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

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

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

这是我的代码:

manifest.json

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

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

  "permissions": [
    "webview"
  ]
}

main.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 规则才被应用并且页面背景变为红色。在此示例中，我使用 内容加载 webview 事件，但我也尝试了所有其他 webview 事件: 加载开始 , 负载停止 , 加载提交 - 没有任何区别。

我也尝试使用 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'
  });
});