Pesticide CSS bookmarklet

pesticide-css-bookmarklet.js

var link,
  id = 'Pesticide';
  pesticide = document.getElementById(id);

if (pesticide === null) {
  console.log(id + ' added');
  link = document.createElement('link');
  link.id = id;
  link.rel = 'stylesheet';

  // Using jsdelivr link since raw CSS from GitHub doesn't seem to work
  // (https://raw.githubusercontent.com/mrmrs/pesticide/master/css/pesticide.min.css)
  link.href = 'https://cdn.jsdelivr.net/npm/pesticide@1.3.1/css/pesticide.min.css';

  document.body.appendChild(link);
} else {
  console.log(id + ' removed');
  document.body.removeChild(pesticide);
}

A bookmarklet to add the debugging styles from Pesticide.io. Linking bookmarklets intentionally doesn't work on GitHub, so here are some quick instructions:

1. Copy the code below:

javascript:(function(){var%20link,id='Pesticide';pesticide=document.getElementById(id);if(pesticide===null){console.log(id+'%20added');link=document.createElement('link');link.id=id;link.rel='stylesheet';link.href='http://pesticide.io/css/layout_debug.min.css';document.body.appendChild(link);}else{console.log(id+'%20removed');document.body.removeChild(pesticide);}})();

2. Create a new bookmark.
3. Set the bookmarklet name and paste the above as the URL.

The JS this includes has been removed. Maybe you could pull from a raw github file instead.

Oh yeah. It looks like that pesticide.io domain is not a thing anymore. I've updated the gist.

This is the updated bookmarklet:

javascript:(function(){var link,id='Pesticide';pesticide=document.getElementById(id);if(pesticide===null){console.log(id+' added');link=document.createElement('link');link.id=id;link.rel='stylesheet';link.href='https://cdn.jsdelivr.net/npm/pesticide@1.3.1/css/pesticide.min.css';document.body.appendChild(link);}else{console.log(id+' removed');document.body.removeChild(pesticide);}})();

Amazing. I didn't think to look on a CDN.

Any idea how to get this to work with safari? It's working great in Brave but I already have a chrome extension for that.

@philsmithies In theory it’s as easy as making any bookmarklet:

1. make a new bookmark.
2. edit the url of that bookmark to be the whole javascript snippet above

But these days with any bookmarketl (in Safari or otherwise) you're likely to hit one of these:

Refused to load https://cdn.jsdelivr.net/npm/pesticide@1.3.1/css/pesticide.min.css because it does not appear in the style-src directive of the Content Security Policy.

I found turning on JavaScript in search fields gets it to work but it warned me that this is unsafe and can lead to passwords being stolen so unsure how wise it is. Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: Max Fenton ***@***.***> Sent: Monday, March 14, 2022 9:27:58 PM To: curtisj44 ***@***.***> Cc: Phil Smithies ***@***.***>; Mention ***@***.***> Subject: Re: curtisj44/pesticide-css-bookmarklet.js @maxfenton commented on this gist.

________________________________ @philsmithies<https://github.com/philsmithies> Probably not. In theory it’s as easy as making any bookmarklet (1. make a new bookmark. 2. edit the url to that javascript snippet) but now in Safari you're likely to hit one of these: Refused to load ***@***.***/css/pesticide.min.css because it does not appear in the style-src directive of the Content Security Policy. — Reply to this email directly, view it on GitHub<https://gist.github.com/10052727#gistcomment-4097619>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AOQRJFYWXCVXOL7IE6W7XILU76OM5ANCNFSM4VTGCWBA>. You are receiving this because you were mentioned.Message ID: ***@***.***>