Chrome Extension Debugging Lessons — Domain Whitelist, Duplicate Listeners, Closure Pitfalls

When maintaining a Chrome extension, “this should definitely work, why doesn’t it?” comes up more often than expected. I made four consecutive mistakes in a short period, each with a different root cause. Writing them down. 1. A return in the dispatch block silently kills generic detection Content scripts typically end with a pattern like this: if (isSomeSpecificPage()) { doSomethingSpecific(); return; // ← exits here } // Generic DOM detection (MutationObserver, etc.) const observer = new MutationObserver(() => { ... }); observer.observe(document.body, { childList: true, subtree: true }); After adding a feature for a specific domain with an early return, the generic DOM detection never ran in a popup window on that domain. ...

2026-03-09 · 5 min read · Seunghan
Rails Stimulus Controllers Lookbook Debug

Rails + Stimulus: Implementing 11 Controllers — Scroll, Carousel, Text Animation

Rails + ViewComponent + Lookbook 조합으로 컴포넌트 라이브러리를 만들 때, Stimulus 컨트롤러가 전부 스텁(빈 껍데기) 상태로 남아있는 상황을 맞닥뜨렸다. 13개 컨트롤러 중 3개만 동작하고 나머지 10개는 connect() {} 한 줄짜리였다. 이걸 전부 구현하면서 겪은 삽질을 정리한다. 구현 대상 총 11개 컨트롤러를 4단계로 나눠서 구현했다. Wave 컨트롤러 핵심 기술 1 TagInput, FileDropzone, CategoryTab DOM 조작, 드래그 이벤트 2 ScrollReveal, ScrollScale, VideoScrubbing, HorizontalScroll RAF 쓰로틀, IntersectionObserver, ResizeObserver 3 ScrambleText, RandomReveal RAF 애니메이션 루프, Fisher-Yates 셔플 4 ImageCarousel, CarouselContainer 드래그/터치, translateX 트랜지션 삽질 1: Lookbook 프리뷰에서 Stimulus가 아예 안 됨 가장 크게 막혔던 부분이다. 컨트롤러를 다 구현하고 Lookbook을 열었는데 아무 동작도 하지 않는다. 크롬 DevTools를 열어보니 data-controller 속성은 붙어있는데 Stimulus가 연결이 안 된 상태였다. ...

2025-11-18 · 6 min read · Seunghan
Chrome Extension Insurance Autofill Playwright Gif

Chrome Extension Content Script — Korean Insurance Auto-Fill, HTML Mock Screenshots, MOV to GIF

Notes from extending the form auto-fill feature in a browser extension and the various struggles along the way. 1. Direct Car Insurance Site Content Script Auto-Fill Problem: Can’t Read Form Structure via WebFetch on JS-Rendered Sites Korean insurance company direct sites mostly use SPA/RIA architecture. Samsung Fire: SFMI proprietary RIA framework Hyundai Marine, DB Insurance: Spring MVC .do URL patterns KB Insurance, Meritz: Separate mobile/PC domains Scraping URLs with WebFetch doesn’t yield form field structures. I chose to cover common industry field name patterns instead of manually checking each site via DevTools. ...

2025-10-28 · 5 min read · Seunghan
Privacy Policy Terms Disclaimer Contact