

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

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

[code]

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

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

[code]

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

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


CC BY-SA 3.0
2015-04-21T11:27:14.747
9384
2015-04-22T08:33:40.690
2015-04-21T14:33:51.590
9301
9301
question
javascript google-chrome
Chromeの拡張機能のJavaScriptをサイト内のJavaScriptよりも早く実行したい


拡張機能に[Content
script](https://developer.chrome.com/extensions/content_scripts)を追加して、ページのロード開始の時点に実行される（`"run_at":
"document_start"`）ように設定できます。

**manifest.json**

[code]

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

後は、script.jsの中で[MutationObserver](https://developer.mozilla.org/ja/docs/Web/API/MutationObserver)でDOMの変更を監視して、ページ内のスクリプトの実行の前の値を取得できます。

**script.js**

[code]

    (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
      });
    })();
    
[/code]

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


CC BY-SA 3.0
2015-04-21T14:06:29.530
9399
2015-04-22T08:33:40.690
2015-04-22T08:33:40.690
3371
3371
9384
answer