Question

我创建了一个Chrome扩展程序，并将以下代码放入我的内容脚本中，以删除Google搜索页面中的部分内容：

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

当我手动执行它时，即使我看到它在Developer Console中工作，它也不起作用。

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

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

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

1 个答案: