ドラゴンクエストXには、プレイヤーのキャラクター情報やゲームのバージョンアップ情報、運営さんからメッセージなどが公開されるポータルサイト「目覚めし冒険者の広場」があります。

冒険者の広場は、多くのプレイヤーが毎日のように見るサイトですが、非常に情報量が多いので、情報処理を補助してくれるツールがあると、すごく便利です。また、自分のキャラクラー情報などを外部SNSやツイッターと連携してくれるツールがあると、冒険も楽しくなりますよね。

今回は、グーグルが世界に誇るブラウザ「Chrome」の拡張機能を使って、便利なツールを作ってみようっていう記事です。Chrome拡張機能の仕組みについて、僕が手に入れた情報や、参考にした情報をまとめていきます。とはいえ、たいしたことは書けないので、あまり期待しないで!









前提知識

Chrome拡張機能を作るのに必要な知識は以下のとおり。
 1. HTML の知識
 2. CSS の知識
 3. Javascript の知識


上記の1,2,3については、素人に毛が生えた程度の知識で十分。僕の2年間のブログ執筆活動の中で手に入れた知識だけで大丈夫でした。
上に書いた3つの知識を軸として、後はChrome拡張機能の仕組みについて学ぶだけで、拡張機能を作成できるようになります。



作成の流れ

2

作成する機能によって準備するものが変わってきますので、今回は、Chromeにボタンを追加して、そのボタンを押すとメニュー(赤丸内)が表示される機能を追加する前提で書きます。

作成の流れは以下のとおりです。

1. メニュー画面を作る
HTMLとCSSで作成します。

2. メニュー画面に機能を付与する
メニューを選んだときに実行する機能をJavascriptで作成し、メニューと関連付けます。

3. Chrome拡張用の設定ファイルを作成する
Chromeに組み込むためには、設定ファイルが必要です。

4. Chromeに読み込ませる
ご自宅のPC上で作成した機能をブラウザに読み込ませて、動作確認します。

5. (必要に応じて)ウェブストアで公開する
作成したツールをウェブストアにアップロードして公開します。
初回だけ開発者登録する必要があるので、お金がかかります(5ドル)



1.メニュー画面を作る

特に注意すべき点はありません。
ブログを作るときのように、HTMLとCSSで作成しましょう。



2.メニュー画面に機能を付与する

Javascript で機能を作成し、メニューを選択した際に、機能が実行されるようにします。
外部のJavascriptファイルの呼び出しもできますので、jQueryなどのライブラリを利用することも可能です。

ここで一つ注意点があります。
メニュー画面は、Chromeで表示されている画面とは別の画面という扱いになるようです。つまり、メニュー画面と、Chromeで表示している画面は、それぞれ独立した2つHTMLになっています。つまり、メニュー画面に埋め込んだJavascript は、メニュー画面内しか操作できません。
メニュー画面から、Chromeで表示されている画面を操作するには、「Content Script」と呼ばれる仕組みを使う必要があります。この仕組みは以下のサイトが参考になります。少し難しいですが。


【参考サイト】
Chrome Extensionの作り方講座その4・popupとContent Scriptを連携させてみる


簡単に仕組みを整理すると、こんな流れになります。

・メニュー画面のJavascriptから、「Content Script」を呼び出す。
・「Content Script」は、Chromeに表示されている画面を操作する。また、結果をメニュー画面のJavascriptに伝達する。
・メニュー画面のJavascriptで、後処理を実行し、処理を終える。


「Content Script」は自作するJavascriptファイルになりますが、後述するChrome拡張機能の設定ファイルで指定することになります。



3.Chrome拡張用の設定ファイルを作成する

設定ファイルに、作成したHTMLファイルと、「Content Script」を登録します。その他、必要な設定を施す必要があります。
設定ファイルは「manifest.json」という名前で保存する必要があります。
下のサイトを読みながら適当に作れば大丈夫です。間違っている箇所があった場合は、Chromeに機能を読み込ませるときにエラーが表示され、何が間違っているか詳しいメッセージが表示されますので、修正は簡単です。


【参考サイト】
Chromeのオリジナル拡張機能を開発しよう(ソースコードあり)
 - 見出し「manifest.json」を読むべし


4.Chromeに読み込ませる

自分のPC上に存在する、HTMLやCSSや設定ファイルを、Chromeに読み込ませます。
以下のサイトを参考にしてください。


【参考サイト】
jQuery を使って 30 分で Chrome 拡張を作ってみた
 - 見出し「拡張をインストールしてみよう」を読むべし



5.ウェブストアで公開する

作成した拡張機能は、ウェブストアで公開すると、他人に使ってもらいやすくなりますので、必要であれば公開しましょう。
公開する場合は、開発者用のDashboardを開き、手続きを進めることになります。手続きの流れは以下のとおり。

1. $5 課金して、初回登録
2. 拡張機能を zip で圧縮し、アップロード
3. 拡張機能の説明等を入力して公開



以上が、Chrome拡張機能を作成してウェブストアで公開するまでの流れになります。
Chrome拡張機能って聞くと、すごく技術的な知識が必要な気がしますが、案外、簡単に作れちゃいましたので、ツールのアイデアがある方は、作成してみてはいかがでしょうか。



なお、僕が作成した拡張機能はこちらから入手可能です。

3



アイコン作ってくれる人と、アイデア出してくれる人を大募集!




コメントはツイッターで受け付けています!