「はてなブックマークGoogle Chrome拡張」のソースコードいじって適当にmixiチェックに流せるようにした

2011/05/26 追記：公式版のアップデートで対応されたようですね。

はてなブックマークのブックマークレットはmixiチェックに対応してたんだけど、Chromeを常用している自分としては、拡張でその辺も済ましたいなぁって思った。
実装されてないなら、はてなアイデアに投げようと思ったら、すでに投稿されてた。
はてなアイデア - はてなブックマーク拡張もはやくmixiチェック連動に対応おねがいします！
でも登録日時が2010-09-09 21:18:46で、一向に対応されそうになかったから、せっかくgithubで公開されてるっぽいし、自分で対応させるかーって感じになったので、ブックマークレットで飛ばされるはてブ登録画面のhtmlと見比べたりしながら適当に追加して対応させてみました。

どうやら叩いてるAPIはブックマークレットと変わらないみたいで、フォーム情報を付加してやるだけでどうにかなった。

以下、作業メモ。

１：ソースコードをgit clone

ソースコードはここで公開されてる
https://github.com/hatena/hatena-bookmark-googlechrome-extension
適当にgit cloneする。

git clone git://github.com/hatena/hatena-bookmark-googlechrome-extension.git

２：ソースコードを書き換える

いくつかのファイルに下記のような箇所を追加します

src/background/popup.html

mixiチェックに投稿するチェックボックスを追加する。
231行目〜236行目に以下のhtmlを挿入。

<span>
    <label id="post_mixi_check_label" for="post_mixi_check" title="ブックマークした内容をmixiチェックへ投稿する場合はチェックを入れてください。">
        <input type="checkbox" id="post_mixi_check" name="post_mixi_check" value="1" />
        <span class="label-text">mixiチェックへ投稿</span>
    </label>
</span>

src/background/popup.css

mixiのアイコンを表示させるために以下のCSSを適当に追記しておきます。
（事前にhttp://b.st-hatena.com/images/icon-mixi.pngを/images以下にダウンロードしておきます）

#post_mixi_check_label .label-text {
    background-image: url(/images/icon-mixi.png);
}

デザインを揃えるために606行目辺りにある

#post-twitter-label .label-text,
#private-label .label-text{
    background: -2px 50% no-repeat;
    padding-left: 14px;
}

という部分を

#post-twitter-label .label-text,
#private-label .label-text,
#post_mixi_check_label .label-text {
    background: -2px 50% no-repeat;
    padding-left: 14px;
}

という風に書き換えました。

３：インストールする

最後におなじみchrome://extensions/で拡張機能を設定します。
元のはてなブックマーク拡張を念のため「無効にする」で無効にしておきます。
「パッケージ化されていない拡張機能を読み込みます」を押して、srcディレクトリを指定すれば導入完了です。

お疲れ様でした。

これで、Chrome拡張からも気軽にmixiチェック出来るようになりました。