如何在内容脚本中修改Google搜索结果页？

Question

I have created a chrome extension and placed the following code inside my content script to remove some of the contents in the google search page:

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

It doesn't work even though I see it working in the Developer Console when I manually execute it.

Answer 1

Google page loads content dynamically, so you'll have to watch for elements either with a MutationObserver, or in a setTimer callback, or -preferably- find an event the page uses to signal its update. Many sites use message event, so let's hook it.

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());
}

To detect the exact signal name of a dynamically loaded webpage, open devtools ( F12 ) console and run window.addEventListener('message', console.log) , then perform the search in the query inputbox, look at the events appearing in the console and try to find which is useful for you.