概要

半年ほど前だがChormeの簡単な拡張機能を作ったので、その備忘録を残す。

拡張機能の実体はzipファイル。zipファイルの中には、manifest.jsonという名前のjsonファイルが含まれている必要がある。

以下で簡単な実装例を2つ見ていく。

実装例1 - スタイルを変化させる

特定ページの特定要素を消したり、見た目を変えたりする拡張機能。adblockのようなものをイメージしてもらうとわかりやすいと思う。

{
  "name": "スタイルを変化させる拡張機能",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://example.*/*"],
      "css": ["style.css"],
      "js": []
    }
  ],
  "manifest_version": 2
}

細かいオプションはもっとあるが、とりあえずこれだけあれば動く。
nameには拡張機能の名前をつける。拡張機能管理画面で表示される他、アイコンの設定をしていなければここで指定した名前の1文字目が拡張機能のアイコンに使われる。
versionにはこの拡張機能のバージョンをつける。同じ拡張機能を更新していく場合に数字を上げていく。
content_scriptsには読み込むcssファイルやjsファイルを指定する。matchesで指定したパターンにURLが一致した場合に、cssやjsで指定したファイルが読み込まれる。配列なのでそれぞれ複数指定できる。
manifest_versionには2を指定する。現在有効なmanifest_versionは2しかないらしい。

#target-element {
  display: none;
}

id="target-element"の要素を表示しないようにする。style.cssの中身を変えれば、要素を非表示にするだけでなくページの見た目を自由に変えることができる。

実装例2 - jsでページを操作する

拡張機能でページにjsを埋め込む。

{
  "name": "jsでページを操作する拡張機能",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["http://example.com/*"],
      "css": [],
      "js": ["script.js"]
    }
  ],
  "manifest_version": 2
}

window.onload = function(){
  const element = document.getElementById('target-element');
  if(element) element.setAttribute('oncopy', 'event.stopPropagation();');
};

id="target-element"の要素内でコピーしたときに、その上要素でoncopy="return false;"などと書かれていた場合コピーが阻害されるが、拡張機能でstopPropagationすることでコピーの阻害を無効化することができる。

導入方法

Chromeのアドレスバーにchrome://extensions/と入力して拡張機能ページへ移動。右上のデベロッパーモードを有効にする。パッケージ化されていない拡張機能を読み込むをクリック。manifest.jsonと必要なコンテンツスクリプトを含むフォルダを指定する。ブラウザ右上にアイコンが追加されたら導入成功。

matchesのURLパターンや、cssやjs内のセレクタを変えて実際のサイトで試してみてほしい。