Scraper Helper

scrape.js

(function($){
  if (typeof $ === 'undefined') {
    alert('jQuery is required');
    return;
  }

  var highlightClass = 'scraper-helper-highlight';
  $('#scraper-helper-rule').remove();
  var style = '<style id="scraper-helper-rule">.' + highlightClass + ' { background-color: #fcc; }</script>';
  $(style).appendTo('head');

  $('#scraper-helper').remove();
  var html = '<input id="scraper-helper" style="position: fixed; top: 5px; right: 5px; width: 300px; height: 20px; font-size: 12px; font-family: monospace; z-index: 9999">';
  $(html).keyup(function(){
    $('.' + highlightClass).removeClass(highlightClass);
    var selector = $(this).val();
    $(selector).addClass(highlightClass);
  }).prependTo('body');
}(jQuery))

scrape_bookmarklet.js

javascript:%20(function($){if(typeof%20$==='undefined'){alert('jQuery%20is%20required');return;}%20var%20highlightClass='scraper-helper-highlight';$('#scraper-helper-rule').remove();var%20style='<style%20id="scraper-helper-rule">.'+highlightClass+'%20{%20background-color:%20#fcc;%20}</script>';$(style).appendTo('head');$('#scraper-helper').remove();var%20html='<input%20id="scraper-helper"%20style="position:%20fixed;%20top:%205px;%20right:%205px;%20width:%20300px;%20height:%2020px;%20font-size:%2012px;%20font-family:%20monospace;%20z-index:%209999">';$(html).keyup(function(){$('.'+highlightClass).removeClass(highlightClass);var%20selector=$(this).val();$(selector).addClass(highlightClass);}).prependTo('body');}(jQuery))

When you're writing an HTML scraper, it's helpful to see what selectors match which nodes in an interactive way. Use this bookmarklet with any page that has jQuery and you can type CSS expressions and see what elements they match.