◎ 크롬 익스텐션
-
chrome extension은자바스크립트로 제작되어야 하고 자바스크립트 라이브러리를 사용할 수 있습니다
-
manifest.json : 프로그램의 이름, 버전, 권한, 아이콘 등 확장 프로그램의 기본 정보를 정의합니다.
-
options.html / options.js : 사용자가 확장 프로그램의 옵션을 설정할 수 있게 하는 페이지입니다. 이 파일은 사용자가 확장 프로그램의 동작 방식을 커스터마이즈할 수 있게 해줍니다.
options.html에는 옵션 페이지의 UI를 설정하고, options.js에서는 사용자의 입력을 처리하는 로직을 작성합니다. -
content_scripts : 지정된 조건(예: 특정 URL에서만 작동)에 따라 웹 페이지에 직접 코드를 주입하여 실행할 수 있습니다.
-
background.js : 이 파일은 확장 프로그램의 생명주기 동안 지속적으로 실행되며, 다양한 백그라운드 작업과 이벤트 리스너를 관리하는 역할을 합니다.
3. Manifest V3의 예시
{
"manifest_version": 3,
"name": "React Extension",
"description": "React Extension",
"version": "1.0",
"action": {
"default_popup": "popup.html",
"default_title": "React Extension"
},
"background": {
"service_worker": "background.js"
},
"options_page": "options.html",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
]
}
- manifest_verson: Manifest의 버전을 적어줍니다.
- version : 해당 익스텐션의 버전을 설정해 줍니다. 익스텐션을 제출할 때에는 같은 버전으로 제출 할 수 없으므로 제출 하기 전에 버전업을 한뒤에 올려주시면 됩니다.
- name : 익스텐션의 이름을 적을 수 있다.
- description : 해당 익스텐션에 대한 설명을 적을 수 있다.
익스텐션의 name과 dscription은 개발자도구와 실제로 배포 되었을 때 보여지는 부분이기 때문에 신중하게 작성하는 것이 좋다.
- icons : 이 아이콘들은 확장 프로그램이 브라우저의 확장 툴바, 메뉴, 설정 페이지 등에서 사용자에게 보여지는 시각적 요소입니다
PNG 파일을 사용하는 것이 좋지만 SVG 파일을 제외한 다른 파일 형식도 허용됩니다.
💡 크기가 다른 아이콘은 어디에 표시될까?
아이콘 크기 아이콘 사용
16x16 확장 프로그램 페이지 및 컨텍스트 메뉴의 파비콘
32x32 Windows 컴퓨터에는 이 크기가 필요한 경우가 많습니다.
48x48 광고 확장 페이지에 표시됩니다.
128x128 설치 시 및 Chrome 웹 스토어에 표시됩니다.
- background : Manifest V3는 백그라운드 페이지 대신 서비스 워커를 사용합니다. 서비스 워커는 확장 기능이 활성화되어 있지 않을 때도 실행될 수 있는 스크립트입니다. 이는 확장 프로그램의 성능을 향상시키고, 배터리 수명을 절약할 수 있게 합니다.
- action : 확장 프로그램의 아이콘이 브라우저의 툴바나 주소 표시줄 옆에 표시될 수 있으며, 사용자는 이 아이콘을 클릭하여 팝업을 열거나 확장 기능의 특정 기능을 실행할 수 있습니다.
형선