Today I started looking at the Chrome extensions the first time ever, I have a very silly questions, I am sure the answer is NO to this as per google search but I just wanted to make sure from the community here.
Is it possible to use C# to write code instead of javascript?
Is it possible to use Partial Views (ASP.NET MVC) in chrome extension as it renders HTML?
I found this in VS Marketplace
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.GoogleChromeExtensionProjectTemplate Is there any other templates which have bootstrap etc
Cheers
You can create browser extension with C#.
Specifically, Using Client-side Blazor.
To publish, the following operations are required.
First, you publish like normal standalone app.
https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/blazor/webassembly?view=aspnetcore-3.1#standalone-deployment
Then, Remove the underscore from directory name. Since it cannot be used in the extension.
# remove underbar from directory name
mv _framework/_bin _framework/bin
mv _framework framework
# rewrite
sed 's/_bin/bin/g' framework/blazor.webassembly.js
sed 's/_framework/framework/g' framework/blazor.webassembly.js index.html
Then, Add manifest.json and setting CSP like this,
"content_security_policy": "script-src 'self' 'unsafe-eval' 'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='; object-src 'self'",
Blazor boot script add script tag to html, so you should add scripts hash to allow execute bootup script.
This is sample app I created.
https://github.com/key-moon/WeatherForecastExtensionWithBlazor
And, This is commentary (wrote in Japanese).
https://qiita.com/keymoon/items/03357e58eddf75871527
You can definitely create a Chrome Extension (fairly) easily using C# now with the help of Blazor WebAssembly.
If you are still interested in trying out or if anyone else is interested, I have created a package in the repository Blazor.BrowserExtension. Just follow the steps in the link to create the project.
With this package, you get the things that you need in an extension. Currently it supports Background, Popup (Browser Action), Options page and even Content Scripts (extra setup required). Just build the project and then you can load the unpacked extension from the output of the build.
Chrome Extensions API are accessible in Razor pages or from dependency injection. The APIs are imported from another package WebExtension.Net.
Yes you can write Chrome extension in C#, and it's easy.
I tried the below. It was fast and works right away:
Run dotnet new --install Blazor.BrowserExtension.Template.
Run dotnet new browserext --name to initialize a new project with the template.
Change the working directory into the newly created project directory.
Run dotnet build to build the project.
On Google Chrome:
Launch the Extensions page ( ⋮ → More tools → Extensions).
Switch on Developer mode.
Click on the Load unpacked button, then navigate to %ProjectDir%\bin\Debug\net5.0\ and select the foler browserextension.
Source: https://github.com/mingyaulee/Blazor.BrowserExtension
Thank you very much to "mingyaulee" for such an awesome work and sharing it.
UPDATES:
You can use C# based https://github.com/mingyaulee/Blazor.BrowserExtension project and build your chrome extension distributable.
ORIGINAL ANSWER:
Chrome Extension runs in the browser so you can not use C# in Chrome Extension Development.
Again the Chrome extension runs in the browser so you can not use ASP.NET MVC in Chrome Extension Development, but you can use ASP.NET MVC or any other language at server to generate the views and render them in the chrome extension using ajax.
Have a look at this: https://github.com/Ehesp/Chrome-Extension-Twitter-Bootstrap-3-Template
Technically, you can use a C# binary as a Native Host that talks to the JavaScript portion in the browser.
However, that would complicate your extension distribution, as you can't bundle the two to CWS; the native host component has to be separately installed.
This should only be used when you have legitimate reason to do something that's impossible within the browser sandbox.
Using Blazor and write it as normal html/css maybe? You still need to build blazor project though but I think it count as technically possible to write extension in C#
Related
I'm currently working on an ASP.NET Core Web API. One of my scenarios looks like this: the user selects a certain project type/language. Lets say the user selects Python or C#, meaning the user wants to create a Python or C# project template. Is it possible/is there an easy way to create such a project template within the code or would I have to create all files manually in the code? This is actually simply simulating the scenario when a user wants to create a new project in Visual Studio where he selects a template from the create a new project menu, its just that I want to do this with my own service.
For .NET: I would make use of the dotnet new cli tool, and use the ProcessStartInfo together with the Process.Start.
For Python, I would do the same, but require the intallation of pyscaffold.
You can use an embedded resource which is e.g. a ZIP file that contains all the files you need to make a project. You can then extract the ZIP file in your code. That way you can simply update the ZIP file in case you want to add something or update to a newer version of Visual Studio.
I have a .NET Core 3.1 ASP.Net project using razor views.
I'm using React components in those razor views by adding app.UseReact() to my startup.cs and then calling #html.React("myComponent") inside the .cshtml files. I'm not using React as an SPA.
This works fine when I have "myComponent" inside a .tsx file that's in the web project.
My company want to move some of these react components into npm packages so that they can be re-usable across projects. After moving the .tsx file for "myComponent" to an npm package, and referencing the package in package.json, upon running the project I get the error "myComponent" is not defined.
I've run a npm install and I can see that the package and the .tsx file for "myComponent" are in the node_modules folder of the project, but I'm guessing that asp.net mvc doesn't know to look in there for components when I'm calling #html.React("myComponent") inside the .cshtml file.
What do I need to do to make asp.net find the component? Do I need to explicitly import it somehow?
For now, I've managed to get by with a dirty hack. I'm using a pre-build script to copy the component's tsx file out of the node_modules folder and into the ClientApp folder, so that it sits along with the projects other react components. But it's not ideal because another developer may not realise that it's being copied there and try to edit it if they want to make changes, when really they should be editing the file in the npm package.
Direct Answer
Adding an npm package does not make it available to MVC automatically so you'll have to do some sort of file copy at some point in your development cycle. This can be a npm postinstall script or even something more complex such as a Grunt/Gulp task. You can even trigger the tasks via npm scripts if you choose to do so. All and all there's no "right" or "standard" way of doing react with MVC so you're free to make your own choices, carefully :)
if they want to make changes, when really they should be editing the file in the npm package.
Yes they will need to know about the npm package, clone its source git, update it, publish it, then update their project to the latest package version.
My Experience (read pain)
How can I forget this pain. It was a mistake to have React as a non-SPA because you're essentially making every main view an independent SPA and this has some major drawbacks. Firstly how do you share data between razor view and the component on the same page? The way we did it was to JSON stringify the data into a variable and then load this variable in the component (you can also opt-in for an additional http call to a web api endpoint). You can already see the start of fire as the pages evolve over time. Next problem we came across was bundling optimizations. We had to write a bunch of code in order to bundle per page and save outputs to the wwwroot folder. Developers coming on board often confused as to what this does in main razor views (e.g. Views/Home/Index.cshtml):
<script src="/Home.Index.min.js"></script>
Wait where is the /Home.Index.min.js file? This is created by the bundling task for this page at build time and copied to the scripts folder. Next question a developer would ask was why the page is missing its "user interface", of course they've forgotten to add an additional task for the new razor page they created (well and the script entry)... I can write for days on how terrible the idea of one bundle per razor page was and how messy the code became a few years into the maintenance cycle, not to mention the mysterious comeback of JQuery!!. The truth is that JS needs to be tree-shaken, minified and optimized. ASP.NET has no such a thing, the nuget packages simply glue your JS files and provide some level of minification, none of which can match standard bundlers such as webpack or parcel. This was another reason to have our bundling tasks run a bundler for each page. This also took care of the npm dependencies and third-party libraries.
My Recommendation (opinionated)
Save yourself and simply keep them separate. There's no such a thing as a razor page with react, that's a made up hack to make razor compatible with the evolved web technologies. Some of this applies to php so it's not just a Microsoft thing.
Best you can do is to create a SPA and use web api for back-end. You can have razor but they will be independent pages, for example the login page can be a razor page which then takes you to the home page that's a SPA written and bundled via react and the surrounding ecosystem. Interactions in the SPA happen over REST or even GraphQL apis.
We have a Roslyn-based static analysis tool. To build a C# project, either through an .sln or .csproj file, we use the MSBuildWorkspace. In this scenario, everything works well.
Recently, I bumped into an old-style Web Site Project (WSP), one that does not contain a .csproj - pages are compiled on-demand by the server (unless if precompiled). Not surprisingly, the MSBuildWorkspace doesn't support such "project-less" projects, as confirmed by item 2 in this reply.
The difficulty now is to feed the build with the necessary dependencies/assemblies. To deal with such use case, our static analysis tool offers a flag like -I path/to/dll so that users can specify directories where to find those DLLs - and I create MetadataRereferences for them. While this approach works, it doesn't come with the best user-experience, because the user is not always a developer and might not know all the locations/details.
I'd like to ask whether anyone is aware of an alternative approach to build a project-less Web Site Projects where we could "instruct"/setup Roslyn to mimic the process done by an actual web server to compile the aspx.cs files?
Thank you!
I have a webpack configuration that ties together all the dependencies for my web app. The web app is pretty old and is made using Web Forms. I'm going away from using the built in .NET minifier and bundle loader, and instead, towards using webpack's vendor packages etc.
My issue is that the web app is served out of a virtual directory, so I need to be able to reliably locate all required *.js files at runtime for the web app. In my mind I reckon this looks like webpack "somehow" producing an output of what files it has written (including hashes etc), then somehow putting this into my master pages or something. I know there is the HTML plugin for webpack but I don't know how to wrangle that to just produce a list of the *.js files, or if thats even on the right track.
How can I load my webpack'd *.js and *.css files from within Web Forms?
First, you need to install assets-webpack-plugin and configure it in your webpack. You can access this package here in npmjs.org
Why Is This Useful?
When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting). This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else.
There is a good tutorial here to adding styles and scripts dynamically in ASPX.
{
"one": {
"js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
},
"two": {
"js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
}
}
In your aspx or master-page of your web-forms, you can easily deserilize this JSON and load your script and style assets in your page.
I'm using assets-webpack-plugin in my MVC project and I'm sure it wouldn't be a problem to use it in ASPX WebForms.
Does anyone know if there is a way of automatically installing an extension on DNN using .net ?
It used to be possible using the infamous Install.aspx page, which has been removed for security reasons.
I've tried refactoring the code within Install.aspx so as to automate this, or even run it for a single module, but no luck. I've just got to the point where the zip has gets unpackaged, but what I really want is to know which and how the tables in the Sql Server database get modified.
I would appreciate any pointers on this.
It is quite hard to find all the tables that get updated, as well as the data that gets put into them.
My solution was is to simply call a copy of the installation page, which can be done from, say, a desktop app. For some reason the original Install.aspx won't run if you add it to the DNN installation. Step by step:
Find the Install.aspx and Install.aspx.cs files. They are deleted after the first installation, but you can get them from the original download.
Make a copy of these two files and rename them, e.g. MyInstall.aspx and MyInstall.aspx.cs
In Visual Studio run the DNN installation as a web site, not as a web project.
Now the page MyInstall will work just as the Install did. You can pass the parameters in the url.
Before you call the page, you need to put your module packages into the corresponding folder e.g. for modules install/module of the DNN Installation. To create the module package use Christoc's VS templates.