chrome拡張でサイト側でのjavascript 実行
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
参考
- Chrome Extension のcontent scriptでの変数隔離に対応する。 - それマグで!
- いまさらまとめるChrome ExtensionでのJavaScript挿入 - console.lealog();
- javascript - Chromeの拡張機能のJavaScriptをサイト内のJavaScriptよりも早く実行したい - スタック・オーバーフロー
- Google グループ ⇒ サイト側からchrome側への戻し方
- javascript - Add a "hook" to all AJAX requests on a page - Stack Overflow ⇒ ajaxCompleteのサイト側からchrome側へのイベントの戻し方
- Chrome拡張でページのグローバル変数にアクセスしたい|UTAGE.WORKS カワシマ [フリーランスウェブクリエイター]|note