6

Chromeの拡張機能のJavaScriptを実行する場合、
サイト内のJavaScriptのほうが早く実行されるのですが
先に実行させる記述方法はありますか?

例えばこのようなサイトで、

<body>
<div id="t">test</div>
<script>
var t = document.getElementById('t');
var s = t.innerHTML;
t.innerHTML = s.replace('test', 'sample');
</script>
</body>

このようにid="t"内のinnerHTMLを
console.logで表示させようとしても
実際に表示されるのはreplaceで置き換わった
sampleという文字列になってしまいます。

chrome.tabs.onUpdated.addListener(function() {
  chrome.tabs.executeScript(null, {
    'code': 'console.log(document.getElementById("t").innerHTML)'
  });
});

置き換わる前のtestの文字列を表示させるには
どうすればよいのでしょうか?

2
  • 確かに「速く」だと処理速度のことを話しているようになってしまいますので 「早く」に修正しました。 ご指摘ありがとうございます。
    – Yui Sato
    Commented 2015年4月21日 14:35
  • おっ,早速の対応どうもです :)
    – Yosh
    Commented 2015年4月21日 14:38

1 件の回答 1

11

拡張機能にContent scriptを追加して、ページのロード開始の時点に実行される("run_at": "document_start")ように設定できます。

manifest.json

{
  "manifest_version": 2,
  "name": "My extension",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "file:///*"],
      "run_at": "document_start",
      "js": ["script.js"]
    }
  ]
}

後は、script.jsの中でMutationObserverでDOMの変更を監視して、ページ内のスクリプトの実行の前の値を取得できます。

script.js

(function() {
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  var observer = new MutationObserver(function(mutations) {
    Array.prototype.forEach.call(mutations, function(mutation) {
      if (mutation.type === 'childList') {
        Array.prototype.forEach.call(mutation.addedNodes, function(node) {
          if (node.id === 't') {
            console.log(t.innerHTML);
          }
        });
      }
    });
  });

  observer.observe(document, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
})();

こうすると、質問の例のHTMLページをロードしたら、ちゃんとコンソールにtestが出力されます。

2
  • 1
    DOMの変更を監視するMutationObserverという存在を はじめて知りとても勉強になりました。 ご回答いただきどうもありがとうございました。
    – Yui Sato
    Commented 2015年4月21日 14:33
  • 自分も始めてでした。Chromeの拡張機能も作ったことがなかったから、非常に勉強になりました。質問は面白いと思って、こちらこそありがとうございます :-) Commented 2015年4月21日 14:41

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。