Fathom/In-Page Pop-Up Detection: Difference between revisions

Latest revision as of 17:32, 17 April 2018

In-Page Pop-up Detection

This is an experiment to try to train an in-page pop-up detector using Fathom.

Corpus

The first step for this project is curating a dataset of these in-page pop-ups. In order to do so we're crowd-sourcing an effort through the community to collect the addresses of a large number of pages that show such pop-ups using a Google Form, a Firefox Extension and a Chrome Extension.

Extra data sources

 * http://tabcloseddidntread.com/
 * http://confirmshaming.tumblr.com/
 * https://github.com/yourduskquibbles/webannoyances

Freezing and labeling the corpus

Tips

Turn Responsive Design mode on, and set it to 1024x768.
Capture in a clean Firefox profile with no other addons. Some ad blockers will make changes to the DOM, like adding style attributes to ad iframes to hide them.

Labels

overlay: The usually-translucent thing some pages throw over their content to obscure it while the modal is active. Label the outermost component of this.
popUp: The outermost container that is part of the popup, i.e. nothing of value should be lost by deleting it. Often, the overlay and the popup are the same element, or the overlay contains the popup. If there are multiple outermost containers forming the popup, label them all.
closeButton: The element you click to dismiss the popup. If you find it hard to decide, choose the element having the event handler.

Notes for writing the features

 * https://alisdair.mcdiarmid.org/kill-sticky-headers/
 * (bookmarklet) javascript:void([].forEach.call(document.querySelectorAll('body *'),e=>/fixed|sticky/.test(getComputedStyle(e).position)&&e.parentNode.removeChild(e)))
 * (bookmarklet) javascript:(function()%7B(function () %7Bvar i%2C elements %3D document.querySelectorAll('body *')%3Bfor (i %3D 0%3B i < elements.length%3B i%2B%2B) %7Bif (getComputedStyle(elements%5Bi%5D).position %3D%3D%3D 'fixed') %7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()
 * Behind the overlay and Behind the overlay revival extensions.  The former has code for overlay removal which might be helpful for writing the initial feature rules.
 * chrome-overlay-blocker is an extension for detecting pop-up overlays automatically using CSS animations.

@@ Line 2: / Line 2: @@
 This is an experiment to try to train an in-page pop-up detector using [https://mozilla.github.io/fathom/intro.html Fathom].
-=== Dataset Curation ===
+=== Corpus ===
 The first step for this project is curating a dataset of these in-page pop-ups.  In order to do so we're crowd-sourcing an effort through the community to collect the addresses of a large number of pages that show such pop-ups using a [https://docs.google.com/forms/d/e/1FAIpQLSejaT2ia5S4akVM_Zv9OMaAE3n5-S6PmKJG7CuqfwDT5B90sw/viewform Google Form], a [https://mzl.la/2FBbGD8 Firefox Extension] and a [https://chrome.google.com/webstore/detail/in-page-pop-up-reporter/dkpphegmeomaffjanagefmejpeebfcmh Chrome Extension].
-==== Useful Notes on the dataset collection ====
+==== Extra data sources ====
-Some good potential extra data sources:
    * http://tabcloseddidntread.com/
    * http://confirmshaming.tumblr.com/
    * https://github.com/yourduskquibbles/webannoyances
-Helpful links for writing the features:
+==== Freezing and labeling the corpus ====
+===== Tips =====
+* Turn Responsive Design mode on, and set it to 1024x768.
+* Capture in a clean Firefox profile with no other addons. Some ad blockers will make changes to the DOM, like adding style attributes to ad iframes to hide them.
+===== Labels =====
+;overlay
+: The usually-translucent thing some pages throw over their content to obscure it while the modal is active. Label the outermost component of this.
+;popUp
+: The outermost container that is part of the popup, i.e. nothing of value should be lost by deleting it. Often, the overlay and the popup are the same element, or the overlay contains the popup. If there are multiple outermost containers forming the popup, label them all.
+;closeButton
+: The element you click to dismiss the popup. If you find it hard to decide, choose the element having the event handler.
+==== Notes for writing the features ====
    * https://alisdair.mcdiarmid.org/kill-sticky-headers/
    * (bookmarklet) javascript:void([].forEach.call(document.querySelectorAll('body *'),e=>/fixed|sticky/.test(getComputedStyle(e).position)&&e.parentNode.removeChild(e)))
    * (bookmarklet) javascript:(function()%7B(function () %7Bvar i%2C elements %3D document.querySelectorAll('body *')%3Bfor (i %3D 0%3B i < elements.length%3B i%2B%2B) %7Bif (getComputedStyle(elements%5Bi%5D).position %3D%3D%3D 'fixed') %7Belements%5Bi%5D.parentNode.removeChild(elements%5Bi%5D)%3B%7D%7D%7D)()%7D)()
    * [https://addons.mozilla.org/en-us/firefox/addon/behind_the_overlay/ Behind the overlay] and [https://addons.mozilla.org/en-US/firefox/addon/behind-the-overlay-revival/ Behind the overlay revival] extensions.  The former has [https://github.com/NicolaeNMV/BehindTheOverlay/blob/master/chrome/js/overlay_remover.js code] for overlay removal which might be helpful for writing the initial feature rules.
+  * [https://github.com/oslego/chrome-overlay-blocker chrome-overlay-blocker] is an extension for detecting pop-up overlays automatically using CSS animations.