コンテンツスクリプトのGoogle検索結果ページを変更するにはどうすればよいですか？

Question

私はChromeの拡張機能を作成し、Google検索のページ内のコンテンツの一部を削除するには、私のコンテンツスクリプト内で次のコードを配置している：

window.onload = function() { 
    $('.g').remove(); // This is the container for the search results in Google 
} 

私はそれが開発者で働いて見ていてもそれは動作しません。コンソールを手動で実行すると

Answer 1

Googleページではコンテンツが動的に読み込まれるため、MutationObserverまたはsetTimerコールバックで要素を監視する必要があります。または、ページがその更新を通知するために使用するイベントを見つける必要があります。多くのサイトではmessageイベントを使用していますので、それをフックしましょう。

content.js：

// process current DOM, most probably nothing useful at this point 
onGoogleSearchUpdated(); 

// listen to "sr" signal emitted by Google search page 
window.addEventListener('message', function(e) { 
    console.log(e.data, e); 
    if (typeof e.data === 'object' && e.data.type === 'sr') { 
     onGoogleSearchUpdated(); 
    } 
}); 

function onGoogleSearchUpdated() { 
    console.log('Removed:', $('.g').remove()); 
} 

動的にロードされたWebページの正確な信号名を検出するための、オープンデベロッパーツール（F12）コンソールおよびクエリー入力ボックスに検索を行い、その後、window.addEventListener('message', console.log)を実行し、コンソールに表示されるイベントを見て、あなたに役立つイベントを探してみてください。