先日、Google Chromeの簡単な拡張機能を作成したいという要望がありました。 拡張コードを変更した後、ブラウザが自動的に再起動しないという問題に直面しました。 これにより、開発が非常に困難になります。 エディターで各Cmd-Sを実行した後、拡張機能の一覧で[再読み込み]をクリックし、ページを更新してコンテンツスクリプトを再起動する必要があります。

簡単な調査の結果、Chromeは拡張機能に同様の機能を独自に実装するために必要なすべてのAPIを提供していることが判明しました。

既製の組み込みソリューションはgithub.com/xpl/crx-hotreloadにあり、この記事ではその実装方法を説明します。

File and Directory Entries APIを使用して、フォルダー内のファイルのリストを再帰的に取得します。

const filesInDirectory = dir => new Promise (resolve => dir.createReader ().readEntries (entries => Promise.all (entries.filter (e => e.name[0] !== '.').map (e => e.isDirectory ? filesInDirectory (e) : new Promise (resolve => e.file (resolve)) )) .then (files => [].concat (...files)) .then (resolve) ) )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

受信したファイルとその名前のすべてのタイムスタンプから「結合された」タイムスタンプを生成します。

 const timestampForFilesInDirectory = dir => filesInDirectory (dir).then (files => files.map (f => f.name + f.lastModifiedDate).join ())
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、ファイルの変更だけでなく、ファイルの削除/追加/名前変更も検出できます。

ウォッチドッグチェックは1000ミリ秒ごとに変更します。

 const watchChanges = (dir, lastTimestamp) => { timestampForFilesInDirectory (dir).then (timestamp => { if (!lastTimestamp || (lastTimestamp === timestamp)) { setTimeout (() => watchChanges (dir, timestamp), 1000) // retry after 1s } else { reload () } }) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

拡張機能とアクティブなタブを再起動します。

 const reload = () => { chrome.tabs.query ({ active: true, currentWindow: true }, tabs => { if (tabs[0]) { chrome.tabs.reload (tabs[0].id) } chrome.runtime.reload () }) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

タブを再起動すると、 runtime.reload



前にruntime.reload



れます。そうでない場合は動作しませんruntime.reload



呼び出すと、スクリプトが終了します。 ただし、タブの再読み込みは非同期に機能するため、最終的にはすべてが正しい順序で再読み込みされます-コードでは非論理的に見えますが。

さて、最後の仕上げ-拡張コードを含むフォルダーにドッグドッグセットを起動します。 しかし、これは、拡張機能が開発者モードで「アンパックされた拡張機能をロードする」でロードされている場合にのみ行います

 chrome.management.getSelf (self => { if (self.installType === 'development') { chrome.runtime.getPackageDirectoryEntry (dir => watchChanges (dir)) } })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、開発者が本番ビルドからこのウォッチドッグを手動で切断する必要はありません。

ついに

それは、一般に、すべてです。 ただし、そのようなことをテストする方法は完全に理解できません。 ここで、またはそれでもセレンが役立つとは考えにくいでしょうか？ フィードバックは大歓迎です。