Sunday, August 2, 2009

Detect highlighted text or selected text in Firefox

This is an example of how to detect highlighted or selected text in Firefox on the current page. This can be used to detect what users on your site are looking for. This is just an example but you could easily add a little code to post the variables to a server-side script and log the information to a db, etc.

Note: This was tested on Firefox 3.0.12.


<html>
<head>
<title>foobar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="mt.js" type="text/javascript"></script>
<!-- available from http://mootools.net/download/get/mootools-1.2.3-core-yc.js -->
<script type="text/javascript">

window.addEvent('domready', function() {
// every 3 seconds
var timer = 5;
var periodical;

var checkad = (function() {
var highlights = $$('.__mozilla-findbar-search');
var shown = false;

if($chk(highlights)) {
highlights.each(function(item, index){
if(!shown){
var text = item.get('text');
alert('Highlighted text: '+text);
shown = true;
//$clear(periodical);
}
});
}

if(window.getSelection() != ''){
alert('Selected text: ' + window.getSelection() );
//$clear(periodical);
}


});

periodical = checkad.periodical(timer * 1000, this);
});

</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas risus
augue, placerat in scelerisque in, suscipit ornare purus. Donec laoreet
libero rhoncus. Aliquam id urna ante. Mauris pretium lacinia odio eget
scelerisque. Nam tempor nibh vel sapien eleifend quis iaculis mi mattis.
</p>
</body>
</html>


As a test search for one of the words on the page(such as lorem). Next use the highlight button to test.

Friday, December 26, 2008

UPDATE2: Detecting Ad Block Plus by using AJAX and Flash

Here is another way to detect Ad Block Plus by the changes it makes.

<html>
<head>
<title>foobar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/mt.js" type="text/javascript"></script>
<!-- available from http://mootools.net/download/get/mootools-1.2.1-core-yc.js -->
<script type="text/javascript">


window.addEvent('domready', function() {
// every 3 seconds
var timer = 3;
var periodical;

var checkad = (function() {
var links = $$('a');

if($chk(links)) {
links.each(function(item, index){
var class = item.get('class');
if(class.contains('abp-objtab-')){
alert('Ad-Block detected');
}

$clear(periodical);
});
}
});

periodical = checkad.periodical(timer * 1000, this);
});
</script>
</head>
<body>
<embed type="application/x-shockwave-flash" src="blank.swf" bgcolor="#ffffff" quality="high" height="20" width="80">
<!-- available from http://community.shozam.com/forums/storage/1/1912/blank.swf -->
</body>
</html>

Tuesday, December 23, 2008

UPDATE: Detecting Ad Block Plus by using AJAX and Flash

The previous post "Detecting Ad Block Plus by using AJAX and Flash" only worked with the following locales:

  • en-GB, en-US


This is an update that works with all of the locales that are supported by Ad Block Plus which are:
  • ar
  • ca-AD, cs-CZ
  • da-DK, de-DE
  • el-GR, en-GB, en-US, es-ES,et-EE
  • fa-IR, fi-FI, fr-FR, fy-NL
  • gl-ES
  • he-IL, hr-HR, hu-HU, hy-AM
  • id-ID, it-IT
  • ja-JP
  • ko-KR
  • lt-LT
  • mn-MN, ms-MY
  • nb-NO, nl-NL
  • pl-PL, pt-BR, pt-PT
  • ro-RO, ru-RU
  • sk-SK, sl-SI, sv-SE
  • th-TH, tr-TR
  • uk-UA
  • vi-VN
  • zh-CN, zh-TW


Here is some example code:

<html>
<head>
<title>foobar</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/md5.js"></script>
<!-- available from http://pajhome.org.uk/crypt/md5/md5.js -->
<script src="js/mt.js" type="text/javascript"></script>
<!-- available from http://mootools.net/download/get/mootools-1.2.1-core-yc.js -->
<script type="text/javascript">


