please-adblock

Detects if an adblocker is not installed, then prompt to install one, if browser supports webextensions.

Details:

• detects if browser can install webextension
• try to load a file that should be blocked by ad blocker
• if request is not blocked, displays a message advising to install an ad blocker

Install

npm install please-adblock # or yarn add please-adblock

Usage

Load script dist/please-adblock.min.js then call function pleaseAdBlock

<script type="text/javascript" src="dist/please-adblock.min.js"></script>
<script type="text/javascript">
  pleaseAdBlock();
</script>

Import module:

import pleaseAdBlock from 'please-adblock';
pleaseAdBlock();

Params

element: domString selector, HTMLElement or default: a new dom element with default message will be created and append

<p class="please-adblock">We have detected that you are not using an ad blocker. Please install one.</p>
<script type="text/javascript">
pleaseAdBlock({
  element: '.please-adblock'
})
</script>

<script type="text/javascript">
const el = document.createElement('div')
el.innerText = "We have detected that you are not using an ad blocker. Please install one."
document.body.appendChild(el)
pleaseAdBlock({
  element: el
})
</script>

Styles

Default DOM element has css class that you can override: please-adblock

Default CSS styles (added by js, you should better copy/insert it in your .css):

<style>
.please-adblock {
  position: fixed;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  background-color: #EEE;
  color: black;
  padding: 20px;
  z-index: 999;
  box-sizing: border-box;

  display: none;
}
.please-adblock--visible {
  display: block;
}
</style>

A new class please-adblock--visible is added, when message should be displayed.