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

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

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

機能

• NGアドレスのエントリーをブロックします。
• NGワードを含むエントリーをブロックします。
• NGアカウントのコメント、はてなスター、ブログをブロックします。
• 同一アカウントの連打による複数のスターをひとつのスターにして表示します。

[対象サイト]

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

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

結果

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

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

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

動機

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

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

http://anond.hatelabo.jp/20140929012633

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

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

技術

ざっくりと。

Chrome拡張機能はHTMLとJavaScriptで制作できます。

それらをマニフェストファイル（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

まとめ

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

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

ツイートする

Permalink | トラックバック(0) | 17:03