C\#를 이용 하여 브 라 우 저 확장 전 과정 기록 개발
얼마 전 저 스 틴 사내 가 공유 하 는 Blazor 개발 브 라 우 저 확장 을 듣 고 좋 았 습 니 다.C\#더 재 미 있 는 일 을 할 수 있 게 되 었 습 니 다.
서버 에서 해 야 할 많은 일 들 이 클 라 이언 트 에서 이 루어 질 수 있 고 기 존의 C\#코드 를 고도 로 재 활용 할 수 있 으 며 브 라 우 저 에서 재 미 있 는 일 을 많이 하기 때문에 글 한 편 을 써 서 여러분 과 공유 하여 C\#도 브 라 우 저 확장 이 가능 하 다 는 것 을 알려 드 리 고 싶 습 니 다.
BlazorBrowserExtension
Blazor.BrowserExtension 은 Blazor 를 사용 하여 브 라 우 저 확장 을 개발 하 는 오픈 소스 프로젝트 이자 우리 가 소개 하고 자 하 는 주인공 입 니 다.프로젝트 주 소 는:https://github.com/mingyaulee/Blazor.BrowserExtension자바 스 크 립 트 대신 Blazor WebAssembly 모드 로 작업 합 니 다.이 항목 은 작가 의 다른 항목 에 의존한다.https://github.com/mingyaulee/WebExtensions.Net,WebExtensions.Net 이 프로젝트 는 주로 브 라 우 저 확장 과 브 라 우 저 를 상호작용 하 는 C\#API 를 제공 하고 Blazor.BrowserExtension 프로젝트 는 이 를 바탕 으로 브 라 우 저 확장 개발 모델 과 Blazor 를 결합 시 킵 니 다.또한 MS Build 의 자동화 에 힘 입 어 브 라 우 저 확장 에 필요 한 자원 파일 을 생 성하 여 C\#브 라 우 저 확장 을 위 한 시작 난이 도 를 더욱 간소화 합 니 다.
Get Started
브 라 우 저 확장 을 시작 하려 면 프로젝트 템 플 릿 을 기반 으로 만 들 수 있 습 니 다.먼저 프로젝트 템 플 릿 을 설치 하고 아래 명령 을 통 해 템 플 릿 을 설치 해 야 합 니 다.
dotnet new --install Blazor.BrowserExtension.Template
dotnet new browserext --name <ProjectName>
현재 프로젝트 템 플 릿 에 템 플 릿 인자 가 있 습 니 다.-F 를 통 해 프로젝트 의 TargetFramework 를 지정 할 수 있 습 니 다.기본 값 은 net 5.0 이 고 net 6.0 으로 지정 하여.NET 6 프로젝트 를 만 들 수 있 습 니 다.
그 후에 우 리 는 프로젝트 디 렉 터 리 로 전환 하여 dotnet build 를 사용 하여 프로젝트 를 구축 합 니 다.build 가 성공 한 후에 프로젝트 의 bin 디 렉 터 리 에서 wwroot 디 렉 터 리 를 볼 수 있 습 니 다.이 디 렉 터 리 는 브 라 우 저 플러그 인 에 필요 한 모든 파일 을 포함 하고 있 습 니 다.이때 우리 의 브 라 우 저 플러그 인 은 이미 완성 되 었 습 니 다.
이 어 브 라 우 저 확장 을 사용 해 보 겠 습 니 다.브 라 우 저 확장 프로그램 페이지(chrome 에서 직접 방문 할 수 있 습 니 다.chrome://extensions/)개발 자 모드 를 사용 해 야 로 컬 브 라 우 저 플러그 인 을 직접 불 러 올 수 있 습 니 다.그리고'압축 해 제 된 확장 프로그램 불 러 오기'를 클릭 한 다음 위 에 있 는 wwroot 디 렉 터 리 를 선택 하면 플러그 인 을 불 러 올 수 있 습 니 다.
Blazore WebExtension Demo 는 바로 앞에서 만 든 브 라 우 저 플러그 인 프로젝트 입 니 다.불 러 온 후에 기본 항목 의 행동 은 Tab 를 여 는 것 입 니 다.다음 그림 과 같 습 니 다.
저 희 는 VS 를 통 해 프로젝트 를 만 들 수 있 습 니 다.작성 자가 제공 하 는 Gif 프 리 젠 테 이 션 을 참고 할 수 있 습 니 다.
VS demo
Structure
프로젝트 구 조 는 다음 과 같다.
이것 이 바로 Blazor 프로젝트 의 프로젝트 구조 로 일반적인 Blazor 프로젝트 와 큰 차이 가 없다 는 것 을 알 수 있다.
프로젝트 템 플 릿 은 자동 으로 몇 개의 페이지 를 생 성하 여 필요 에 따라 수정 할 수 있 습 니 다.
4.567917.background(백 스테이지 페이지,보통 백 스테이지 논리).4.567918.
index(기본 입구)
dotnet build 를 실행 한 후의 구조 아래:
브 라 우 저 확장 스 크 립 트:브 라 우 저 확장 과 상호작용 하 는 js
진일보 한 개발 을 하려 면 어떻게 해 야 합 니까?
코드 에 브 라 우 저 확장 플러그 인 을 사용 하려 면 IWebExtensions Api 만 입력 하면 됩 니 다.이것 은 자동 으로 생 성 된 Program.cs 에서 AddBrowserExtension Service 방법 에 등 록 된 것 입 니 다.자세 한 내용 은 참고 할 수 있 습 니 다.https://github.com/mingyaulee/Blazor.BrowserExtension/blob/main/src/Blazor.BrowserExtension/Extensions/ServiceCollectionExtensions.cs#L25
builder.Services.AddBrowserExtensionServices(options =>
{
options.ProjectNamespace = typeof(Program).Namespace;
});
저도 간단 한 브 라 우 저 플러그 인 을 만 들 려 고 했 습 니 다.간단 한 todo 알림 을 만 들 었 습 니 다.하나의 notification API 만 사 용 했 습 니 다.데이터 관 리 는 EF Core In Memory 를 바탕 으로 이 루어 졌 고 예전 의 API 와 간단 한 코드 공 유 를 실 현 했 습 니 다.필요 한 것 은 시험 에 참가 할 수 있 습 니 다.https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension，기능 설명 은 다음 그림 을 참고 할 수 있 습 니 다.
SparkTodo Web Extension
More
Blazor 기반 브 라 우 저 확장 프로그램 을 지원 하 는 것 을 주목 할 수 있 습 니 다.https://github.com/mingyaulee/Blazor.BrowserExtension
브 라 우 저 플러그 인 을 개발 하려 면 브 라 우 저 확장 API 를 어떻게 사용 하 는 지 알 아야 할 때 가 많 습 니 다.Google 이 제공 하 는 일련의 chrome extension 예제 를 참고 하 십시오.API 는 기본적으로 같 아야 합 니 다.또한 C\#API 는 강 한 유형 이 므 로 더욱 우호 적 이 고 유지 하기 편리 할 수 있 습 니 다.서버 에서 하 는 일 들 은 클 라 이언 트 로 옮 겨 할 수 있 고 C\#를 사용 하여 브 라 우 저 에서 더 많은 재 미 있 는 일 을 할 수 있 습 니 다.어서 C\#개발 브 라 우 저 로 확장 하 세 요~
Justin 사내 가 최근 에 하고 있 는 브 라 우 저 확장 프로젝트 주 소 는?https://github.com/newbe36524/Amazing-Favorites관심 있 는 것 은 주목 하 셔 도 됩 니 다.또한 큰 사내 의 이전 공유 예제 코드 는 참고 하 실 수 있 습 니 다.https://github.com/newbe36524/Newbe.Demo/tree/master/src/BlogDemos/Newbe.Blazor。
C\#개발 브 라 우 저 를 이용 한 확장 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 C\#개발 브 라 우 저 확장 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!
References
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
C#Task를 사용하여 비동기식 작업을 수행하는 방법라인이 완성된 후에 이 라인을 다시 시작할 수 없습니다.반대로 조인(Join)만 결합할 수 있습니다 (프로세스가 현재 라인을 막습니다). 임무는 조합할 수 있는 것이다. 연장을 사용하여 그것들을 한데 연결시키는 것이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
