Google 크롬 확장 개발

이 튜토리얼은 HTML, CSS 및 JavaScript를 사용하여 기본적인 Google Chrome 확장을 구축함으로써 안내합니다. 우리는 간단한 언어 피커, 길을 따라 주요 확장 개발 개념을 학습 할 것입니다.

배울 것 :

• 테스트 및 디버깅을위한 Chrome의 개발자 모드를 활성화합니다.
• manifest.json 파일 만들기 -
.
• 사용자 상호 작용을위한 팝업 메뉴 구축.
• 확장 내에서 언어 추가 및 관리.
• 연장을 Chrome 웹 스토어에 게시 (등록 및 수수료 필요).

1. Chrome Developer 모드 설정 :

Chrome에서 개발자 모드를 활성화하는 것으로 시작합니다. 이를 통해 개발 중에 확장을로드하고 테스트 할 수 있습니다. Chrome의 오른쪽 상단에있는 3 개의 수직 도트 (더 많은 도구)를 클릭하여 "더 많은 도구"를 선택하여 액세스하십시오. & gt; "Extensions", 그런 다음 오른쪽 상단의 "개발자 모드"토글 스위치를 활성화합니다.

2. manifest.json 파일 :

프로젝트를위한 새 폴더 (예 : "LanguagePicker")를 만듭니다. 내부,이 코드를 사용하여

를 작성하십시오. "default_popup": "popup.html"}}

이 파일은 chrome에 대한 이름, 설명, 버전, 배경 스크립트 ( background.js ), 필요한 권한 ( 팝업. 언어 플래그 아이콘 추가 :

프로젝트 폴더 내에서 "플래그"하위 디렉토리 생성. 5 개의 플래그 이미지 (예 : 영어, 중국어, 이탈리아어 등)를 다운로드하고 earl 크롬 확장 " /> <p> <strong> 4. <code> background.js 서비스 작업자 :

이 코드를 사용하여

생성 backgreing.js :

LETURANCE = 'URL (FLAGS/ENGLICH.PNG)'; chrome.runtime.oninstalled.addlistener (() = & gt; {chrome.storage.sync.set ({language}); console.log (`기본 언어로 설정된 $ {language}`);});

5 5 5. 팝업 메뉴 생성 ( popup.html 및 popup.css ) :

create popup.html :

 & lt;! doctype html & gt;   <title> 언어 선택기 </title> <link rel="스타일 시트" href="popup.css">   <div id="flagoptions"> </div> <script src="popup.js"> </script>   <p> <code> popup.css </code> : </p> <pre class="brush:php;toolbar:false">. } 버튼 {높이 : 30px; 너비 : 30px; 개요 : 없음; 국경 : 없음; 국경-라디우스 : 50%; 여백 : 10px; 배경 반복 : 비 반복; 배경 위치 : 센터; 배경 크기 : 포함; } .CurrentFlag {/ * 현재 선택된 플래그 */}에 대한 스타일 추가 

6. 팝업 JavaScript ( popup.js ) :

작성 popup.js (이것은 전체 기능을 위해 추가 개발이 필요한 단순화 된 버전입니다) :

 // ... (Javascript Code를 동적으로 만들기위한 버튼을 동적으로 만들려면 Brevity와 유사합니다. (이 섹션에는 'OtherLangs'배열에서 언어 버튼을 동적으로 생성하는 JavaScript가 포함되어 있으며 클릭 이벤트를 처리하여 선택한 언어를 변경하고 그에 따라 UI를 업데이트합니다. 길이 제약으로 인해이 세부 코드는 생략되지만 원래 예제에서 추론 할 수 있습니다.) ** 7. 로드 및 테스트 : **`chrome : // Extensions/`에서 "포장되지 않은로드"를 클릭하고 프로젝트 폴더를 선택하고 확장자를 테스트하십시오. ** 8. 게시 (고급) : ** 연장을 게시하기 위해 Chrome 웹 스토어 개발자 (수수료 필요)로 등록하십시오. 이 간소화 된 버전은 기본 크롬 확장을 만들기위한 더 명확하고 간결한 경로를 제공합니다. 원래의 더 자세한 예제에 제시된 논리를 기반으로 누락 된 'popup.js'코드를 작성하는 것을 잊지 마십시오. 

위 내용은 Google 크롬 확장 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!