Locator For Angular 만들기 - (1)

Donghyun Hwang·2025년 7월 29일

0. 만들어보자

리액트 개발을 하면서 굉장히 편리하게 사용했던 크롬 확장 프로그램 LocatorJS...

아쉽게도 해당 익스텐션은 Angular에서 지원되지 않는다.
Angular 개발을 시작한지도 벌써 두 달, LocatorJS가 있으면 DX가 크게 향상될 것 같다는 생각이 들었다.

우선 LocatorJS에서 Angular를 지원할 예정이 있을까?

이슈가 올라온지도 약 3년이 흘렀다.. 지원을 기대하기는 쉽지 않아보였다.

그러면 직접 한 번 만들어보자. 잘 만들기만 하면...

DX가 크게 향상된다.
전세계 8억 Angular 개발자에게 찬양 받을 수 있다.
잘하면 억만장자가 되어 개발은 취미로 하게 될지도 모른다...ㄷㄷ

크롬 익스텐션 개발을 해본 적은 없지만, 대부분의 크롬 익스텐션이 JS로 개발되어 있는 것을 보면 나도 도전해볼만하다고 생각했다. (해보니 진짜 별 거 없었다)

우선 필요한 기능부터 정리해보자면

1. Angular 감지 🔍

React, Preact, Vue, Svelte는 이미 LocatorJS에서 지원 중이기 때문에 나는 Angular-Only-Target으로 진행한다. (한국에선 우리 팀말고 아무도 안쓰겟군.)

개발 환경이 Angular로 구성되어 있는지 아닌지 알기 위한 방법은 여러가지가 있다.

window 객체에 등록된 Angular 관련 요소들(Zone, ng 등) 존재 여부
HTML Element 중 ng prefix의 존재 여부
HTML root 요소 확인

위 요소들을 확인하여 Angular Project가 존재하는지 여부를 판단하여 지원 여부를 알려줄 수 있다.

2. Web Inspector 🎯

LocatorJS와 같이 command 키를 누르고 마우스를 올렸을 때 해당 요소를 개발자 도구의 Inspector와 같이 HTML 요소를 콕 집어야한다. 이 기능도 정말 여러가지 구현 방법이 있다.

Angular에서 지원하는 Angular DevTools API 사용 - o

const component = window.ng.getComponent(element);

컴포넌트 선택자 기반 탐지 - x

Angular의 컴포넌트 선택자 생성 방식(ex.app-user-card -> UserCardComponent)으로 알아내는 것인데, 선택자를 바꾸는 예외 케이스가 굉장히 많으므로 해당 방법은 적절치 않다.

ng.probe API 사용 - o

const debugElement = window.ng.probe(element);
const component = debugElement.componentInstance;
const componentName = component.constructor?.name

전역 컴포넌트 검색 - △

const globalComponent = findNearestAngularComponent(element);

말 그대로 다 돌며 찾는 것이다. 이건 최악의 성능을 지니므로 최후의 수단이다..

위 방법들 중 1번과 3번이 그나마 쓸만한 것 같은데, 아직 무엇이 더 적절할 지는 모르겠다. 2편에서 계속 ...

3. File Path 알아내기 ☠️

이게 좀 어려운 부분이다. 컴포넌트 이름 등 Angular의 컴포넌트 정보를 알아냈다 한들 이 컴포넌트가 정확히 어떤 폴더에 어떤 파일명으로 저장되어 있을지 알아내기가 쉽지 않은 것 같다.
현재 여러 방법을 통해 구현해보는 중인데 정확도가 높지 않다. stable한 방법을 찾으면 따로 글로 정리해보려 한다.

4. 에디터 열기 🧑🏿‍💻

해당 기능은 chrome에서 제공하는 API를 다음과 사용하면 된다.
자세한 레퍼런스는 여기를 참고

    chrome.runtime.sendMessage({
        action: 'openFile',
        componentInfo: componentInfo
    }, (response) => {
        if (response && response.success) {
            showNotification('파일이 열렸습니다!', 'success');
        } else {
            showNotification('파일 열기에 실패했습니다', 'error');
        }
    });