gist + Reveal.js = GistReveal

以前Gistを簡易スライドにするGistSlideを作ったという記事を書いた。

Reveal.jsで作られたスライドをたくさん見るようになってきた。gistにReveal.jsを適用出来ても便利なんじゃないかと思い、ChromeのExtensionを作った。

インストールしたら、スライドにしたいgistを表示中にボタンをクリックするだけでスライドになる。

Reveal.jsのリソースを動的にページに

gistのページにreveal.jsのリソースをロードさせることを念頭に置くと、JavaScriptはまだしも CSSを常に適用させていると当然レイアウトが壊れてしまうので、クリックを契機にページにCSSをロードさせなければならない。

chrome.tabs.insertCSS(tab.id, {file: '/hoge.css'});

CSSはこれでOKだが、CSSの中で定義されているフォントへのURLは相対パスで記述されているため、そのままだとhttp://gist.github.com/.../hoge.ttfのようになってしまい、Extension内のリソースをロードしにいくことができない。

そこでchrome.extension.getURL()でExtension内の絶対パスを使って、CSSを適用させた。

var fontDefinition =
  '@font-face {' +
    'font-family: "League Gothic";' +
    'src: url("' + chrome.extension.getURL("/font/hoge.ttf") + '");' +
    'font-weight: normal;' +
    'font-style: normal;' +
  '}';

chrome.tabs.insertCSS(tab.id, {code: fontDefinition});

が、適用されない。chrome-extension://スキーマでもローカルリソースとは認識されないためだった。ロードするフォントを、manifest.jsonのweb_accessible_resourcesに追加。

{
  "web_accessible_resources": [
    "/font/hoge.ttf"
  ]
}

これでOKだった。