Chrome拡張機能からJavaScript Webページにアクセスする

ご存じのように、Chromeブラウザーの拡張機能はそれぞれ独自のサンドボックスで機能します。 JavaScriptコードがページに埋め込まれ、DOMツリーにアクセスできる場合、Webページに埋め込むためのコンテンツスクリプトのメカニズムがあります。 このメカニズムにより、ページコンテンツの操作、外観の変更、任意のJSの起動、バックグラウンド拡張プロセスとのデータ交換が可能になります。



しかし、コンテンツスクリプトメカニズムで許可されていないことの1つは、Webページのjavascript環境にアクセスすることです。





vk.comからlast.fmに音楽を聴くための拡張機能を作成したとき、最初にプレーヤーのDOM解析を使用してプレーヤーの状態を監視しました）それはひどく、レイアウトの最初の変更後、すべてが壊れました。 そのため、より信頼性の高いものを考え出す必要がありました。 インターネット検索により、コードをWebページに埋め込むためのシンプルで一見明らかなメカニズムが実現しました。



1.スクリプトのコンテンツから、ページ要素「script」のDOMツリーにコードを作成します。

//  vk_inner   vk.com var script=document.createElement('script'); script.type='text/javascript'; script.src=chrome.extension.getURL("js/vk_inner.js");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2.コードは、使用する必要がある機能にパッチを適用します。 パッチを適用するには、インターネット上のどこかにあるaddCallListenerメソッドを使用します。 目的関数を置き換え、起動の前後にハンドラーを呼び出します。

 Function.addCallListener = function(func, callbacks) { var successNumber = 0, errorNumber = 0, name = func.name; return function() { var args = [].slice.call(arguments); var result, error; var props = { args: args, self: this, name: name } callbacks.before && callbacks.before(props); try { result = func.apply(this, arguments); props.successNumber = ++successNumber; props.result = result; props.status = 'success'; callbacks.success && callbacks.success(props); } catch (e) { props.errorNumber = ++errorNumber; props.error = e; props.status = 'error'; callbacks.error && callbacks.error(props); } callbacks.after && callbacks.after(props); return result; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3.必要な機能にパッチを適用します。 vk.comの場合、これはaudioPlayer.onPlayProgress関数で、再生中に毎秒呼び出されます：

 var ARTIST_NUM = 5; var TITLE_NUM = 6; var artistElem = document.getElementById('vkScrobblerArtist'); var titleElem = document.getElementById('vkScrobblerTrackTitle'); //    audioPlayer.onPlayProgress = Function.addCallListener(audioPlayer.onPlayProgress, { after: function(props) { //    artistElem.innerHTML = audioPlayer.lastSong[ ARTIST_NUM ]; titleElem.innerHTML = audioPlayer.lastSong[ TITLE_NUM ]; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、プレーヤーが動作しているとき、artistElemおよびtitleElem要素には実際の曲名とそのアーティストが含まれます。 定期的にコンテンツをチェックし、それを使って何かをするだけです。 jQueryイベントメカニズムを使用すると、要素のコンテンツを定期的にチェックする必要がなくなります。 したがって、Webページのjsと拡張機能との間でシリアル化可能なデータの交換を手配することができます。