Google 크롬 확장 개발

이 튜토리얼은 HTML, CSS 및 JavaScript를 사용하여 기본적인 Google Chrome 확장을 구축하도록 안내합니다. 우리는 간단한 언어 선택기를 만들어 내며, 그 과정에서 주요 확장 개발 개념을 배우는 것입니다.

배울 것 :

• 테스트 및 디버깅을위한 Chrome의 개발자 모드를 활성화합니다.
• manifest.json 파일 생성 - Extension의 제어 센터.
• 언어 선택을위한 플래그 아이콘 통합.
• 사용자 상호 작용을위한 팝업 메뉴 구축.
• 확장 내에서 언어 추가 및 관리.
• Chrome 웹 스토어에 확장을 게시합니다 (등록 및 수수료가 필요합니다).

1. 크롬 개발자 모드 설정 :

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

사용 가능한 기능에 대한 자세한 내용은 Chrome Extension API 문서를 참조하십시오.

2. manifest.json 파일 :

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

 {
  "이름": "언어 피커",
  "설명": "간단한 언어 선택 확장",
  "버전": "1.0",
  "Manifest_version": 3,
  "배경": {
    "Service_worker": "background.js"
  },
  "권한": [ "스토리지"],
  "행동": {
    "default_popup": "popup.html"
  }
}

이 파일은 이름 popup.html 설명, 버전, 배경 스크립트 ( background.js

3. 언어 플래그 아이콘 추가 :

프로젝트 폴더 내에 "플래그"서브 디렉토리를 만듭니다. 5 개의 플래그 이미지 (예 : 영어, 중국어, 이탈리아어 등)를 다운로드하고 english.png , chinese.png 등으로 저장하십시오.

4. background.js JS 서비스 작업자 :

이 코드로 background.js 작성하십시오.

 언어 = 'URL (flags/earlogy.png)';

chrome.runtime.oninstalled.addlistener (() => {
  Chrome.storage.sync.set ({language});
  console.log (`기본 언어로 설정된 기본 언어로 설정되어 $ {language}`);
});

설치시 기본 언어를 영어로 설정합니다.

5. 팝업 메뉴 만들기 ( popup.html 및 popup.css ) :

popup.html 만들기 :

 


  <title>언어 선택기</title>
  <link rel="stylesheet" href="popup.css">


  <div id="flagOptions"></div>
  <script src="popup.js"></script>

popup.css 생성 .CSS :

 .Container {너비 : 300px; }
버튼 {높이 : 30px; 너비 : 30px; 개요 : 없음; 국경 : 없음; 국경-라디우스 : 50%; 여백 : 10px; 배경 반복 : 비 반복; 배경 위치 : 센터; 배경 크기 : 포함; }
.CurrentFlag { / * 현재 선택된 플래그에 대한 스타일 추가 * /}

6. 팝업 JavaScript ( popup.js ) :

popup.js 만듭니다.

// ... (JavaScript 코드는 언어 플래그 및 핸들 클릭에 대한 버튼을 동적으로 생성하려면 원래 예제와 유사하지만 간결하게 단순화) ...
````(이 섹션에는``OtherLangs '배열에서 언어 버튼을 동적으로 생성하기위한 JavaScript가 포함되어 있으며, 클릭 이벤트를 처리하여 선택한 언어를 변경하고 그에 따라 UI를 업데이트합니다. 길이 제한 조건으로 인해이 세부 코드는 생략되지만 원래 예제에서 추론 할 수 있습니다).


** 7. 로딩 및 테스트 : **

`chrome : // extensions/`에서 "포장되지 않은로드"를 클릭하고 프로젝트 폴더를 선택하고 확장자를 테스트하십시오.

** 8. 출판 (고급) : **

크롬 웹 스토어 개발자로 등록하여 확장을 게시하려면 (요금이 필요).

이 간소화 된 버전은 기본 크롬 확장을 만들기위한 더 명확하고 간결한 경로를 제공합니다. 원래의 더 자세한 예제에 제시된 논리를 기반으로 누락 된 'popup.js'코드를 작성하십시오.

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