Google拡張でダイスを振りたいので作ってみた

参考資料

動作確認

ソースを適当なところにDL。

git clone https://github.com/xipx/link-checker

chrome://extensionsを開く。
『パッケージ化されていない拡張機能を読み込む…』で、DLしたlink-checkerフォルダを『開く』と拡張機能が読み込まれる。

動作確認は以上。

説明を読む

うーん。
なんか、ちゃんと読むとふーんって感じですね。

ポップアップ自体はただのHTMLだとか、
そのHTMLは画面のDOMを触れる（けど変数は見れない）とか。

CHROME.* APIってのがよくわかりませんが、たぶんダイスを振るだけなら必要ないでしょう。

作る

作ります。

ダイスを振るだけならその辺にあるやろ……と思ったらばっちりありました。

試しに丸パクリ。

試しにソースを上書きしてみます。
cssとjsのリンクはそれぞれフォルダの中を見るように指定し直し。
htmlで指定しているui.jsとやらはよくわからないので削除。

enter image description here

動きました。
かんたん！

アイコンを変える

現在はサンプルのままなので変更します。
適当にフリー素材からダイスを引っ張ってきます。

38x38と19x19の２パターンを作成して置き換えます。
即座に反映はされないので、拡張機能の画面から読み込み直す必要があります。

ダイスの種類を選べるようにする

現在は1d6だけなので、ダイスの種類を増やします。

<div>
    <input id="diceNum" value="1" style="width:20px;">
    <select id="diceSides">
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
    <option value="10">10</option>
    <option value="12">12</option>
    <option value="20" selected>20</option>
    <option value="100">100</option>
</select>
</div>

dice.jsにも反映。

// 5行目あたり
        // var randomNumber = Math.floor(Math.random() * this.sides) + 1;
        var randomNumber = Math.floor(Math.random() * s) + 1;

// button.onclickの中身
    var num = document.getElementById('diceNum').value;
    var sides = document.getElementById('diceSides').value;

    var result = dice.roll(sides);

    for (var i = 1; i < num; i++) result += dice.roll(sides);

    printNumber(result);

動かしてみる

できましたー。

enter image description here

文字の位置が微妙ですが……。

パッケージにしてみる

拡張機能の画面から、『拡張機能のパッケージ化』を選択します。
拡張機能のルートフォルダと秘密鍵ファイルを求められます。

拡張機能のルートなんちゃらは、プロジェクトルートで大丈夫です。

秘密鍵は、２回目以降のパッケージ化のときに必要らしいです。
なので初回は空で大丈夫。

で、crxファイルとpemファイルが作成されます。
crxファイルを拡張画面にドロップするとインストールできます。
pemファイルは適切に保存すればいいので、そのままローカルに置いておきます。
（適切ではありません）

課題とか

とりあえずこれで動きました。
ダイス目が欲しいときに便利かなと。

それにしてもめっちゃ簡単でビビりました。

課題。
いろいろあります。
見た目的に味気ないのとか。
複数降ったときに個々の目が見たいとか。

いろいろ修正したいなあ。
そのうちやろう。（やらないやつ）

 B! LINE