C\#를 이용 하여 브 라 우 저 확장 전 과정 기록 개발

Intro
얼마 전 저 스 틴 사내 가 공유 하 는 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>

나 는 Blazore WebExtension Demo 라 는 예제 항목 을 만 들 었 다.
현재 프로젝트 템 플 릿 에 템 플 릿 인자 가 있 습 니 다.-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(기본 입구)

options(플러그 인 에서 오른쪽 단 추 를 눌 렀 을 때의'옵션'에 대응 하 는 페이지)

popup(플러그 인 클릭 시 표시 되 는 popup 내용)

그 다음 에 wwroot 디 렉 터 리 에 있 는 manifest.json 파일 입 니 다.이 파일 은 플러그 인의 이름,소개 및 플러그 인 에 필요 한 권한 과 페이지 설정 등 정 보 를 정의 합 니 다.manifest.json 에 대한 자세 한 정 보 는 문 서 를 참고 할 수 있 습 니 다.https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json
dotnet build 를 실행 한 후의 구조 아래:

브 라 우 저 확장 스 크 립 트:브 라 우 저 확장 과 상호작용 하 는 js

WebExtensions Scripts:WebExtensions 는 js 와 상호작용 하 는 일부 js

framework:Blazor 프로젝트 의존,의존 하 는 dotnet webassembly 환경 과 일부 프로그램 집합 포함

Further
진일보 한 개발 을 하려 면 어떻게 해 야 합 니까?
코드 에 브 라 우 저 확장 플러그 인 을 사용 하려 면 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;
});

구체 적 인 브 라 우 저 확장 API 는 MDN 과 Chrome 브 라 우 저 확장 API 문서 및 Google 에서 제공 하 는 samples 를 참고 할 수 있 습 니 다.https://github.com/GoogleChrome/chrome-extensions-samples
저도 간단 한 브 라 우 저 플러그 인 을 만 들 려 고 했 습 니 다.간단 한 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

https://github.com/mingyaulee/Blazor.BrowserExtension

https://github.com/newbe36524/Amazing-Favorites

https://github.com/mingyaulee/WebExtensions.Net

https://github.com/WeihanLi/SparkTodo/tree/master/SparkTodo.WebExtension

https://github.com/WeihanLi/SamplesInPractice/tree/master/BlazorSample/BlazorWebExtensionDemo

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

Chrome Extensions API Reference

https://github.com/GoogleChrome/chrome-extensions-samples