It is very simple to code a detector.

A brief explanation:

• Create a div with class 'adBanner' with height and width of 1px
• Wrap adBanner with an outer div, let's call it wrapper
• On loading the page, using inline JavaScript, detect if wrapper has a height > 0, if not, then display an alert asking the user to disable adblocker for your domain

Here's the code, with comments

<!-- This will be displayed if adblock is active -->
<div id="adblock-detect" style="display: none; background: #3375ee; width: 100%; position: fixed; top: 0; left: 0;">
    <p style="color: white; text-align: center; padding: 0 10px;">
      For a smooth experience, please <strong>disable your AdBlock or Antivirus</strong> plugins/extensions for Commudle. We're safe, we promise!
    </p>
</div>

<!-- We have intentionally created an adbanner and wrapped it within another div -->
<div id="wrapper">
    <div class="adBanner" style="background-color: transparent; height: 1px; width: 1px;">
    </div>
</div>

<!-- Detect if "wrapper" has a height, if not, adblocker notification needs to be displayed -->
<script>
      document.addEventListener("DOMContentLoaded", function(){
          if(document.getElementById("wrapper").offsetHeight > 0) {
              return;
          } else {
            document.getElementById('adblock-detect').style.display = 'block';
          }
      });
  </script>
</div>

 

You can see it live in action here: https://auther.commudle.com