window.addEvent('domready', function() {
// every 3 seconds
var timer = 3;
var periodical;

var lang = new Array(
'b34afd6c40e74164af29a60b35dca8f3', //ar
'60e6025b3726e73980d06c9fa6cfa3c2', //ca-AD
'f73a949e89c58ce2ace3bc54d98496e3', //cs-CZ
'9d1d34b54489a0b3915fab4d7272da7c', //da-DK
'b135dfd619da629b2c972b269a09a4a3', //de-DE
'55d165587f09fd0998319b102e3db8ef', //el-GR
'bce349746ccb035bffa61ccace7bc743', //en-GB
'64aef99da65bf52bcae4f5b87554cdb3', //en-US
'e94f484f085815fb69eab35174aeeb77', //es-ES
'ebb7e3e88a493d6820ff61391998e0aa', //et-EE
'4f8ecf2c745f9f2c9ed312f5a5c58cd4', //fa-IR
'def34feca7e5ed8a55d66e8b6cc03950', //fi-FI
'63158b64b695d5fb66ce3a05d41c14c0', //fr-FR
'ba61a9273c12efd9ee50d1775b6ab3d5', //fy-NL
'0b7ca476918cb2864ed25198d1dde180', //gl-ES
'50729afc793a3c8bd2c8996bfba00be0', //he-IL
'f194bfabdc7a16cfbeeac4ecc3649bed', //hr-HR
'f11210e1a47e9c637f89dc62552340f4', //hu-HU
'76c38e36eedd4e44e0aa958c942285a1', //hy-AM
'6e2f52ae86f0150b1f492d671651b54a', //id-ID
'256f027563799b2a2dff5b5cb4857b9c', //it-IT
'63e1960d758fb07c1f64c31d032d51b4', //ja-JP
'845bbf9328004ac8996c12f49f495197', //ko-KR
'b5bb24b74b566ced9bbf594773c28678', //lt-LT
'8b0738eecf40cb4631b4108957bcd0a1', //mn-MN
'34d82c7ffa6571dc3099d26c6f948f0f', //ms-MY
'5bcbb970b098e164164d78618f42d594', //nb-NO
'b2db36410657579729e933619dd619d2', //nl-NL
'fc28be5592721a33a84111e5b9ee9c05', //pl-PL
'462c300494b9bbfb8d49f62ff0f6ec59', //pt-BR
'a6db7a5b54c29777aa7bb151993abac9', //pt-PT
'9eaaba99ca678c605c18aeca2cf63919', //ro-RO
'4daec85c997a1be2fc78090f3d135560', //ru-RU
'fb6994c176ca3f41b9a981b6a6abbbb2', //sk-SK
'69fe1a9cb928726eac22a6fb1a4a4c58', //sl-SI
'bfecc8dd2bde530fe93c126371662329', //sv-SE
'ec5f2e5819121d4d7dfe373fafc17e11', //th-TH
'5a2d87434100a02358149688e1bbf30a', //tr-TR
'08bd638ee2754d43b060952a79fe482e', //uk-UA
'40f2fcd011d88928d797cd0fd864bd31', //vi-VN
'cee6582f325017467cb8a3f057658364', //zh-CN
'66021f2a5bcadd24fd8e8b4bc8fb1d52' //zh-TW
);

var checkad = (function() {
var links = $$('a');

if($chk(links)) {
links.each(function(item, index){
var title_md5 = hex_md5(item.get('title'));
if(lang.contains(title_md5)){
alert('Ad-Block detected');
}

$clear(periodical);
});
}
});

periodical = checkad.periodical(timer * 1000, this);
});
</script>
</head>
<body>
<embed type="application/x-shockwave-flash" src="blank.swf" bgcolor="#ffffff" quality="high" height="20" width="80">
<!-- available from http://community.shozam.com/forums/storage/1/1912/blank.swf -->

</body>
</html>

Sunday, December 21, 2008

Detecting Ad Block Plus by using AJAX and Flash

I tried to think of another way to detect Ad Block Plus and here is what I came up with.
Ad Block Plus makes changes to the DOM when Flash is detected so alls we have to do is look for these changes. This method does require that Javascript is enabled for the site.

Add a embed tag to your site and have it load a blank Flash file. I used:

<embed type="application/x-shockwave-flash" src="blank.swf" bgcolor="#ffffff" quality="high" height="20" width="80">


You could create your own flash file but I found a blank one here that I downloaded to my server:
http://community.shozam.com/forums/storage/1/1912/blank.swf
This code is taking advantage of mootools so you can get it from mootools.net

Next is the Javascript:

<script src="js/mt.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// every 3 seconds
var timer = 3;
var periodical;

var checkad = (function() {
var links = $$('a');

if($chk(links)) {
links.each(function(item, index){
if( item.get('title') == 'Click here to block this object with Adblock Plus' ||
item.get('title') == 'Block this object with Adblock Plus' ){

alert('Ad-Block detected');
}
$clear(periodical);
});
}
});

periodical = checkad.periodical(timer * 1000, this);
});
</script>

Note: This was tested with Ad Block Plus 1.0,
it works for en-GB and en-US

Sunday, November 23, 2008

Detect images blocked by AdBlock Plus

I needed to pass a little time so I felt like looking into how AdBlock Plus hide images. Instead of diving into the numerous files used to form that which is AdBlock Plus, I decided to take a simplistic way into the matter. I created myself a sample HTML page with an image displayed on it, then I used Ad-Block to block anything in that folder.

To block the image(s) I used something along the lines of:
http://example.com/images/ads/*
Next I used the JavaScript Shell bookmarklet from squarefree.com
I used it to look at the innerHTML of the page, the difference was that the <img> tag now had "display: none" inside of the style parameter.

Now that we know how the image(s) are hidden we can now detect when it is being done.

What we're going to use to accomplish this is:
  1. JavaScript/MooTools JavaScript framework
  2. A little bit of CSS
  3. Some <div> tags and a <noscript> tag
Download MooTools onto your server from here.
(at the time of writing this I used the current version 1.2.1)

At the top of the .js file add this line:
var mtloaded = 1;
This is just a precaution in case the JavaScript file is blocked from loading. We're going to check for this variable to ensure the file loaded.

Add MooTools to the <head> section of your HTML:
<script src="js/mt.js" type="text/javascript"></script>
Now to add the <div> tags.

The first <div> tag is going to be for the main content of the site.

Now give the <div> an id and a little bit of CSS like so:
<div id="container" style="display: none">
Now at the bottom of the HTML just before </body> add:

<noscript>
<h1>Javascript is required to view this site, enable it to continue.</h1>
</noscript>
<div id="notice" style="display: none;">
<h1>Ad-Block software detected, disable Ad blocking if you wish to view this site.</h1>
</div>

Now add an id to your image that you don't want blocked:
<img id="ad" src="http://example.com/images/ads/17adco.jpg" />

Now for the JavaScript which will be doing all the work, add this to your <head> section:

<script type="text/javascript">
window.addEvent('domready', function() {
// every 2 seconds
var timer = 2;
var periodical;
var ad = $('ad');
var content = $('container');
var notice = $('notice');

if(mtloaded == 1)
content.setStyle('display', 'inline');

var checkad = (function() {
if(ad.getStyle('display') == 'none'){
var adsrc = ad.src;
if(adsrc.contains('adblock')){
content.setStyle('display', 'none');
notice.setStyle('display', 'block');
Cookie.write('adblock', '1');
$clear(periodical);
}else{
ad.setStyle('display', 'inline');
ad.src = ad.src + '?adblock';
}
}
});

periodical = checkad.periodical(timer * 1000, this);
});
</script>
Here is what the code does:

  1. Checks for the variable in the .js file, if found the main content on the page is displayed
  2. A function is created and set to execute every 2 seconds
  3. When the function first executes, it checks if the image diplay equals none.
  4. If it does then it'll try to set it to inline, then it'll add ?adblock to the URL for the image
  5. Next time the function is executed, it'll check the display status again, if still none and it detects the adblock string in the URL it'll hide the main content of the site and display the notice that Ad-Block was detected

At this point you could always add some AJAX to post back to one of your scripts to inform the server that Ads are being blocked and you can take what ever action you see fit, logging, blocking in firewall, etc.

True a person could use another Firefox extension to alter the CSS or even the JavaScript but IMO I still think this is a pretty decent solution and it could always be improved upon.