분류 javascript

브라우저 확장 프로젝트 파트 1 : 브라우저에 관한 모든 것

컨텐츠 정보

  • 조회 14 (작성일 )

본문

Browser sketchnote 


소개 

브라우저 확장은 브라우저에 추가 기능을 추가합니다. 그러나 빌드 하기 전에 브라우저가 작동하는 방식에 대해 약간 배워야 합니다.


브라우저 정보 


이 일련의 강의에서는 Chrome, Firefox 및 Edge 브라우저에서 작동하는 브라우저 확장 프로그램을 빌드하는 방법을 배웁니다. 이 부분에서는 브라우저가 작동하는 방식을 발견하고 브라우저 확장의 요소를 스캐 폴드합니다.


그러나 브라우저는 정확히 무엇입니까? 최종 사용자가 서버에서 콘텐츠에 액세스하여 웹 페이지에 표시 할 수 있도록 하는 소프트웨어 응용 프로그램입니다.


✅ 약간의 역사 : 최초의 브라우저는 'WorldWideWeb'이었으며 1990 년 Timothy Berners-Lee 경에 의해 만들어졌습니다.


early browsers 

사용자가 URL (Uniform Resource Locator) 주소, 일반적으로 http 또는 https 주소를 통해 Hypertext Transfer Protocol을 사용하여 인터넷에 연결하면 브라우저는 웹 서버와 통신하고 웹 페이지를 가져옵니다.


이 시점에서 브라우저의 렌더링 엔진은 휴대폰, 데스크톱 또는 랩톱과 같은 사용자의 장치에 이를 표시합니다.


또한 브라우저는 콘텐츠를 캐시 할 수 있으므로 매번 서버에서 검색 할 필요가 없습니다. 그들은 사용자의 브라우징 활동 내역을 기록하고, 사용자의 활동을 저장하는 데 사용되는 정보가 포함 된 작은 데이터 인 '쿠키'를 저장할 수 있습니다.


브라우저에 대해 기억해야 할 정말 중요한 점은 브라우저가 모두 동일하지 않다는 것입니다! 각 브라우저에는 장단점이 있으며 전문 웹 개발자는 웹 페이지가 크로스 브라우저에서 잘 작동하도록 만드는 방법을 이해해야 합니다. 여기에는 휴대폰과 같은 작은 뷰포트와 오프라인 사용자의 처리가 포함됩니다.

선호하는 브라우저에 북마크를 추가해야 하는 정말 유용한 웹 사이트는 caniuse.com입니다. 웹 페이지를 작성할 때 caniuse의 지원 기술 목록을 사용하면 사용자를 가장 잘 지원할 수 있습니다.


✅ 웹 사이트의 사용자층에서 가장 인기 있는 브라우저를 어떻게 알 수 있습니까? 분석 확인-웹 개발 프로세스의 일부로 다양한 분석 패키지를 설치할 수 있으며 다양한 인기 브라우저에서 가장 많이 사용되는 브라우저를 알려줍니다.


브라우저 확장 


브라우저 확장을 구축하려는 이유는 무엇입니까? 반복되는 작업에 빠르게 액세스해야 할 때 브라우저에 연결하면 편리합니다. 예를 들어 상호 작용하는 다양한 웹 페이지에서 색상을 확인해야 하는 경우 색상 선택기 브라우저 확장 프로그램을 설치할 수 있습니다. 비밀번호를 기억하는 데 문제가 있는 경우 비밀번호 관리 브라우저 확장 프로그램을 사용할 수 있습니다.


브라우저 확장 프로그램도 재미있게 개발할 수 있습니다. 그들은 잘 수행하는 제한된 수의 작업을 관리하는 경향이 있습니다.


✅ 가장 좋아하는 브라우저 확장 프로그램은 무엇입니까? 그들은 어떤 작업을 수행합니까?


확장 설치 


빌드를 시작하기 전에 브라우저 확장을 빌드하고 배포하는 프로세스를 살펴보세요. 브라우저마다 이 작업을 관리하는 방법이 조금씩 다르지만 Chrome 및 Firefox의 프로세스는 Edge의 이 예제와 비슷합니다.


screenshot of the Edge browser showing the open edge://extensions page and open settings menu 


본질적으로 프로세스는 다음과 같습니다.


  • npm run build를 사용하여 확장 프로그램 빌드
  • 오른쪽 상단에 있는 "설정 및 기타"버튼 (... 아이콘)을 사용하여 브라우저에서 확장 창으로 이동합니다.
  • 새 설치 인 경우 압축 해제로드를 선택하여 빌드 폴더에서 새 확장을 업로드합니다 (이 경우에는 / dist입니다).
  • 또는 이미 설치된 확장을 다시 로드하는 경우 다시로드를 클릭합니다.

