2014-11-03

連休なので、はてなNGフィルターを作ったらクソ快適になった話

Chrome拡張機能としてリリースしましたよ!

はてなNG - Chrome ウェブストア
https://chrome.google.com/webstore/detail/%E3%81%AF%E3%81%A6%E3%81%AAng/mbgdnfmdelffjdhkdggilmphfdihnmcj

機能

[対象サイト]

はてなhttp://www.hatena.ne.jp/

はてなブックマーク内ページ(http://b.hatena.ne.jp/

結果

はてなの閲覧がめちゃくちゃ快適になりました!

目障りなサイトアカウントは見なくて済むし、ブコメページのノイジーなコメントも連打スターもなくなってスッキリ

更にワンクリックで気楽にNGフィルターオンとオフの切り替えが出来るようにした事で、NGありなしの状態が一目瞭然で比較できて、はてなエントリーの傾向、ブックマーカーの傾向もよく分かるという新しい発見も!追)そして自分がどんなに偏ってるかの発見も!

動機

ホットエントリーに上がってくる、まとめ系、はてな村系、虚構系なんかは個人的にどうにも苦手で、それについて以前増田で書いたら多くのご批判、ご意見を頂きました。

はてな代替サービスを教えてちょ

http://anond.hatelabo.jp/20140929012633

人気コメントが「無いなら自分で作れば」って感じで、成る程、ほんじゃまぁやってみるかと。一度Chrome拡張機能を作ってもみたかったので。

で、NGリストを登録してはてな公式ページフィルタリングする方向で作ろうと決めました。あと、どうにも気になっていたのがkiya氏系のスター連打。この対策機能に盛り込もうと。構想が固まって、勉強がてらある程度の試作を作ってみました。したらなかなか良い出来なんじゃないかと、手前味噌だけど自分だけで使ってるのは勿体無い、面白いから皆さん使ってみて下さいよーって事で、この連休Chromeウェブストア公開用に一気に作り込みました。

技術

ざっくりと。

Chrome拡張機能HTMLJavaScript制作できます

それらをマニフェストファイル(manifest.json)というJSON形式の設定ファイルで、タイトル、説明、権限アイコンなどと共に紐付けして設定します。

これらが入ったフォルダChrome拡張機能ページから読み込ませれば動作します。

Googleに$5払ってデベロッパー登録し、バナー必要データを用意すればChromeウェブストアで一般公開もできます


拡張機能スクリプトが動作する環境は大きく分けて4つで、マニフェストファイルで設定できます

  1. background:常にChromeの裏で動くスクリプトを設定します。
    今回はユーザーがタブを切り替えた時にそのタブページがNGサイトかどうか判定しそれによりアイコンの表示を変えるスプリクト等を設定しました。
  2. browser_action:アドレスバーの右側の拡張アイコンクリックした時に表示されるポップアップ画面とスクリプトを設定します。
    普段HTMLページをコーディングするのと同じ感覚です。今回はBootflatベース制作しました。
  3. content_scripts:特定ページに対するスクリプトを設定します。
    今回は「http://www.hatena.ne.jp/」と「http://b.hatena.ne.jp/*」に対してスタイルDOM操作をするスクリプトを設定しました。
  4. options_page:オプションページを設定します。
    今回は使用していません。

このマニフェストにはバージョンがあって、現在使用できるのは2.0のみになっていますChrome拡張機能製作方法はググれば先人達情報が沢山出てきますが、このバージョンが古い情報もありますので注意しないとハマってしまます

参考にしたサイトは様々ですが、検索で出てきた日本語サイトでざっくりと把握させていただき最終的には公式サイトが一番確実でした。

http://dev.screw-axis.com/doc/chrome_extensions/マニフェストバージョンは1.0が対象のようです)

http://qiita.com/sqrtxx/items/19fd2114430e9e1fb57f

http://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html

https://developer.chrome.com/extensions

https://developer.chrome.com/extensions/api_index


制作環境Haxe + Sublime Text です。

まとめ

Chrome拡張機能開発は思ったよりは簡単でした。JavaScriptが出来る人は一度試してみると楽しいかもしれません。と、同時にインストールする拡張機能によってブラウザが重たくなる理由もわかりました。ブラクラになる程重い処理を裏でぶん回す事も簡単に出来てしまうので、なるほどなーと。

そんな感じで開発したのですが、機能はてな様の現在のページデザイン依存しております。ですので、はてなサイトデザインが改変した際には動作しなくなったりレイアウト崩れしてしま場合があります。ご了承くださいませ。その他バグなどご報告下さいましたら出来るだけ対応いたしますのでご感想など聞かせていただければ嬉しいです。

トラックバック - https://anond.hatelabo.jp/20141103170332

記事への反応(ブックマークコメント)

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん