Firefox拡張機能を始める

H.26/08/17

Egtra私立・プログラミングキャンプ 2014 東京大会

私は誰？

• Egtra (@egtra)– お仕事：Visual C++

でWindowsアプリ書いている

• Visual C++ != C++

– たまにRuby (on Rails),

Objective-C

作った（作っている）もの

• Firefox拡張機能

• 名前：Dframe for Firefox

そもそもDframeって？

• Dframe:社内で使われているMarkdownフレームワーク

–複数ファイル間のリンク

–目次生成

作った（作っている）もの

• Firefox拡張機能

• Dframe for Firefox

–Dframeオリジナル版（Google Chrome拡張機能）に対抗

なぜ作った

• GC拡張機能はブロックされる

なぜ作った

• 私はFirefoxがメインブラウザ

– FirefoxでDframe文書を読みたい

今日やったこと

• Firefox拡張機能の作り方を

– 調べた

– やってみた

• Dframe for Firefoxを作り始めた– 1ページ目を表示するとこまで

Firefox拡張機能を作る

• ググった– Add-on SDKを使うのが初心者向けっぽい

– https://addons.mozilla.org/ja/developers/builder

Firefox拡張機能を作る

• チュートリアルが分かりやすい！

– https://dev.mozilla.jp/addon-sdk-docs/dev-guide/tutorials/

• 「インストール」と「cfx入門」を読む

– 空の拡張機能を作る説明になっている

Firefox拡張機能を作る

• md dframe-for-firefox

• cd dframe-for-firefox

• cfx init ← 雛形が作られる

• cfx run ← お試し実行

• cfx xpi ← パッケージ化

Firefox拡張機能を作った

Dframeを作る

• URLに基づいたWebページの変更– https://dev.mozilla.jp/addon-sdk-

docs/dev-guide/tutorials/modifying-web-pages-url.html

• これっぽい！– .dframeだったら、用意したスクリプトを動

かす

Dframeを作る

• MD→HTMLに変換して表示– いつものクライアント側JavaScript

• windowやdocumentが使える

– jQueryとmarkdown-jsを使った• https://github.com/evilstreak/markdown-

js

次回の活躍にご期待ください

• 1.0までに実装するもの– 目次表示

– ハイパーリンク対応

– CSS読み込み

– ローカルファイル表示

• それ以降で実装するもの– 自動リロード

• https://github.com/egtra/dframe-for-firefox

当日あったQ&A

• Markdown→HTML変換は自前処理？

– 否。markdown-jsを使いました。

– 採用理由は、オリジナルのGoogle Chrome拡張版で使用されているためです。

• Dframeにはプレゼンモードがある

– 前ページに記載を忘れていました。

– Google Chrome拡張版の完全互換を目指し、今後実装します。

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.