스크래치에서 Firefox New Tab Extension을 만들며 배운 5가지 교훈
Source: Dev.to
manifest_version: 3 전환은 대부분 원활하지만, Service Worker 함정에 주의
Firefox가 이제 Manifest V3를 지원하고, 나는 전면적으로 적용하기로 했습니다. 대부분은 그대로 작동합니다 — 선언형 콘텐츠 스크립트, 새로운 권한 모델, 더 깔끔한 백그라운드 처리 등.
하지만 Service Worker에는 중요한 제한이 있습니다: 30초가 지나면 비활성화됩니다. 날씨 데이터를 주기적으로 갱신해야 하는 새 탭 확장 프로그램에서는 이것이 문제됩니다.
해결책: 지속적인 백그라운드 스케줄이 아니라 새 탭이 열릴 때마다 날씨 데이터를 가져옵니다. 결과를 localStorage에 캐시하고, 캐시된 데이터가 10분보다 오래됐을 때만 새로 고칩니다.
async function getWeather() {
const cached = JSON.parse(localStorage.getItem('weatherCache') || '{}');
const now = Date.now();
if (cached.data && (now - cached.timestamp) fetchWeatherByCoords(pos.coords),
(err) => {
// err.code === 1: User denied
// err.code === 2: Position unavailable
// err.code === 3: Timeout
showManualCityInput(
err.code === 1
? 'Location blocked — enter your city manually'
: 'Could not detect location'
);
},
{ timeout: 5000, maximumAge: 3600000 }
);확장 프로그램에서 다크 모드 감지는 실제로 우아함
확장 프로그램에서 다크/라이트 모드 전환을 구현하는 것은 간단합니다. prefers-color-scheme 지원을 기본으로 제공받으며, 사용자 선호도를 저장할 옵션도 있습니다.
// Auto-detect system preference
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
// Apply theme
function applyTheme(dark) {
document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
localStorage.setItem('theme', dark ? 'dark' : 'light');
}
// Listen for system changes
prefersDark.addEventListener('change', (e) => applyTheme(e.matches));
// On load: check user preference first, then system
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
applyTheme(savedTheme === 'dark');
} else {
applyTheme(prefersDark.matches);
}사용자는 OS 설정과 일치하는 “그대로 작동” 경험을 얻으며, 필요 시 직접 오버라이드할 수 있습니다.
AMO 리뷰는 실제로 꽤 빠르고 (사람이) 친절합니다
Firefox Add‑On (AMO) 리뷰 과정이 몇 주가 걸릴 거라 예상했지만, 내 경험은 놀라울 정도로 좋았습니다:
- 초기 리뷰: 약 3일
- 리뷰어 피드백: 구체적이고 실행 가능 (내가 놓친
eval()호출 하나를 지적) - 추가 리뷰: 약 1일
리뷰어는 시계 시간 값을 설정할 때 innerHTML을 사용하고 있다고 지적했는데(내부 데이터라 하더라도 불필요한 DOM 위험), textContent로 바꾸라고 했습니다. 타당한 지적이었습니다.
리뷰 속도를 높이는 팁:
- 깔끔하고 읽기 쉬운 코드 작성
- 필요한 권한만 최소화
- 원격 코드 실행 피하기
- 난독화 금지
- 압축한다면 소스맵 포함
결과
이 모든 과정을 거쳐 Weather & Clock Dashboard 를 출시했습니다 — 오픈 소스(MIT), 계정 필요 없이 바로 사용할 수 있으며 실제로 유용합니다.
Firefox 확장 프로그램을 만든다면, 개발자 경험이 꽤 탄탄합니다. API 문서는 최근 몇 년간 크게 개선됐고, Mozilla 개발자 커뮤니티도 도움이 됩니다.
Built with: Pure HTML/CSS/JS · No build step · MIT Licensed