TEXT/YUBASCRIPT

Web開発とか生物学とかTwitterとかの話題を適当に書いてる

ChromeでYouTubeのコメント欄を隠す拡張機能書いた

YouTubeのコメント欄がなんか見てて不快だったので、非表示にする拡張機能を作った。

NoCommentTube | Chrome Web Store

Chrome拡張機能は、通常のWebサイトと同じように HTML/CSS/JavaScriptを書き、それをzipで圧縮してChrome Web Storeで公開するというものである。なのでWeb作りに慣れてる人なら簡単。入門書の購入からWebStoreでの公開まで8時間くらいで終わった。

拡張機能の製作

今回作成したのは、URLが www.youtube.com で始まるページに対し、自分が書いたscript.js を実行するという、ごく単純な拡張機能である。

ファイル構成は以下のとおり。

src
├── css
│   └── style.css
├── icon128.png
├── icon48.png
├── js
│   └── script.js
└── manifest.json

manifest.js とはアプリの名前や説明文、アイコン画像のパスなどのメタ情報を指定するもので、今回は以下のような感じになった。

{
  "manifest_version": 2,
  "name": "NoCommentTube",
  "version": "1.0",
  "icons": {
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "description": "YouTubeのコメントを非表示にします。",
  "page_action": {
    "default_icon": {
      "48": "icon48.png"
    },
    "default_title" : "NoCommentTube"
  },
  "content_scripts": [{
    "matches": ["http://www.youtube.com/*"],
    "js": ["js/script.js"],
    "css": ["css/style.css"]
  }],
  "homepage_url" : "http://yubais.net/"
}

ごちゃごちゃ書いてあるけど肝心なのは content_scripts の部分で、URLが指定した値にマッチした場合、そのページ上で script.jsstyle.css を実行するというものである。

YouTubeのコメント欄は

<div id='watch-discussion'> ... </div>

というdiv要素に格納されているため、script.js では

document.getElementById("watch-discussion").style.display = "none";

と書いてやればコメント欄が消える。

動作確認

ChromeのURL欄に

chrome://extensions

と入力すると拡張機能の管理画面が表示される。右上の「ディベロッパーモード」にチェックを入れ、「パッケージ化されていない拡張機能を読み込む」で、上述のフォルダ構成にあるsrcを選択すれば拡張機能が読み込まれる。

Chrome Web Storeでの公開

自分で使う分にはこれで問題ないわけだが、やはり作ったからにはWebStoreで公開したい。以下にその手順を説明する。

まず Chrome Web Store にアクセスし、右上の設定アイコンから「ディベロッパー ダッシュボード」を選択。

下のほうに「登録手数料5ドル払え」と書かれている。収益化の見込みもない拡張機能の公開が有料というのも残念な話だが、Google Play (25ドル) やiOSのApp Store (年間99ドル) に比べればだいぶ良心的と言えよう。

ディベロッパー登録が済んだら、先ほど作成した拡張機能のsrc以下をzipで圧縮してアップロードする。あとは出てくる画面にしたがってアイコンとかスクリーンショットとか登録すればOK。

登録完了してから10分くらいしたらすぐに公開された。審査があると聞いていたがそれらしいものは無かった。とくにPermissonを要求していないからだろうか?このへんは不明。

参考書

Chromeの開発者向けの本は日本で多分これ1冊しか無いと思う。今月発売されたばかりなので内容も最新。若干高いがそれなりの価値はあると思う。