크롬 익스텐션에 웹폰트 적용하기

발생일: 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

카테고리

분류 전체보기 (710)
About me. (6)
Daylogs (675)
영어공부 (0)
My works - 추억 (29)
비공개 (0)