프로젝트 중이다. 자연어처리가 주제다.
익스텐션은 단지 플랫폼일 뿐이다.
근데 자연어처리를 파는 것보다 익스텐션에 한달 째 허덕인 시간이 더 많다..

정말 딱 한달 된 것 같다..
근데도 아직 익스텐션 구현이 어렵다.. 나에게 너무 화가 난다.. 속상하다...흑흑..

제대로 알고 있었으면 좋았을 것들이 너무나도 많다..
그만큼 익스텐션에 관한 예제나 자료가 많이 없고, 방법이 상이하다..
(있어도, manifest V2 가 주로 많다..)
그리고 더 킹받는건,, 어제부터 크롬익스텐션 공식 페이지가 한국사용자 친화적으로 업데이트 되었다는거다..
하.. 한달만 더 일찍 업데이트 되었으면 얼마나 좋았을까?🥹
https://developer.chrome.com/docs?hl=ko

그래서, 지금까지 알게 된것.. 그리고, 한달 전에 알았더라면 좋았을 것들..

🔃새로고침

새로고침을 해도 변하지 않는 것들 때문에 한참을 헤맨적이 있었다. 내 코드 잘못인줄 알고..
팝업창은 새고해도 안변한다. 그러니 새탭을 열자.

manifest (V3)

이제 manifest version2는 로드 자체가 안된다. 그리고, 예제 코드를 바로 갖다 쓸 수도 없다. 코드 쓰는 방식이 V3가 되면서 좀 달라졌기 때문이다.

• 프로젝트의 루트에 있어야함.
• 개발 중 주석은 지원하지만, 웹 스토어에 업로드 할땐 주석을 지워야함.
• 아이콘 : PNG 파일 추천.

권한 종류

• permissions
• optional_permissions
• content_scripts.matches
• host_permissions
• optional_host_permissions

권한 목록

https://developer.chrome.com/docs/extensions/develop/concepts/declare-permissions?hl=ko#permissions

"activeTab"

사용자가 확장 프로그램을 호출할 때(예: 작업 클릭) 확장 프로그램에 현재 활성 탭에 대한 임시 액세스 권한을 부여합니다. 탭 액세스는 사용자가 페이지에 있는 동안 지속되고 사용자가 다른 페이지로 이동하거나 탭을 닫으면 취소됩니다.

"favicon"

Favicon API에 대한 액세스 권한을 부여합니다.

"offscreen"

서비스 워커에는 DOM 액세스 권한이 없으며 많은 웹사이트에 콘텐츠 스크립트의 기능을 제한하는 콘텐츠 보안 정책이 있습니다. Offscreen API를 사용하면 확장 프로그램이 새 창이나 탭을 열어 사용자 환경을 중단하지 않고도 숨겨진 문서에서 DOM API를 사용할 수 있습니다. runtime API는 오프스크린 문서에서 지원하는 유일한 확장 프로그램 API입니다.

"runtime"

Runtime API의 대부분의 메서드에는 권한이 필요하지 않습니다.
https://developer.chrome.com/docs/extensions/reference/api/runtime?hl=ko

"scripting" ⭐⭐⭐

자바스크립트 및 CSS를 웹사이트에 삽입할 수 있습니다. 이는 콘텐츠 스크립트로 할 수 있는 작업과 유사합니다.

"storage" ⭐⭐

사용자 데이터의 변경사항을 저장, 검색, 추적합니다.

"tabs" ⭐⭐⭐⭐⭐

브라우저의 탭 시스템과 상호작용하려면 chrome.tabs API를 사용합니다. 이 API를 사용하여 브라우저에서 탭을 만들고 수정하고 다시 정렬할 수 있습니다.

Tabs API는 탭을 조작하고 관리하는 기능을 제공할 뿐만 아니라 탭의 언어를 감지하고, 스크린샷을 만들고, 탭의 콘텐츠 스크립트와 커뮤니케이션할 수도 있습니다.

현재 탭 가져오기

선택한 탭의 콘텐츠 스크립트로 메시지 전달

"webNavigation"

진행 중인 탐색 요청의 상태에 관한 알림을 수신합니다.

보안유지

매니페스트에 불필요한 키와 권한을 포함하면 취약점이 생기고 확장 프로그램이 더 잘 보이게 됩니다. 매니페스트 필드를 확장 프로그램에서 사용하는 필드로 제한합니다.

document.write() 및 innerHTML을 사용하지 않습니다.

document.write() 및 innerHTML를 사용하여 HTML 요소를 동적으로 만드는 것이 더 간단할 수도 있지만 확장 프로그램과 확장 프로그램이 사용하는 웹페이지는 악성 스크립트를 삽입하는 공격자에게 노출됩니다. 대신 DOM 노드를 수동으로 만들고 innerText를 사용하여 동적 콘텐츠를 삽입합니다.

🛠️service-worker

(a.k.a Background scripts)
확장 프로그램 서비스 워커는 필요할 때 로드되고 휴면 상태가 되면 언로드됩니다. 확장 프로그램 서비스 워커는 로드되면 일반적으로 이벤트를 수신 중인 한 실행되지만 종료할 수 있습니다.

이벤트

서비스 워커의 이벤트 핸들러는 전역 범위에서 선언해야 합니다. 즉, 스크립트의 최상위 수준에 있어야 하며 함수 내에 중첩되어서는 안 됩니다. 이렇게 하면 이벤트가 초기 스크립트 실행 시 동기식으로 등록되므로 Chrome이 시작되자마자 서비스 워커에 이벤트를 전달할 수 있습니다.

import 문

스크립트를 서비스 워커로 가져오는 방법에는 import 문과 importScripts() 메서드라는 두 가지 메서드가 있습니다.

📜contents script

격리된 환경 이란?
콘텐츠 스크립트는 분리된 환경에 존재하므로 콘텐츠 스크립트가 페이지 또는 다른 확장 프로그램의 콘텐츠 스크립트와 충돌하지 않고 자바스크립트 환경을 변경할 수 있습니다.

manifest 선언 (정적 선언)

자동으로 실행되어야 하는 스크립트에 대해 manifest.json에서 정적 콘텐츠 스크립트 선언을 사용합니다.

service-worker에서 선언 (동적 선언)

manifest.json이 아닌 chrome.scripting 네임스페이스의 메서드를 사용하여 Chrome에 등록됩니다.

이벤트 응답할때 선언 (프로그래매틱 삽입)

이벤트 또는 특정 이벤트에 응답하여 실행해야 하는 콘텐츠 스크립트에 프로그래매틱 삽입을 사용합니다.

대신 이렇게 manifest 에서 activeTab 을 permissions 안에 선언해줘야함.

함수로 선언한 (DOM 접근관련) 본문을 이벤트리스너 때 써줄 수 있는거다! (Wow)

일치 및 glob 제외

manifest.json 에서 맞춰주거나, service-worker 에서 쓸 수 있다.

운영 기간

run_at 필드는 JavaScript 파일이 웹페이지에 삽입되는 시점을 제어

프레임

모든 프레임에 삽입해야 하는지 아니면 탭의 최상위 프레임에만 삽입해야 하는지 지정.