2

概括

在我们的新工具发布时，带有一些广告预览的 div 不会显示在每个浏览器中。即使我和我的同事的浏览器版本完全相同。经过一些（长时间）调试后，我们设法找到了导致 Chrome 插件的原因。

在下方，您可以阅读整个故事。我将其标记为问答风格，因此甚至不必费心考虑可能的答案，因为我已经为您准备好了:)。我在这里发布这个是因为我还没有博客，我想分享它！我希望我们可以帮助您或您遇到相同（相似）问题的同事程序员。

问题

今天，我们在内部 CRM 应用程序上发布了一个新工具，该工具根据员工和客户提供的数据创建广告。此工具能够在全部导出之前显示其中一些 (5) 广告。此预览是通过 Ajax 调用完成的，该调用将使用提供的数据创建广告。我在 localhost 上开发了这个工具，将它上传到测试服务器，一切都很好。在具有多个不同用户的多台计算机/浏览器上，一切正常。是时候发布这些东西了。

我们将文件上传到服务器，添加了不同的数据库表，并使我们自己成为唯一被允许访问该页面以进行一些最终检查的用户。我在我的电脑上做了一些检查（Win 7 with Chrome），一切都像在本地主机和测试服务器上一样正常工作。我的一位开发主管同事也在尝试使用该工具。它工作得很好，但是...

由于某种原因，当他登录自己的计算机（带有 Chrome 的 Win 7）时，“预览广告”没有显示。起初我们认为它必须与 JavaScript 做一些事情。他必须刷新甚至清除缓存才能使其正常工作，但这并没有解决问题。控制台也没有抛出任何错误，所以......

也许这与他的帐户有关？因为他是头部发育，我们当然想阻止他，只是因为我们可以:)。我们考虑了 ACL 管理，因为我们有一些特殊的规则，所以我们可以访问，但员工不能。也许我们忘记了一些东西，但是它不得不在身份验证日志中抛出一个错误。但是当他通过 Firefox 或我的电脑登录时，一切正常。所以这与它无关。

然后我们有了一个聪明的想法，即查看元素检查器，看看广告是否正确加载到 DOM。它似乎在那里，所以这很奇怪。我们试图关闭一些在重新加载时临时隐藏广告包装器的类，但这并没有解决问题。所以我们开始摆弄这些元素。拖动它们，切换类和样式，但似乎没有任何效果。但是后来......他想出了将<table>包含广告的内容拖到包裹桌子的div之外的想法。我们有这个结构是因为这个包装器还包含加载指示器，以便在它们之间更轻松地切换。就在那里，桌子出现了。所以，我们现在知道它必须与包装器有关。但是什么？

解决方案

在我的浏览器中进行了一些尝试和调试并再次尝试之后，我开始大声说出来，比如：“相同的 Chrome 版本”、“相同的 CSS”、“f5'd”、“插件”……等等什么？我的同事跑到他的电脑前说，可能和这个有关；并关闭Adblock plus。刷新页面后，出现了 div（广告包装）。

所以，现在我们知道是什么导致了问题，但我们想知道原因，我们想让每个员工都可以使用该工具。如果员工正在使用此插件怎么办？我们不能强迫他关闭 Adblock。

<div id="ads-wrapper">
    <table> ... </table>
</div>

你在这里看到什么？一个<div>ID 为“ads-wrapper”的广告。似乎 Adblocker 正在隐藏具有此 ID 的元素。因此，让我们尝试在元素检查器中更改该属性。将其值更改为“预览”、“包装”甚至“广告”都可以。但是，当我们有“广告”和“包装”的组合时，它会失败。将“包装器”更改为“容器”也会导致隐藏元素。

第一个想法：正则表达式。它可能是一些正则表达式，它过滤具有与其模式匹配的 id 的元素并简单地隐藏它。

我搜索了一种方法来查看这些 Chrome 插件的来源。另一位同事正在构建他自己的插件，我在 HTML 和 CSS 方面帮助了他一些，所以我知道它是用 JavaScript 制作的。源头一定在某处。我发现这篇文章描述了在哪里可以找到已安装插件的来源。我打开插件的文件夹，发现一大堆 JavaScript 文件。我将它们全部打开并批量搜索诸如“正则表达式”之类的东西，希望不必吐出所有文件。没有。

过了一会儿，我找到了第 189 行background.js。幸运的是，这是我打开的第二个文件，所以我很快就找到了。

addSubscription("https://easylist-downloads.adblockplus.org/liste_fr+easylist.txt", "Liste FR+EasyList");

我在 Chrome 中打开了这个函数中使用的链接，看到了大量的标签、url 和其他我什至不想记住的东西。

在第 5876 行，我找到了以下行：

...
###ads-wrapper
...

似乎前两个##用来说：嘿，这是一个属性，所以在你的函数 Mr. Adblock plus 中过滤它。因为稍后您可以找到类似##.ads-wrapper. 我们在这个文件中找到了我们之前尝试过的所有属性值。（在background.js您可以找到更多包含要隐藏的匹配项的文件。）

结论

查看.txt并检查它们排除的类、id 和其他属性以及 url。请不要试图记住它们，而是看一眼。您会在这些值中找到一些模式，因此希望您能记住，即使您的意图不是显示广告，某些插件也会阻止您的内容！

如果您的公共可访问网站的访问者向您发送以下消息，那可能会非常令人头疼：

嘿，您的网站无法正常工作。我看不到Foo Bar ...

因此，希望您现在在本文中思考一下并思考：“也许它与广告拦截器插件以及我在 id 和类中的选择有关。”。

使用的链接

4

1 回答 1

0

我已将此问题检查为“回答您自己的问题”，因为我想分享我的发现，这确实令人头疼。

您可以在原始帖子中找到完整的解决方案/答案。在否决这个答案之前，请注意这一点！

解决方案总结

AdBlock plus，一个 Chrome 插件似乎会根据其网站上的文件阻止具有指定属性的 url 和元素。

查看文件并检查它们排除的类、id 和其他属性以及 url。请不要试图记住它们，而是看一眼。您会在这些值中找到一些模式，因此希望您能记住，即使您的意图不是显示广告，某些插件也会阻止您的内容！

于 2013-01-10T13:44:57.137 回答