by ryou

Chrome拡張作成メモ

サイトのフィルタリングのためのChrome拡張を入れていたのですが、その拡張がjQueryを使用していてDevToolsのPerformanceタブを見てみるとjQueryの処理のために多少なりとも時間がかかってしまってました。

やることは特定のドメインの際にリンクテキストを書き換えてわかるようにするってだけのことで、別にjQuery使わず生JSで出来ることだったので、折角なので自分で簡単な拡張を書こうと思って調べたことの覚書。

拡張の最小ディレクトリ構成

最低限必要なのは下記の2ファイルのみ

├── manifest.json
└── content_script.js

このフォルダを拡張機能のページ(chrome://extensions/)へドラッグ&ドロップすれば自作の物もインストール出来る。

manifest.json

最低限書く必要があるのは以下の内容

{
  "manifest_version": 2,
  "name": "拡張名",
  "version": "0.0.0.1",
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["content_script.js"],
    "run_at": "document_end"
  }]
}

manifest_version

2で固定

name

拡張の名前を好きに

version

拡張のバージョン

content_scripts

matchesはどのURLで拡張を起動するか。
全てのURLで起動したい場合は例のようにワイルドカードを使えばいい。

jsは実行するスクリプトファイル名。
もちろん別に「content_script.js」って名前である必要はないし、複数あってもOK。

run_atはスクリプトを実行するタイミング。
「document_end」はjQueryで言うreadyのタイミング。

注意としては例のように

"content_scripts": [{
  ~
}]

オブジェクトを配列で囲まないとエラーで拡張が実行されない。

content_script.js

実際に実行するJavaScript

今回は以下のようなスクリプトを書いた。

;(function() {
  var FILTER_LIST = [
    'hogehoge.com'
  ];

  /*
  引数として渡されたDOM(a要素)のhrefにfilter対象の文字列が含まれていたら
  Censoredにする
  */
  function filterLink(dom) {
    var href = dom.getAttribute('href');

    // hrefがnullの時があるので型判別
    if (typeof href === 'string') {
      FILTER_LIST.forEach(function(e, i, a) {
        if (href.indexOf(e) !== -1) {
          dom.textContent = 'Censored';
          dom.style.setProperty('background-color', '#2c3e50', 'important');
          dom.style.setProperty('color', '#fff', 'important');
        }
      });
    }
  }

  var aTagList = document.querySelectorAll('a');

  aTagList.forEach(function(e, i, a) {
    filterLink(e);
  });
})();

参考

What are extensions? – Google Chrome

Chrome拡張の開発方法まとめ その1:概念編 – Qiita

Chrome 拡張機能のマニフェストファイルの書き方 – Qiita

ライブラリを使わない素のJavaScriptでDOM操作 – Qiita