엣지 익스텐션을 만드는 방법은?

엣지 익스텐션 만드는 방법: manifest.json 작성 및 로드 절차

엣지 익스텐션 만드는 방법을 올바르게 이해하면 브라우저 기능을 확장하고 맞춤형 도구를 손쉽게 개발할 수 있습니다. 개발 과정의 주요 단계와 설정을 정확히 파악하여 오류를 예방하세요.

엣지 익스텐션을 만드는 방법은?

마이크로소프트 엣지 브라우저는 구글 크롬과 같은 크로미움 기반으로 제작되어 확장 프로그램의 구조가 거의 동일합니다. 빈 폴더를 생성하고 설정 파일인 manifest.json과 자바스크립트 코드를 작성한 뒤, 엣지 브라우저의 확장 페이지에서 개발자 모드로 불러와 테스트하고 등록할 수 있습니다.

기본 개발 단계와 폴더 구조 설정

확장 프로그램을 만들기 위해 먼저 작업할 빈 폴더를 생성합니다. 그 후 폴더 안에 manifest.json 파일을 만들어 프로그램 이름, 버전, 필요한 권한 등의 기본 정보를 입력해야 합니다. 기능 구현을 위해서는 팝업 화면용 HTML 파일과 동작을 제어할 자바스크립트 파일을 함께 작성합니다.

코드를 작성할 때 처음에는 구조가 헷갈릴 수 있습니다. 저도 처음 manifest.json 파일을 만들 때 오타 하나 때문에 확장 프로그램 로드가 안 되어 한참 헤매었던 기억이 납니다. 작은 실수 하나가 전체 로드를 막기 때문에 문법을 꼼꼼히 확인하는 것이 좋습니다.

브라우저에 확장 프로그램 등록 및 개발자 모드 활용

코딩이 완료되었다면 이를 브라우저에 직접 올려서 테스트해 볼 수 있습니다. 구체적인 등록 절차는 다음과 같습니다: 1. 엣지 브라우저 주소창에 edge://extensions를 입력해 확장 페이지로 이동합니다. 2. 페이지 왼쪽 아래에 있는 개발자 모드 스위치를 켭니다. 3. 압축 해제된 확장 프로그램 로드 중 버튼을 눌러 아까 작업한 폴더를 선택합니다.

컨텍스트 스크립트를 활용한 웹페이지 제어

특정 웹페이지에서 코드를 직접 실행하고 싶다면 컨텍스트 스크립트(Content Script) 기능을 활용해야 합니다. 이를 통해 사용자가 특정 사이트에 방문했을 때 자동으로 자바스크립트가 동작하도록 설정할 수 있습니다. Nói thật, việc cấu hình quyền (permissions) trong manifest.json đôi khi khá là rắc rối nếu bạn chưa quen với cơ chế bảo mật của trình duyệt.

개발 과정에서 권한 설정을 잘못하면 스크립트가 작동하지 않아 당황스럽기 마련입니다. 예전에는 이 권한 문제 때문에 몇 시간을 날리기도 했습니다. 하지만 핵심 구조만 이해하면 그 다음부터는 훨씬 수월해집니다.

크롬 확장 프로그램과 엣지 익스텐션의 차이점

크롬 확장 프로그램

크로미움 엔진 기반으로 표준 웹 기술 사용

웹 스토어를 통한 전 세계 사용자 배포 용이

압축해제된 확장 프로그램 로드 지원

엣지 익스텐션 (Edge Extension) ⭐

크롬과 동일한 크로미움 기반으로 소스 호환성 높음

Microsoft Partner Center를 통한 별도 등록 필요

edge://extensions 페이지를 통해 동일하게 수동 로드 가능

개발자 민수의 첫 엣지 익스텐션 제작기

민수는 평소 자주 사용하는 웹페이지의 반복 작업을 줄이기 위해 엣지 익스텐션을 직접 만들기로 결심했습니다. 하지만 막상 시작하려니 manifest.json 파일 설정부터 막막했습니다.

첫 번째 시도에서는 권한 설정을 누락하여 브라우저가 확장 프로그램을 거부하는 오류를 겪었습니다. 콘솔창에 찍히는 빨간색 에러 문구를 보며 당황스러웠습니다.

공식 문서를 다시 차근차근 읽어보고 팝업 스크립트와 백그라운드 워커의 역할을 분리하면서 문제의 실마리를 찾았습니다.

결과적으로 2주 만에 나만의 자동화 익스텐션을 완성하여 업무 효율을 크게 높였습니다. 완벽하지 않더라도 부딪히며 배우는 것이 가장 빠른 길임을 깨달았습니다.