console-importer - 콘솔에서 외부 라이브러리를 불러오는 크롬 확장 프로그램을 분석해보자

2023-11-04 | 5 min read

console-importer

링크드인을 보다가 console-importer라는 크롬 확장 프로그램을 우연히 발견했다.

console-importer README에 있는 짤이다.

이 확장 프로그램을 설치하면 개발자 도구 콘솔에서 외부 라이브러리를 불러올 수 있다!

맨날 프로젝트에서 라이브러리의 메서드들이 어떻게 동작하는지 확인하려고 console.log를 찍어보는데, 이 확장 프로그램을 사용하면 더 편하게 확인할 수 있을 것 같다.

어떻게 만들었지?

브라우저에 주입시키는 확장프로그램은 많이 봤어도, 콘솔을 조작하는 건 처음 봤다. 그래서 가볍게 소스코드를 살펴보았다.

먼저 package.json을 보니 plasmo라는 프레임워크를 사용하고 있었는데, 쉽게 브라우저 확장 프로그램을 만들 수 있도록 도와주는 프레임워크인 것 같다.

다음에 확장 프로그램을 더 만들 생각도 있었는데, 이걸 쓰는 것도 나쁘지 않아보인다.

리드미를 보니 다른 언어들은 많이 번역되어있었는데, 한국어는 없었다. 이슈에도 한국어 번역 요청이 있어서 번역을 해보았다.

한국어 번역 PR

console-importer는 단 하나의 파일로 이루어져있었다. 길이도 230줄 밖에 되지 않는다.

코드를 보니 바로 이해가 되었다. 그냥 window 객체에 $i 프로퍼티를 추가한거다.
console에도 추가해서 console.$i로 사용할 수 있게 만들었다.

(console as any).$i = $i;

const win = window as any;
if(typeof win.$i === 'undefined') {
  win.$i = importer;
} else {
  log("$i is already in use, please use `console.$i` instead");
}

이제 importer가 동작하는 방식을 살펴보자.

function importer(originName: unknown) {
  if (typeof originName !== "string") {
    throw new Error("Argument should be a string, please check it.");
  }

  // Trim string
  const name = originName.trim();

  // If it is a valid URL, inject it directly
  if (/^https?:\/\//.test(name)) {
    return inject(name);
  }

  // If version specified, try unpkg
  if (name.indexOf("@") !== -1) {
    return unpkg(name);
  }

  return cdnjs(name);
}

originName은 불러올 라이브러리 이름 또는 URL이다.

  • https://로 시작하면 URL로 간주하고 바로 주입한다.
  • @가 포함되어있으면 unpkg에서 불러온다.
  • 그 외에는 cdnjs에서 불러온다.

주입하는 방식은 간단하다.

function inject(
  url: string,
  beforeLoad = createBeforeLoad(url),
  onload = createOnLoad(url),
  onerror = createOnError(url)
) {
  beforeLoad();

  // Handle CSS
  if (/\.css$/.test(url)) {
    return injectStyle(url, onload, onerror);
  }

  // Handle JS
  return injectScript(url, onload, onerror);
}

  • injectScript는 document.createElement('script')로 스크립트 태그를 만들고, document.head.appendChild로 주입한다.

  • injectStyle은 document.createElement('link')로 스타일 태그를 만들고, document.head.appendChild로 주입한다.

  • unpkg 함수는 https://unpkg.com에서 라이브러리를 불러온다.

  • cdnjs 함수는 https://api.cdnjs.com/libraries에서 라이브러리를 찾아서 불러온다.

콘솔에 색깔을 입히는 방법

이 확장 프로그램에서는 tiza라는 라이브러리를 사용해서 콘솔에 색깔을 입혔다.

느낀점

생각보다 간단한 방식이었다. 이렇게도 확장 프로그램을 만들 수 있구나 싶었다.

그리고 나중에 브라우저 확장 프로그램을 만들게 되면 plasmo 프레임워크를 사용해봐야겠다!

← 2023.10.28

2023.11.25 →