Sick of finding out the F1 result before you've had a chance to watch it? This script finds any stories and links mentioning F1-related terms on various news and sports websites and blurs them out, allowing you to browse the rest of the news or sport without finding out who won the race or qualified on pole.
If you want to see a piece of blurred content then you can click on it to remove the blur.
Easily adaptable to other contexts, just replace the list of keywords with those that may occur in news articles you want to blur out.
Compatible with (at least) recent versions of Mozilla Firefox and Google Chrome.
Supported websites: BBC News, BBC Sport, The Guardian, Sky News, Sky Sports, ITV News
Simply add a new bookmark and set its URL to the following:
javascript:(function(){function removeBlur(a){a.preventDefault(),this.className=this.className.replace(blurClassName,""),this.removeEventListener("click",removeBlur)}var keywords=["formula 1","F1","grand prix","qualifying","Mercedes","Hamilton","Rosberg","Red Bull","Vettel","Ricciardo","McLaren","Button","Magnussen","Ferarri","Alonso","Raikkonen","Williams","Massa","Bottas","Lotus","Grosjean","Maldonado","Force India","Perez","Hulkenberg","Toro Rosso","Vergne","Kvyat","Sauber","Gutierrez","Sutil","Marussia","Chilton","Bianchi","Caterham","Ericsson","Kobayashi"],body=document.getElementsByTagName("body")[0],ns="http://www.w3.org/2000/svg",svg=document.createElementNS(ns,"svg");svg.setAttribute("height",0),svg.setAttribute("width",0);var filter=document.createElementNS(ns,"filter");filter.setAttribute("id","blur");var feGaussianBlur=document.createElementNS(ns,"feGaussianBlur");feGaussianBlur.setAttribute("stdDeviation",5),filter.appendChild(feGaussianBlur),svg.appendChild(filter),body.appendChild(svg);var blurClassName="custom-blur",style=document.createElement("style");style.appendChild(document.createTextNode("."+blurClassName+"{filter:url(#blur);filter:blur(5px);-webkit-filter:blur(5px)}")),body.appendChild(style);var url=window.location.href,selectors=[];/bbc\.co\.uk\/(news|sport)/.test(url)?selectors=[".gs-c-promo.nw-c-promo.gs-o-faux-block-link.gs-u-pb",".faux-block-link",".most-popular-list-item",".multi-thumb-promo__link",".fixture__block-link"]:/theguardian\.com/.test(url)?selectors=[".fc-item",".headline-list__item",".right-most-popular-item"]:/news\.sky\.com/.test(url)?selectors=[".sky-component-story-grid__card",".sky-component-trending__item"]:/skysports\.com/.test(url)?selectors=[".blackjack-sdc-site-tile",".news-top-story",".news-list-featured__item",".news-list__item",".news-list-secondary__item",".features-block__item",".pundits-block__item",".matches__list-item",".most-popular__item"]:/itv\.com\/news/.test(url)&&(selectors=[".top-articles__item",".article-update",".small-author-profiles__item",".small-content-listing__item"]),selectors.forEach(function(a){document.querySelectorAll(a).forEach(function(a){keywords.some(function(b){return a.textContent.toLowerCase().indexOf(b.toLowerCase())!=-1})&&(a.className+=" "+blurClassName,a.addEventListener("click",removeBlur))})});})()
Then browse to one of the supported sites and click the new bookmark to blur out stories.
Unfortunately GitHub does not allow JavaScript in links here, so you have to manually create the bookmark rather than just dragging a bookmarklet to your bookmarks toolbar.
- Require a minimum match of two keywords to better validate if an item is relevant before blurring
- Create a user script (for Greasemonkey, Tampermonkey et al) that automatically applies this when on a supported website
This tool is not associated with the BBC, the Guardian, Sky, ITV, Formula One Group or any affiliated companies or teams.