我试图用"Blazor-webassembly-app"构建一个chrome扩展。它的工作很好，当它是在浏览器的动作按钮。事情是当它在浏览器上的动作它加载index.html文件，在那个文件中有一个标签<app>Loading for calling the APP.razor content...</app>所以当index.html文件运行它调用app-tag然后调用app.razor页面的内容然后app.razor页面调用mainLayout。Razor页面的内容和其他Razor页面的内容。这一切都是完美的，而通过浏览器操作按钮处理。以下是我附上的图片。
输入图片描述
输入图片描述
现在我要做的是将整个扩展UI注入到我的网页中，例如在google网页中。
这是我的清单。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文件的内容。你可以从下面的图片中看到。
输入图片描述
这是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标签它将调用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页面是否找到了路由。found和notFound内容都没有显示任何内容。我附上我的错误屏幕截图在这里。
输入图片描述
输入图片描述
我希望我清楚地解释了我的问题，如果我使用了错误的语法，我很抱歉。我很高兴分享我的扩展名文件，然后你可以在浏览器上运行它来检查我做错了什么。我是Blazor-extension extension的新手。
在内容脚本中运行Blazor WebAssembly有点棘手。
Chrome扩展只允许加载JavaScript文件作为内容脚本的一部分。因此，您必须导入Blazor和DotNet JavaScript文件，并在内容脚本中调用Blazor.start。但是，发货的Blazor和DotNet JS文件不支持在ES6import()中导入。
为了使构建Blazor WebAssembly到浏览器扩展更容易，我在存储库Blazor. browserextension中创建了一个包。您可以按照链接中的步骤转换现有项目。之后，按照额外的步骤将内容脚本添加到扩展中。
附加:
Chrome Extensions api可以在Razor页面或依赖注入中访问。这些api是从另一个包WebExtension.Net导入的。
另一个选择是下载Blazor. browserextension . build包，其中包含将Blazor项目构建为浏览器扩展所需的构建目标。
public static class IJSRuntimeExtensionMethods
{
public static async ValueTask InitializeInactivityTimer<T>(this IJSRuntime js,
DotNetObjectReference<T> dotNetObjectReference) where T : class
{
await js.InvokeVoidAsync("initializeInactivityTimer", dotNetObjectReference);
}
public static ValueTask<object> SetInLocalStorage(this IJSRuntime js, string key, string content)
=> js.InvokeAsync<object>("localStorage.setItem", key, content);
public static ValueTask<string> GetFromLocalStorage(this IJSRuntime js, string key)
=> js.InvokeAsync<string>( "localStorage.getItem", key);
public static ValueTask<object> RemoveItem(this IJSRuntime js, string key)
=> js.InvokeAsync<object>("localStorage.removeItem", key);
}`enter code here`