크롬 확장 프로그램

1. 개요

- JavaScript로 크롬 확장 프로그램을 만들 수 있다. 최소 두 개의 소스파일(정해진 형식을 갖춘 manifest.json 파일, 원하는 기능을 구현한 .js 파일)만으로도 크롬 확장 프로그램을 구현할 수 있다.

2. `manifest.json`의 내용

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["content.js"]
  }],
}

manifest_version: 2023년부터 버전 2가 지원되지 않으므로 반드시 3으로 써야 한다.
name: 이 크롬 익스텐션의 이름. 임의로 변경할 수 있다.
version: 이 크롬 익스텐션의 버전. 임의로 변경할 수 있다.
permissions: 이 크롬 익스텐션에게 허용되는 크롬 관련 권한.
- activeTab: 웹 페이지에 .js 코드를 주입하고자 할 때 필요한 권한.
- storage: 크롬 스토리지에 접근하고자 할 때 필요한 권한.
content_scripts: 이 크롬 익스텐션이 웹 페이지에 .js 코드를 주입하고자 할 때 쓰는 필드. 항상 matches 필드와 js 필드를 모두 가진 딕셔너리를 원소로 하는 리스트를 값으로 갖는다.
- js: 크롬 익스텐션을 통해 주입하고자 하는 소스파일의 이름과 경로. 웹페이지의 DOM을 자유롭게 조작하는 코드를 쓸 수 있다.
- matches: 그 소스파일을 주입하고자 하는 웹페이지 주소. 항상 프로토콜, 도메인 네임, 경로를 함께 써야 하나, 각 파트를 와일드카드(*)로 대체할 수 있다. 이 크롬 익스텐션을 설치 후 여기서 경로가 지정된 웹페이지에 접속하면, 위 .js 파일이 마치 원래 그 페이지에 있었던 것처럼 실행된다. 예를 들어 manifest.json을 위와 같이 쓰고 content.js 파일의 내용을 console.log("Hello World!")로 쓴 다음 이 크롬 익스텐션을 설치하면, 그 이후 어떤 웹페이지에 접속하든 콘솔창에 Hello World!가 출력된다.
options_page: 이 크롬 익스텐션의 옵션 설정을 사용자가 변경하게 하고자 할 때, 옵션 설정을 변경할 수 있게 하는 옵션 페이지를 구현한 .html 파일의 이름과 경로. 이 필드를 추가하면, 브라우저의 크롬 익스텐션 버튼을 클릭할 때 옵션 항목이 활성화돼 해당 페이지에 접근할 수 있다. 보통 크롬 스토리지에 옵션 내용을 저장하고 불러와 사용한다.
- 옵션 페이지를 구현하면서 옵션 페이지만의 CSS 파일이나 JS 파일을 사용할 수 있는데, 이에 관한 내용을 manifest.json 파일에 추가할 필요는 없다.

3. 크롬 스토리지 사용법

1) 스토리지에 값 저장하기

var dict = {fruit: "사과"};
chrome.storage.sync.set(dict);

- chrome.storage 객체의 sync.set 메서드에 JS 오브젝트를 인자로 전달하여 해당 오브젝트 내용을 크롬 스토리지에 저장할 수 있다.

2) 스토리지에서 값 읽어오기

chrome.storage.sync.get(null, (items) => 
    {
        // 크롬 스토리지에서 값을 얻어온 후 실행할 내용
    });

- chrome.storage 객체의 sync.set 메서드에 얻어오고자 하는 키값의 목록을 전달하여 그 키값에 해당하는 밸류들을 얻어올 수 있다. 이때 얻어온 값들은 sync.get 메서드 호출 시 함께 전달한 콜백함수의 인자로서 JS 오브젝트로 전달되며, 그 값에 관한 처리는 그 콜백함수에서 할 수 있다.

키값의 목록 대신 null 값을 전달하면 크롬 스토리지에 저장된 모든 내용을 가져올 수 있다.

- sync.get 메서드를 통해 크롬 스토리지에서 값을 얻어오는 작업은 비동기적으로 실행되므로, 값을 얻어오는 작업의 순서를 이 이후 코드보다 앞선 순서로 강제하려면 이를 Promise 객체를 통해 구현해야 한다.

1. 개요

2. manifest.json의 내용

3. 크롬 스토리지 사용법

1) 스토리지에 값 저장하기

2) 스토리지에서 값 읽어오기

2. `manifest.json`의 내용