修改Google新闻以消除不需要的新闻来源

Question

TL; DR

我想编写一些代码，根据新闻来源过滤掉Google News上显示哪些文章。

（长版）

我传统上使用＆＃34;个性化＆＃34; Google News中的选项用于限制使用哪些新闻来源（例如，＆＃34;不显示来自FooNews的文章＆＃34;）。但是，个性化选项并不能让你完全阻止新闻来源......你能做的最好就是告诉它使用那个来源＆＃34;很少＆＃34; （他们不提供＆＃34;从不＆＃34;选项）：

Firefox是我的首选浏览器，所以我终于坐下来看看我是否可以编写一些代码来解决这个问题，但我想知道我的选择是什么以及可能是最佳选择。这是我迄今为止所学到的知识：

选项1：过滤传入数据

我做了一些Google搜索，看看是否有可能拦截响应数据并在浏览器中呈现之前过滤掉不需要的新闻来源，但无法找到有关如何执行此操作的明确建议。使用Fiddler，我可以看到相当简单的新闻来源列表从Google新闻传到浏览器，我假设页面上有一个Google脚本获取新闻来源列表和根据Google新闻页面结构构建HTML以格式化它们（虽然我可能错了）。换句话说，我认为我看到的是响应流不是通过页面HTML发送的......它所做的就是通过新闻源列表发送。如果是真的，那么在它甚至点击页面内格式化脚本之前简单地过滤这个新闻源流将是最简单和最简洁的。

选项2：在构造DOM

之前过滤数据

我开始摆弄Mutation Observers，看看是否可以通过在为页面构建DOM时捕获并删除这些节点来过滤掉不需要的新闻来源。我开始使用mutation-summary.js库，但是当它添加到DOM时，我没有为每个新闻文章触发事件，而是只看到一些通知。也许我做错了什么，但我需要在将每篇新闻文章添加到DOM时得到通知，以便有一个有效的过滤器。接下来我会考虑写一些plain-vanilla JS mutation observers（跳过图书馆），但是想等一下，看看是否有更好的选择。

选项3：在构造DOM

之后过滤数据

我听到其他人建议采用这种方法：

1. 使用CSS隐藏整个文档正文
2. 等到构建DOM
3. 通过查找不需要的DOM节点并删除它们进行过滤
4. 最后，取消隐藏修改后的正文（我猜这个技巧可以防止你在最初构建DOM后修改DOM所引起的页面闪烁）

我写了一些测试代码来尝试这种方法，虽然单调乏味，但并不太难。在已经建立的Google新闻页面上研究了DOM的结构之后，我能够编写一些代码来搜索和遍历DOM以删除我不想看到的新闻文章。然而，这样做既麻烦又多了很多工作，因为这会留下“漏洞”。在已删除的DOM节点所在的页面结构中。随着更多的工作，我可以移动其他剩余的新闻文章，以填补那些＆＃34;漏洞＆＃34;，但如果可能的话，我宁愿使用其他方法之一，因为它们似乎更容易和更清洁......更不用说更快了。在构建DOM之后摆弄DOM需要更长时间，因为使用CSS隐藏页面直到完成该过程会使用户等待任何直到页面完全加载，更改和重新显示。 / p>

问题

我的直觉说选项1 最干净最快（如果有可能），然后选项2 如果没有，最后选项3 作为最后的手段。

我最终希望将其转换为Firefox扩展，因此我希望我选择的解决方案具有以下特性：

• 尽可能简单地维护代码（不是初始复杂性的问题，而是希望以后在需要进行更改以便使扩展保持最新时再次访问）。理想情况下，代码将尽可能与对Google新闻页面的特定HTML格式的依赖性分离，以便每次Google调整页面时都不需要代码更新。
• 尽可能高效（没有懈怠，页面闪烁等）。我不希望用户卸载扩展程序，因为它感觉像是一块垃圾。
• 尽可能使用跨浏览器（以便在将来发布Chrome，Edge等扩展程序）

解决这个问题的所有可能的技术方法（包括我可能错过的其他方法），哪个最能满足我的要求？

Answer 1

我认为你可以轻松地完成选项1。它类似于选项3使用的策略，只有您手动将屏幕截图中的响应转换为用于查询的dom dom（例如

var topNode = document.createElement('div'); 
div.innerHTML = response.html;

如果需要，您可以创建一个文档片段作为多个响应的工作空间。

我认为您已经知道这一点，但为了清楚起见，接下来的步骤是查询您为源层次结构元素构建的dom（例如，.source .source-pref为侧边栏， .source-cell .al-attribution-source为主要部分）。然后迭代节点并查找匹配您的违规新闻来源的innerText。对于比赛，向上走回dom，并移除最外面的元素。

然后将你的头节点的innerHTML重新分配回来进行响应。