Chrome Extension

0. 만든 계기

회사에서 모든 게임에 대한 런처를 만드는 것이 아니라, 개별 런처를 만들어야 된다는 요구사항이 생겼다.
기능 변경은 최소화로 하고 각 개별 런처의 스펙도 동일하게 간다고 했다.
그래서 게임별 구분값(게임 ID)만 변경하면 각각의 개별 런처들을 빌드할 수 있는 방법에 대해 구상했고, 코드 변경 사항을 최소로 가기 위해 gitlab 파이프라인 변수에 게임 ID를 삽입하기로 했다.
그런데 만들다보니 게임 ID뿐만 아니라 프로그램명, 게임명 등도 다 구분이 필요해져서 파이프라인 변수에 넣어야 할 값이 많아졌다.
매번 직접 입력하면 실수가 잦고, QA 용도로 이전 빌드했던 정보를 그대로 재빌드하는 경우가 많았기 때문에, 최근에 입력한 파이프라인 변수를 기억하고 재입력할 수 있는 크롬 확장자를 만들기로 했다.

코드는 여기서 확인할 수 있다: 바로가기

이걸 만든 과정에서 있었던 아주아주 간단한 트러블 슈팅들(나중에 다시 만들 일이 있을 때 고생하지 않도록)을 기록하고자 한다.

1. manifest.json

확장자나 플러그인을 만들다보면 반드시 필요한 파일이다.
공식 문서에도 나오지만 다음 내용들은 까먹지 말고 반드시 입력해야 한다.

• manifest_version: 버전 정보이다. 현재는 3이 최신이다.
• action.default_popup: 크롬 익스텐션을 클릭할 때 띄울 html 파일이다.
• permissions: 크롬 확장자에 모든 권한을 주면 어떤 확장자는 유저의 정보를 과도하게 탈취해갈 수 있다. 내가 만든 것은 그러한 류의 어플리케이션이 아니므로 반드시 필요한 권한만 명시한다.

2. chrome.scripting.executeScript

크롬 확장자에서 실행할 자바스크립트 함수를 명시한다.
공식 문서에는 해당 함수에 필요한 인자를 전달하는 방식이 나와 있지 않다.
다음과 같이 사용하면 된다.

async function execute() {
	const inputs = ["ABC", "ZXC"];
    const [tab] = await chrome.tabs.query({
        active: true,
        currentWindow: true,
    });
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        args: [inputs],
        func: (variables) => { // inputs가 variables로 받아진다.
            console.log(variables); // ["ABC", "ZXC"]
        },
    });
}

3. chrome.storage.local

웹스토리지를 사용해도 되지만 웹스토리지는 string 형식의 데이터만 저장할 수 있다는 단점이 있다.
indexed DB를 사용해도 되지만 작업해야 할 보일러 플레이트들이 있다.

어차피 크롬에서만 사용될 확장자이니까 크롬 스토리지를 활용하는 방안을 생각했다.
하지만 공식 문서에 어떤 형식으로 데이터가 저장되는지 설명이 없다...
~내가 못 찾는 건가...?~

const STORAGE_KEY = "zz";

async function set() {
  	const data = ["ABC", "ZXC"];
  	await chrome.storage.local.set({ [STORAGE_KEY]: data });
}

async function get() {
	const data = await chrome.storage.local.get();
	const result = result[STORAGE_KEY];
}

객체 형식으로 저장하고 받아온다.

4. 부모 DOM에 접근

chrome.scripting 같은 객체 내에 메서드가 있을 줄 알았는데 없다.
그냥 document.~~ 이렇게 접근하면 된다.

chrome.scripting.executeScript({
    target: { tabId: tab.id },
    args: [inputs],
    func: (variables) => {
    	const inputList = document.querySelector(".parent-document-ul");
    	// ...
    },
});