如何在网页中注入 Blazor-WebAssembly-app extension-UI？答案

【问题标题】：How to inject Blazor-WebAssembly-app extension-UI in webpage?如何在网页中注入 Blazor-WebAssembly-app extension-UI？
【发布时间】：2023-04-01 16:33:01
【问题描述】：

我正在尝试使用“Blazor-webassembly-app”构建一个 chrome 扩展。它在浏览器操作按钮上时工作正常。问题是当它在浏览器操作时它加载 index.html 文件并且在该文件中有一个标签<app>Loading for calling the APP.razor content...</app> 所以当 index.html 文件运行时它调用 app-tag 然后调用 app.razor 页面的内容然后 app.razor page 调用 mainLayout.razor 页面的内容和其他 razor 页面的内容。在通过浏览器操作按钮处理时，这一切都完美无缺。我附在下面的图片。

enter image description here

现在我要做的是将整个扩展 UI 注入我的网页，例如在谷歌网页中。

这是我的 manifest.json 代码：

{
  "manifest_version": 2,
  "name": "WebAssembly C#",
  "version": "1.0",
  "description": ".NET inside a chrome extension",
  "permissions": [
    "activeTab",
    "declarativeContent",
    "storage"
  ],
  "background": {
    "scripts": [
      // "js/background.js",
      "js/jquery-3.5.1.min.js",
      "js/site.js"
      //"framework/wasm/dotnet.3.2.0",
      //"framework/wasm/dotnet.timezones.dat",
      //"framework/wasm/dotnet.wasm"
      //"framework/blazor.webassembly.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_popup": "index.html"
  },
  "content_scripts": [
    {
      "css": [
        "css/bootstrap/bootstrap.min.css",
        "css/open-iconic/font/css/open-iconic-bootstrap.min.css",
        "css/app.css",
        "css/StyleSheet.css"
      ],
      "matches": [
        "https://www.google.ae/*",
        "https://www.google.am/*",
        "https://www.google.as/*",
        "https://www.google.at/*",
        "https://www.google.az/*",
        "https://www.google.ba/*",
        "https://www.google.be/*",
        "https://www.google.bg/*",
        "https://www.google.bi/*",
        "https://www.google.bs/*",
        "https://www.google.ca/*",
        "https://www.google.cd/*",
        "https://www.google.cg/*",
        "https://www.google.ch/*",
        "https://www.google.ci/*",
        "https://www.google.cl/*",
        "https://www.google.co.bw/*",
        "https://www.google.co.ck/*",
        "https://www.google.co.cr/*",
        "https://www.google.co.hu/*",
        "https://www.google.co.id/*",
        "https://www.google.co.il/*",
        "https://www.google.co.im/*",
        "https://www.google.co.in/*",
        "https://www.google.co.je/*",
        "https://www.google.co.jp/*",
        "https://www.google.co.ke/*",
        "https://www.google.co.kr/*",
        "https://www.google.co.ls/*",
        "https://www.google.co.ma/*",
        "https://www.google.co.nz/*",
        "https://www.google.co.th/*",
        "https://www.google.co.ug/*",
        "https://www.google.co.uk/*",
        "https://www.google.co.uz/*",
        "https://www.google.co.ve/*",
        "https://www.google.co.vi/*",
        "https://www.google.co.za/*",
        "https://www.google.co.zm/*",
        "https://www.google.com.af/*",
        "https://www.google.com.ag/*",
        "https://www.google.com.ar/*",
        "https://www.google.com.au/*",
        "https://www.google.com.bd/*",
        "https://www.google.com.bo/*",
        "https://www.google.com.br/*",
        "https://www.google.com.bz/*",
        "https://www.google.com.co/*",
        "https://www.google.com.cu/*",
        "https://www.google.com.do/*",
        "https://www.google.com.ec/*",
        "https://www.google.com.eg/*",
        "https://www.google.com.et/*",
        "https://www.google.com.fj/*",
        "https://www.google.com.gi/*",
        "https://www.google.com.gt/*",
        "https://www.google.com.hk/*",
        "https://www.google.com.jm/*",
        "https://www.google.com.kw/*",
        "https://www.google.com.ly/*",
        "https://www.google.com.mt/*",
        "https://www.google.com.mx/*",
        "https://www.google.com.my/*",
        "https://www.google.com.na/*",
        "https://www.google.com.nf/*",
        "https://www.google.com.ni/*",
        "https://www.google.com.np/*",
        "https://www.google.com.om/*",
        "https://www.google.com.pa/*",
        "https://www.google.com.pe/*",
        "https://www.google.com.ph/*",
        "https://www.google.com.pk/*",
        "https://www.google.com.pr/*",
        "https://www.google.com.py/*",
        "https://www.google.com.qa/*",
        "https://www.google.com.sa/*",
        "https://www.google.com.sb/*",
        "https://www.google.com.sg/*",
        "https://www.google.com.sv/*",
        "https://www.google.com.tj/*",
        "https://www.google.com.tr/*",
        "https://www.google.com.tw/*",
        "https://www.google.com.ua/*",
        "https://www.google.com.uy/*",
        "https://www.google.com.uz/*",
        "https://www.google.com.vc/*",
        "https://www.google.com.vn/*",
        "https://www.google.com/*",
        "https://www.google.cz/*",
        "https://www.google.de/*",
        "https://www.google.dj/*",
        "https://www.google.dk/*",
        "https://www.google.dm/*",
        "https://www.google.ee/*",
        "https://www.google.es/*",
        "https://www.google.fi/*",
        "https://www.google.fm/*",
        "https://www.google.fr/*",
        "https://www.google.gg/*",
        "https://www.google.gl/*",
        "https://www.google.gm/*",
        "https://www.google.gr/*",
        "https://www.google.hn/*",
        "https://www.google.hr/*",
        "https://www.google.ht/*",
        "https://www.google.hu/*",
        "https://www.google.ie/*",
        "https://www.google.is/*",
        "https://www.google.it/*",
        "https://www.google.jo/*",
        "https://www.google.kg/*",
        "https://www.google.kz/*",
        "https://www.google.li/*",
        "https://www.google.lk/*",
        "https://www.google.lt/*",
        "https://www.google.lu/*",
        "https://www.google.lv/*",
        "https://www.google.md/*",
        "https://www.google.mn/*",
        "https://www.google.ms/*",
        "https://www.google.mu/*",
        "https://www.google.mw/*",
        "https://www.google.net/*",
        "https://www.google.nl/*",
        "https://www.google.no/*",
        "https://www.google.nr/*",
        "https://www.google.nu/*",
        "https://www.google.off.ai/*",
        "https://www.google.org/*",
        "https://www.google.pl/*",
        "https://www.google.pn/*",
        "https://www.google.pt/*",
        "https://www.google.ro/*",
        "https://www.google.ru/*",
        "https://www.google.rw/*",
        "https://www.google.sc/*",
        "https://www.google.se/*",
        "https://www.google.sh/*",
        "https://www.google.si/*",
        "https://www.google.sk/*",
        "https://www.google.sm/*",
        "https://www.google.sn/*",
        "https://www.google.tm/*",
        "https://www.google.to/*",
        "https://www.google.tp/*",
        "https://www.google.tt/*",
        "https://www.google.tv/*",
        "https://www.google.uz/*",
        "https://www.google.vg/*",
        "https://www.google.vu/*",
        "https://www.google.ws/*"
        //"https://www.facebook.com/"
      ],
      "run_at": "document_end",
      "js": [
        "js/jquery-3.5.1.min.js",
        "js/init.js",
        "js/site.js"
      ]
    }
  ],
  "icons": { "128": "webassembly.png" },
  "web_accessible_resources": [
    "index.html",
    "js/init.js",
    "js/site.js",
    "framework/wasm/dotnet.3.2.0",
    "framework/wasm/dotnet.timezones.dat",
    "framework/wasm/dotnet.wasm",
    "css/open-iconic/font/fonts/open-iconic.svg",
    "css/open-iconic/font/fonts/open-iconic.ttf"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='; object-src 'self'"
}

我在这个文件代码中加载了我的 background_scripts 文件“Init.js”

(function () {
    //alert("Hello from Init.js i.e; content_script").
    $.get(chrome.runtime.getURL('index.html'), function (data) {
        debugger
        $(data).appendTo('#rhs').
    }).
})().

我正在获取 index.html 文件的内容。你可以在下面的图片中看到它。

enter image description here

这是 index.html 文件的代码和内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>WebAssemblyBlazorChromeExtension</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
</head>
<body>
    <app>Loading for calling the APP.razor content...</app>
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">????</a>
    </div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="framework/blazor.webassembly.js"></script>
    <script src="js/site.js"></script>
</body>
</html>

然后有 app-tag 将调用 app.razor 页面的内容。您可以在 app.razor 文件代码中看到它：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <p>You found the routeData.</p>
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

但不是调用 app.razor 页面内容应用程序在显示 index.html 页面内容 后停止。我什至不知道 app.razor 页面是否找到了该路线或未找到该路线。找到的和未找到的内容都没有显示任何内容。我在此处附上我的错误屏幕截图。

enter image description here

我希望，我清楚地解释了我的问题，如果我使用了错误的语法，我很抱歉。我很高兴分享我的扩展文件，然后您可以在浏览器上运行它来检查我做错了什么。我实际上是 Blazor 扩展扩展的新手。

【问题讨论】：

最好的方法是创建一个iframe 元素并将其指向扩展程序中的一个html文件。 html 文件应在web_accessible_resources 中列出。在该 iframe 中，您将拥有一个完整的扩展环境，就像在 browserAction 中一样。例子很多，自己找一个吧。
@wOxxOm 能否请您参考我一两个示例链接。

标签： asp.net-mvc asp.net-core google-chrome-extension blazor blazor-webassembly

【解决方案1】：

在内容脚本中运行 Blazor WebAssembly 有点棘手。

Chrome 扩展只允许加载 JavaScript 文件作为内容脚本的一部分。因此，您必须导入 Blazor 和 DotNet JavaScript 文件并在您的内容脚本中调用 Blazor.start。但是，随附的 Blazor 和 DotNet JS 文件不支持使用 ES6 import() 导入。

为了使构建 Blazor WebAssembly 到浏览器扩展更容易，我在存储库 Blazor.BrowserExtension 中创建了一个包。您可以按照链接中的步骤转换现有项目。之后，按照extra steps 将内容脚本添加到您的扩展程序。

附加：

Chrome 扩展 API 可在 Razor 页面或依赖注入中访问。 API 是从另一个包 WebExtension.Net 导入的。

另一种选择是下载包 Blazor.BrowserExtension.Build，其中包含将 Blazor 项目构建到浏览器扩展中所需的构建目标。

【讨论】：