chrome拡張でサイト側でのjavascript 実行

chrome extension

chrome拡張ではサイト側のJavascriptにはアクセスすることができないので、
bookmarkletにして流し込んだり、script要素をDOM操作で追加したりして流し込む

また、サイト側のスクリプトからchrome拡張にイベントなどを戻すことができないので、その場合はカスタムイベントを生成して対応する

  • ※ イベント名を『ajaxComplete』から『ajaxCompleteChrome』に修正、『ajaxComplete』のイベント名は大元のjQuery側で同名のイベントで定義されているので使えない。
function sendScript(code) {
  var id  = 'fromContentScripts';
  var elm = document.getElementById(id);
  if (elm != null) {
    document.body.removeChild(elm);
  }
  elm  = document.createElement('script');
  elm.type = 'text/javascript';
  elm.text = '(' + code.toString() + ')();';
  elm.id   = id;
  document.body.appendChild(elm);
  document.body.removeChild(elm);
}
  • サイト側のjQueryにajaxCompleteを設定
sendScript(
  function () {
    setTimeout(
      function(){
        var e = document.createEvent('Event');
        e.initEvent('ajaxCompleteChrome', true, true);
        $(document).ajaxComplete(function () {
          document.body.dispatchEvent(e);
        });
      },1000
    )
  }
);

※ setTimeoutで1秒後に設定しているのはサイト側にスクリプトを送り込んだ時点では、何故かjQueyオブジェクトができていなかった為、サイトによっては必要ないはず。

  • content_scripts側でajaxCompleteイベントを受け取る
document.body.addEventListener('ajaxCompleteChrome', function () {
 .
 .
 .
});

追記

  • 色々めんどくさいことしなくてもchrome.webRequest.onCompleted でhttp通信完了を取得すればいいことに気が付いた。これがFA

参考