How to Make a Chrome Extension to Fix Something Sucky on the Internet

May 16, 2014

I read my horoscope on AstrologyZone  every month because I enjoy  vague, poorly-constructed palliative prose.  It’s pretty embarrassing to read your horoscope, but it’s even more embarrassing to do it on a website that looks like this:

Screen Shot 2014-05-16 at 6.27.34 PM

Yes, that’s a flickering candle.

I know that the majority of the shame I feel comes from caring about how a planet representing a Roman god is affecting my love life/finances/relationship with my cat, but whatever, I wanted to make it less of a GeoCities experience. And maybe a little bit legible on my phone. (I then found out that there is no Chrome Web Store on Android, sooooo… I made it for when I get a tablet and need to read in public.)

Anyway, I digress.

First, you’ll need a manifest.json file. Don’t know what that is? No big. Three days ago, I didn’t either. It’s basically just a bunch of arrays and key-value pairs. Chrome’s developer tools explain pretty well what each key means. Don’t get freaked out by how many there are! They’re just options! You can make an extension with almost nothing.

You start with the basics: what is it, what does it do, and who the hell do you think you are?

Screen Shot 2014-05-16 at 6.10.44 PM

Next up, is your extension going to be a browser action like always changing Ann Coulter’s name to That Bitch Ann Coulter like Chrome is your Aunt Lucy?  Or a page action like making all the images on nytimes.com display as Vanilla Ice? Decisions, man. If you’re just changing the CSS of a single atrociously made website, page action it is. For an action, you need content_scripts (i.e. what r u doin?).

Screen Shot 2014-05-16 at 6.36.22 PM

“matches” are where your scripts apply. For me, it’s every full horoscope on this woman’s site.

A manifest, actually, is all you need to make a Chrome extension, but if you want the CSS or JS to change (or html? – I’m not clear on this at present; I know you can manipulate the DOM but had trouble doing it. Partially because this whole website is a giant table filled with tables covered in a buffet of PHP. But I imagine it works.), you’re gonna want to link up file.

Guess what, linking CSS is super easy.

Image

Like SUUUPER easy. (I’m not running the JS because I figured out how to do what I wanted with CSS and also the whole table problem.) It’s just a normal CSS file.

Just to be clear, content_scripts{“matches” = ["websites"],”css”:["newstyle.css"] }. This is all in content_scripts, because that’s where you’re telling your extension to do something.

Now, go to chrome://extensions/ and hit “Load unpacked extensions.”  This’ll enact your extension on your version of Chrome. If it doesn’t work, keep fiddling with it. If it works, great! Pack the extension using the button on the same page and then publish it if you want to. Or, just send the packed extension to the pals you want to use it. Bonus points if you send it to That Bitch Ann Coulter.

Tell me what you think!

Tags: ,

Categorised in: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>