javascript - 如何在内容脚本中修改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 事件，所以让我们 Hook 它。

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

要检测动态加载网页的确切信号名称，请打开 devtools (F12) 控制台并运行 window.addEventListener('message', console.log)，然后在查询输入框中执行搜索，查看控制台中出现的事件并尝试找到对您有用的事件。