Minimal User CSS & JavaScript なChrome拡張を作った

最近、マルウェア化するソフトウェアが増えてきています。 特にGoogle Chromeの拡張機能の自動アップデートは危険で、 自動アップデートの停止が難しい上、管理も面倒、マルウェア判定も難しい。

私は拡張機能自体ほとんど使ってませんが、 前の投稿で説明した拡張を使ってユーザCSS、ユーザスクリプトを管理する行為を行っていました。 しかしこれもかなり危険に思ってきました。 (1)どう頑張っても拡張がすべてのページに対してアクセス権を持ってしまう事や、 (2)ユーザスクリプトでのマルウェア報告が増加しているためです。

例を挙げると最近では以下のような被害があります。

• HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。
• Googleがストアから削除。一見｢広告ブロック｣のChrome拡張機能、裏でユーザデータ抜いていた
• 人気のFirefox拡張機能「Stylish」がポリシー違反でブロック、すべての閲覧履歴を収集か - 窓の杜

また実際に悪意のあるChrome拡張がどのくらい危険かという事は Chrome拡張の権限でどこまで（悪いことを）できるのか？とその対策【デモあり】 - Qiita によくまとまっているので興味のある方は参照してみてください。

このような経緯もあり、最小限の機能ですべてのページに適用するユーザCSS、ユーザスクリプトを自作してみる事にしました。 自作ならセキュリティ上まったく問題ない。

まず以下のファイル構成を作ります。

usercssjs/
  manifest.json
  user.css
  user.js

manifest.jsonを以下のように編集します。
本当はどのタイミングでChrome拡張を起動するかなどの細かい話もあるのですが、話が長くなるだけなので割愛。興味のある方はこちらも参考にしてみてください。

{
  "name": "Minimal User CSS & JavaScript",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "Minimal User CSS & JavaScript",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "css": ["user.css"],
      "js": ["user.js"]
    }
  ]
}

user.css、user.jsにはすべてのページに設定したい内容を記述します。
私は以下のように設定してみました。まずuser.css。!importantを設定しないと駄目みたいです。

a:visited {
  color:red !important;
}

次にuser.js。例として右クリック禁止を無効化してみました。

// Enable Right Click
document.addEventListener('contextmenu', event => event.stopImmediatePropagation(), true);

あとはこの拡張を読み込むだけです。chrome://extensions にアクセスし、上部に表示されている「デベロッパーモード」をONにします。 そして「パッケージ化されていない拡張機能を読み込む...」を押して、usercssjsディレクトリを選択すれば完了です。 普通の拡張のようにパッケージ化していないので、user.css, user.jsを編集後に設定をリロードする事ができます。結構便利。

これにてセキュリティ向上は完了です。