✅이 지침은 사용자가 직접 구축 한 확장과 관련이 있습니다. 각 브라우저에 연결된 브라우저 확장 저장소에 릴리스 된 확장을 설치하려면 해당 저장소로 이동하여 선택한 확장을 설치해야 합니다.


시작하기 


지역의 탄소 발자국을 표시하는 브라우저 확장을 구축하여 해당 지역의 에너지 사용량과 에너지 원을 표시합니다. 확장에는 CO2 Signal의 API에 액세스 할 수 있도록 API 키를 수집하는 양식이 있습니다.


다음이 필요합니다.

  • API 키; 이 페이지의 상자에 이메일을 입력하면 이메일이 전송됩니다.
  • 전기지도에 해당하는 지역 코드 (예 : 보스턴에서는 'US-NEISO'사용).
  • 시작 코드. 시작 폴더를 다운로드하십시오. 이 폴더에서 코드를 완성하게 됩니다.
  • NPM-NPM은 패키지 관리 도구입니다. 로컬로 설치하면 package.json 파일에 나열된 패키지가 웹 자산에서 사용할 수 있도록 설치됩니다.

✅이 우수한 학습 모듈에서 패키지 관리에 대해 자세히 알아보세요.


잠시 시간을 내어 코드베이스를 살펴보십시오.


dist-| manifest.json (기본값은 여기에 설정)-| index.html (프론트 엔드 HTML 마크 업은 여기)-| background.js (백그라운드 JS는 여기)-| main.js (빌드 JS) src-| index.js ( 귀하의 JS 코드는 여기에 있습니다)


✅ API 키와 지역 코드가 있으면 나중에 사용할 수 있도록 메모에 저장하세요.


확장을 위한 HTML 빌드 


이 확장에는 두 가지 보기가 있습니다. 하나는 API 키 및 지역 코드를 수집합니다.


screenshot of the completed extension open in a browser, displaying a form with inputs for region name and API key. 


그리고 두 번째는 지역의 탄소 사용량을 표시합니다.


screenshot of the completed extension displaying values for carbon usage and fossil fuel percentage for the US-NEISO region. 


양식에 대한 HTML을 작성하고 CSS로 스타일을 지정하는 것으로 시작하겠습니다.


/dist 폴더에서 양식과 결과 영역을 작성합니다. index.html 파일에서 구분 된 양식 영역을 채 웁니다.


<form class="form-data" autocomplete="on">
	<div>
		<h2>New? Add your Information</h2>
	</div>
	<div>
		<label for="region">Region Name</label>
		<input type="text" id="region" required class="region-name" />
	</div>
	<div>
		<label for="api">Your API Key from tmrow</label>
		<input type="text" id="api" required class="api-key" />
	</div>
	<button class="search-btn">Submit</button>
</form>	

저장된 정보를 입력하고 로컬 저장소에 저장하는 양식입니다.


다음으로 결과 영역을 만듭니다. 최종 양식 태그 아래에 div를 추가합니다.


<div class="result">
	<div class="loading">loading...</div>
	<div class="errors"></div>
	<div class="data"></div>
	<div class="result-container">
		<p><strong>Region: </strong><span class="my-region"></span></p>
		<p><strong>Carbon Usage: </strong><span class="carbon-usage"></span></p>
		<p><strong>Fossil Fuel Percentage: </strong><span class="fossil-fuel"></span></p>
	</div>
	<button class="clear-btn">Change region</button>
</div>


이 시점에서 빌드를 시도 할 수 있습니다. 이 확장의 패키지 종속성을 설치해야 합니다.


npm install

이 명령은 노드 패키지 관리자 인 npm을 사용하여 확장의 빌드 프로세스를 위한 웹팩을 설치합니다. Webpack은 컴파일 코드를 처리하는 번 들러입니다. /dist/main.js에서이 프로세스의 출력을 볼 수 있습니다. 코드가 번들로 제공되었음을 알 수 있습니다.


지금은 확장이 빌드되어야 하며 확장으로 Edge에 배포하면 양식이 깔끔하게 표시됩니다.


축하합니다. 브라우저 확장을 구축하기 위한 첫 번째 단계를 수행했습니다. 이어지는 레슨에서는 더 기능적이고 유용하게 만들 것입니다.


https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/5-browser-extension/1-about-browsers/README.md