javascript - 如何在 webview.addContentScripts 之后在正文中插入 css 文件

Question

我使用以下代码将 css 文件添加到 webview

  webview.addContentScripts([
    {
      name: 'myRule',
      matches: ['https://app.yinxiang.com/*'],
      css: {files: ["vendor/bootstrap.css"]},
      js: {files: ["vendor/jq.js", "vendor/keymaster.js", "ctn.js", "find_dialog.js"]},
      run_at: 'document_start'
    }]
  )

在 find_dialog.js 中

$(document).ready(function () {`
  $("body").append(`
  <link rel="stylesheet" href="vendor/bootstrap.css">
`)
 ...

在 webview devtool 中，它引发

Failed to load resource: the server responded with a status of 404 (Not Found) -- https://app.yinxiang.com/vendor/bootstrap.css 

如何添加vendor/bootstrap.css？

Answer 1

似乎您正在尝试将 Bootstrap CSS 的本地副本添加到页面中。

但是，当您通过添加显式 <link> 来实现时元素，并提供一个相对路径，它是相对于相关页面(在本例中为 https://app.yinxiang.com/ )，而不是您的应用程序。

如果需要，您可以从内容脚本中引用内部应用内容，但您必须做两件事:

• 使用绝对路径provided by chrome.runtime.getURL() 而不是相对路径。
• 使用 webview.partitions 将资源声明为 webview 可访问的 list key 。参见 Accessing packaged resources在文档中。

也就是说，我认为您根本不需要这样做；您已经将 CSS 声明为与您的内容脚本一起注入(inject)。它应该已经包含在您的 find_dialog.js 中了，所以你的额外代码是多余的。如果不是，请仔细检查您的(本地、相对)路径。