컴퓨터의 Chrome 브라우저에 설치하는 확장 프로그램은 사실 미리 정의된 작업을 수행하는 여러 소스 코드 파일들의 모음입니다. 호기심 많은 사용자라면 이러한 확장 프로그램을 구성하는 실제 코드가 궁금할 수 있습니다. 웹페이지의 소스 코드를 보는 것은 페이지에서 마우스 오른쪽 버튼을 클릭하고 옵션을 선택하면 되는 간단한 일이지만, Chrome 확장 프로그램의 소스 코드에 접근하는 것은 그만큼 쉽지 않습니다.
하지만 이 때문에 확장 프로그램의 소스 코드를 볼 수 없는 것은 아닙니다. 아래에서 소개하는 두 가지 방법을 활용하면 컴퓨터에 설치된 Chrome 확장 프로그램의 소스 코드를 충분히 확인할 수 있습니다.
이 글에서 설명하는 방법은 Mac을 기준으로 진행합니다.
파일 탐색기로 Chrome 확장 프로그램 소스 코드 보기
Chrome에 설치한 확장 프로그램의 파일은 컴퓨터에 저장되어 있지만, 폴더 이름이 알아보기 어려운 형태로 되어 있어 쉽게 찾기가 어렵습니다. 다만 아래 방법을 따르면 확장 프로그램 소스 파일이 위치한 폴더를 찾아낼 수 있습니다.
1. 컴퓨터에서 Chrome을 열고 주소창에 chrome://extensions를 입력한 후 Enter 키를 누릅니다. 그러면 브라우저에 확장 프로그램 목록이 표시됩니다.
2. 확장 프로그램 페이지가 열리면 오른쪽 상단에 있는 '개발자 모드(Developer mode)' 스위치를 켭니다. 이렇게 하면 페이지에서 각 확장 프로그램에 대한 더 자세한 정보를 확인할 수 있습니다.
3. 이제 화면에 표시된 각 확장 프로그램의 ID를 확인할 수 있습니다. 여기서 해야 할 일은 소스 코드를 보고 싶은 확장 프로그램의 ID를 메모해 두는 것입니다.
다음 예시에서는 'Adblock for Youtube' 확장 프로그램의 ID를 강조 표시했습니다. 이후 단계에서 이 확장 프로그램의 소스 코드를 찾아보겠습니다.
4. 확장 프로그램의 ID를 확보했다면, 이번에는 브라우저 주소창에 chrome://version을 입력하고 Enter 키를 누릅니다. 이 페이지를 통해 확장 프로그램 파일이 저장된 폴더 위치를 파악할 수 있습니다.
5. Chrome 버전 정보 페이지에서 '프로필 경로(Profile Path)' 값을 마우스로 드래그하여 선택한 후 클립보드에 복사합니다. 아래 스크린샷에서 해당 항목의 위치를 확인할 수 있습니다.
6. Finder(또는 사용 중인 운영체제의 파일 관리자)를 엽니다. 상단 메뉴에서 '이동(Go)'을 클릭하고 '폴더로 이동(Go to Folder...)'을 선택합니다. 이 기능을 이용하면 Mac에서 확장 프로그램 폴더에 바로 접근할 수 있습니다.
7. 클립보드에 복사해 둔 프로필 경로를 '폴더로 이동' 입력란에 붙여넣고 '이동(Go)' 버튼을 클릭합니다. 그러면 해당 폴더가 Finder 창에서 열립니다.
8. 다음 화면에서 'Extensions' 폴더를 더블클릭하여 열면, 설치된 모든 확장 프로그램의 폴더가 들어 있는 곳에 도착하게 됩니다.
여기에는 이름이 낯설게 느껴지는 여러 개의 폴더가 보일 것입니다. 이 폴더들이 모두 Chrome에 설치한 확장 프로그램에 해당하지만, 폴더 이름이 확장 프로그램 이름과 동일하지 않기 때문에 원하는 확장 프로그램의 폴더를 찾기가 까다롭습니다.
이때 앞서 메모해 둔 확장 프로그램 ID와 이름이 같은 폴더를 찾으면 됩니다. 바로 그 폴더가 해당 확장 프로그램의 폴더입니다.
9. 해당 폴더 안에는 확장 프로그램의 모든 파일이 들어 있으며, 자주 사용하는 코드 편집기로 파일을 열어 소스 코드를 살펴볼 수 있습니다.
지금까지 서드파티 도구 없이 Chrome 확장 프로그램의 소스 코드를 확인하는 방법을 알아보았습니다. 확장 프로그램 하나 정도는 설치해도 괜찮다면, 아래에서 소개하는 방법이 더 편리할 수 있습니다.
확장 프로그램을 이용해 Chrome 확장 프로그램 소스 코드 보기
1. 컴퓨터에서 Chrome을 열고 Chrome 웹 스토어의 확장 프로그램 소스 뷰어(Chrome extension source viewer) 페이지로 이동한 후 'Chrome에 추가(Add to Chrome)' 버튼을 클릭합니다.
2. 다음 화면에서 '확장 프로그램 추가(Add extension)'를 클릭합니다.
3. 확장 프로그램이 브라우저에 추가되면, Chrome 웹 스토어에서 아무 확장 프로그램 페이지나 엽니다. 예를 들어 Markdown Preview 확장 프로그램 페이지를 열어볼 수 있습니다.
페이지가 로드되면 Chrome 상단의 확장 프로그램 바에서 CRX 아이콘을 클릭하고 '소스 보기(View source)'를 선택합니다.
4. 그러면 Chrome 창에서 해당 확장 프로그램의 소스 코드를 바로 확인할 수 있습니다.
마무리
브라우저에 설치한 확장 프로그램의 소스 코드가 궁금하다면, 위 가이드에서 소개한 두 가지 방법을 통해 손쉽게 확인할 수 있습니다. 파일 경로를 직접 추적하는 첫 번째 방법은 추가 설치 없이 가능하다는 장점이 있고, 전용 뷰어 확장 프로그램을 사용하는 두 번째 방법은 몇 번의 클릭만으로 코드를 열어볼 수 있다는 장점이 있습니다. 상황에 맞게 편한 방법을 선택해 활용해 보시기 바랍니다.