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

我使用以下代码将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">
`)
 ...

---

如何添加vendor/bootstrap.css？

似乎您正在尝试将引导css的本地副本添加到页面中

但是，当您通过添加显式的

元素并给出相对路径来执行此操作时，它是相对于所讨论的页面的（在本例中为

https://app.yinxiang.com/

），而不是应用程序

如果必须，您可以从内容脚本中引用内部应用程序内容，但您必须做两件事：

• 使用绝对路径而不是相对路径
• 使用

  webview.partitions

  manifest键将资源声明为可访问的webview。请参阅文档中的

---

也就是说，我认为你根本不需要这样做；您已经将CSS声明为与内容脚本一起注入。它应该已经包含在您的

find_dialog.js

中，因此您的额外代码是多余的。如果不是，请仔细检查您的（本地、相对）路径。

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

但是，当您通过添加显式的

元素并给出相对路径来执行此操作时，它是相对于所讨论的页面的（在本例中为

https://app.yinxiang.com/

），而不是应用程序

如果必须，您可以从内容脚本中引用内部应用程序内容，但您必须做两件事：

• 使用绝对路径而不是相对路径
• 使用

  webview.partitions

  manifest键将资源声明为可访问的webview。请参阅文档中的

---

也就是说，我认为你根本不需要这样做；您已经将CSS声明为与内容脚本一起注入。它应该已经包含在您的

find_dialog.js

中，因此您的额外代码是多余的。如果不是，请仔细检查您的（本地、相对）路径。

我使用以下方法进行修复：

在manifest.json中，添加webivew可访问的资源

  "permissions": [
    "webview",
    "alwaysOnTopWindows",
    "http://*/",
    "https://*/"
  ],
  "webview": {
    "partitions": [
      {
        "name": "static",
        "accessible_resources": [
          "vendor/bootstrap.css"
        ]
      }
    ]
  },

在find_dialog.js中，使用chrome.runtime.getURL（'vendor/bootstrap.css'）获取css完整url

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

$（文档）.ready（函数（）{
$（“正文”）。附加(`
`)

我使用以下方法修复：

在manifest.json中，添加webivew可访问的资源

  "permissions": [
    "webview",
    "alwaysOnTopWindows",
    "http://*/",
    "https://*/"
  ],
  "webview": {
    "partitions": [
      {
        "name": "static",
        "accessible_resources": [
          "vendor/bootstrap.css"
        ]
      }
    ]
  },

在find_dialog.js中，使用chrome.runtime.getURL（'vendor/bootstrap.css'）获取css完整url

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

$（文档）.ready（函数（）{
$（“正文”）。附加(`
`)

它显示404，因此它尝试加载该文件，但失败了，因为它无法在指定的url处找到该文件：

https://app.yinxiang.com/vendor/bootstrap.css

。url很可能是错误的。（例如，bootstrap.css是否直接在/vendor中找到？）它显示404，因此它尝试加载该文件，但失败了，因为它无法在指定的url处找到该文件：

https://app.yinxiang.com/vendor/bootstrap.css

。url很可能是错误的。（例如，bootstrap.css是否直接在/vendor中找到？）我仍然很好奇为什么你首先需要它。是不是

addContentScripts

的

css

部分不起作用了？我认为

css:{files:[“vendor/bootstrap.css”]}

是没有用的，我忘了删除它，因为chromeappdoc有这个，为什么你认为它没有用？甚至我添加

css:{files:[“vendor/bootstrap.css”}

，我在background.html devtool和window.html devtool中找不到它。你为什么要这样做？它是在webview中注入的，而不是在你的应用程序或后台窗口中。要检查它，你需要

chrome://inspect

我仍然很好奇为什么您首先需要它。

css

是

addContentScripts

的一部分吗ing？我认为

css:{files:[“vendor/bootstrap.css”]}

是无用的，我忘了删除它，因为chrome app doc有这个功能为什么你认为它是无用的？即使我添加

css:{files:[“vendor/bootstrap.css”]}

，我在background.html devtool和window.html devtool中找不到它。你为什么要这样做？它是在webview中注入的，而不是在你的应用程序或后台窗口中。要检查它，你需要

chrome://inspect