소개
지난 1주 차에 만들었던 크롬 익스텐션에서 이상한 문제가 발생하기 시작했습니다.
SidePanel에서 콘텐츠가 차단되는 문제가 발생했습니다.
처음엔 내 코드 어딘가에 버그가 있겠거니 했는데, 아무리 살펴봐도 도저히 원인을 모르겠더라고요. 지난 3주 차에 배운 익스텐션 클론 기능을 이용하면 되지 않을까? 생각이 들었어요.
그래서 SidePanel을 잘 구현한 익스텐션의 소스를 다운로드해 분석해 보기로 결심했습니다.
진행 방법
직접 만든 크롬 익스텐션의 문제점을 다양하게 검토를 해 본 결과 Manifest, CSP 등 여러 가능성을 의심했지만 원인 불명 상태였습니다.
지난 강의 때 성장 피터님이 소개해 준 CRX를 이용해서 SidePanel 기능 위주로 분석을 해보기로 합니다.
전체 코드 베이스 분석해줘
그리고 기존 소스 코드를 활용하여 Side Panel을 어떻게 구성했는지 직접 만들어 보고자 Pseudocode(수도 코드)를 확인해 봅니다.
side Panel API를 이용하여 iframes를 활용한 웹 콘텐츠 로딩의 코드가 어떻게 구성되어 있는지 수도 코드로 확인해 주세요. 해당 기능을 다른 프로젝트에 적용하기 위해 요청합니다.
분석한 결과를 psuedocode.md 파일로 생성하고 새로운 프로젝트에 붙여 넣고 프로젝트 전체를 구성합니다.
psuedo code를 참조해서 프로젝트 전체를 구성해 보세요.
Cursor AI를 이용하면 간단하고 빠르게 만들 수 있는 장점을 다시 한번 더 느낍니다. 간단하게 만들어진 크롬 익스텐션을 실행해 보니.... 역시나 iFrame 관련한 정책 문제가 발생합니다.
당황하지 않고 기존의 소스 코드에서 iframe 정책과 관련된 코드를 확인합니다. 답변을 ifream 정책. md로 만들고 프로젝트에 등록합니다. 이 파일을 이용해서 접근 권한을 해제하는 방법을 확인하고 소스 수정을 진행합니다.
긴장하면서 새로 고침 했는데 해결이 됩니다. 이젠 지난 1주 차에 만든 SidePanel을 해결할 수 있지 않을까 하는 기대감이 생겼습니다.
iFrame 정책 파일만 그대로 복사해 와서 정책 관련한 부분만 수정 요청합니다.
기존의 기능을 그대로 유지하고 iframe 정책 관련한 부분만 수정을 합니다. iframe은 sidebar와 관련이 있습니다.
음... 수정은 했지만 별다른 효과는 없었습니다. 마지막이다 생각하고 크롬 정책 변경과 관련이 있는 건 아닌지 하고 확인하고 소스 수정 요청을 했습니다.
크롬 정책 변경과 관련이 있는 건 아닌지 확인합니다.
@google sidePanel
오~ 해결 됐습니다. 소 뒷걸음 치다 우연히 해결되었는지 모르겠는데 어찌 되었든 해결이 되었으니 기분은 좋네요.
결과와 배운 점
클론 코딩은 단순한 베끼기가 아니라 문제 해결을 위한 좋은 전략이 될 수 있다는 걸 깨달았습니다.
특히 pseudocode(수도 코드)를 활용하면 단순히 코드를 따라 쓰는 게 아니라 이해한 것을 기반으로 자기 코드로 바꾸는 과정이 좋은 경험인 것 같습니다.
익스텐션 개발 중 막힐 때 남의 소스를 분석하는 건 창의적 해결의 출발점이 될 수 있지 않을까 하는 생각이 들고 다시 한번 느끼지만 Cursor AI는 이런 과정에서 진짜 유용하게 사용할 수 있는 도우미입니다.