티스토리 뷰
발생일: 2013.12.15
키워드: 익스텐션, extension, 웹폰트, webfont
문제:
네이버 영어사전 익스텐션(http://goo.gl/Ui7kBU)에 나눔고딕 웹폰트를 적용하려고 한다.
어떻게 하면 될까?
해결책:
일단, 간단 정리!
익스텐션의 컨텐트 스크립트에서 웹폰트 사용하기
1. 웹폰트를 익스텐션 내 임의의 디렉토리에 넣어둔다.
2. manifest 파일에서 `web_accessible_resources` 속성에 해당 경로를 추가한다.
3. 자바스크립트에서 동적으로 스타일을 추가한다.
영어사전의 경우 본문에 로드되는데, CSS에서는 익스텐션의 경로를 알 수 없기 때문이다.
3.1 `chrome.extension.getURL()`로 현재 익스텐션의 URL을 가져온다.
3.2 스타일 태그를 만들어서, `insertRule` 함수를 사용한다.
아래 링크는 실제 적용한 코드이다.
커피스크립트이긴 한데, 크롬에서 URL을 가져온 후 `insertRule()`하고 있다는 것만 이해하면 된다.
참고 자료:
웹폰트에 대한 전반적인 설명
insertRule에 대한 API
반응형
댓글
공지사항