Question

摘要

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

在下面你可以阅读整个故事。我将此标记为Q&A style，所以不要费心去考虑可能的答案，因为我有它为你:)。我在这里发帖是因为我还没有博客（还），我想分享它！我希望我们可以帮助您或您的同事 - 程序员遇到相同（类似）的问题。

问题

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

我们将文件上传到服务器，添加了不同的数据库表，并使自己成为allowed to visit页面进行最终检查的唯一用户。我在我的计算机上做了一些检查（使用Chrome的Win 7），一切都像在localhost和测试服务器上一样工作。作为开发主管的我的一位同事也试图使用该工具。它很棒，但是......

出于某种原因，＆＃34;预览广告＆＃34;他登录自己的电脑时没有显示（使用Chrome赢取Win 7）。起初我们认为它必须使用JavaScript。他必须刷新甚至清除缓存以使其工作，但这并没有解决问题。控制台也没有抛出任何错误，所以......

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

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

解决方案

经过一些尝试和调试并在我的浏览器中再次尝试后，我开始大声说出来，比如：＆＃34;相同的Chrome版本＆＃34;，＆＃34;相同的CSS＆＃34;，＆＃34; f5＆＃ 39; d＆＃34;，＆＃34;插件＆＃34; ......等什么？我的同事跑到他的电脑前说，这可能与此有关;转过Adblock plus。刷新页面后，div（广告包装器）出现了。

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

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

你在这看到什么？一个<div>，其ID为＃34;广告包装＆＃34;。似乎Adblocker隐藏了具有此ID的元素。因此，让我们尝试在元素检查器中更改该属性。将其值改为＆＃34;预览＆＃34;，＆＃34;包装＆＃34;甚至＆＃34;广告＆＃34;会工作得很好。但是，当我们结合使用＆＃34;广告＆＃34;和＆＃34;包装＆＃34;它会失败。更改＆＃34;包装＆＃34;到＆＃34;容器＆＃34;也会导致隐藏元素。

首先想到的是：正则表达式。它可能是一些正则表达式，它过滤ID与其模式匹配的元素，并简单地隐藏它。

我搜索了一种方法来查看这些Chrome插件的来源。另一位同事正在构建他自己的插件，我用HTML和CSS帮助了他一点，所以我知道它是用JavaScript制作的。来源必须在某个地方。我发现this article描述了您可以在哪里找到已安装插件的来源。我打开了the plugin的文件夹，发现了一大堆JavaScript文件。我打开了所有这些，然后对＆＃34; regex＆＃34;等事情进行了大量搜索。希望不必吐出所有文件。什么都没有。

过了一会儿，我在background.js找到了第189行。幸运的是，这是我打开的第二个文件，所以我发现它非常快。

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

我在Chrome中打开了此功能中使用的the link，看到了大量的标签，网址和其他我甚至不想记住的内容。

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

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

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

结论

查看the .txt并查看他们排除的课程，ID以及其他属性和网址。请不要试图记住它们，但要一瞥它。您会发现这些值中的一些模式，所以希望您可以记住，即使您不打算显示广告，某些插件也会阻止您的内容！

如果您的公共访问网站的访问者通过以下邮件向您发送邮件，那可能会非常令人头痛：

嘿，你的网站没有用。我看不到Foo Bar ......

所以希望你现在可以在这篇文章中思考一下并思考：＆＃34;也许它与adblocker插件以及我在id和类中的选择有关。＆＃34;。

使用过的链接

Answer 1

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

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

解决方案摘要

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

查看the file并检查它们排除的类，ID和其他属性及网址。请不要试图记住它们，但要一瞥它。您会发现这些值中的一些模式，所以希望您可以记住，即使您不打算显示广告，某些插件也会阻止您的内容！

元素隐藏在某些计算机上相同版本的Chrome中 - Adblock

1 个答案: