Building my first Chrome extension
I built my first Chrome extension! It replaces the text ‘you guys’ with ‘you babies’ (you can install it from the Chrome Web Store and find the code on GitHub).
I was inspired by this tweet from Ryan Gantz:
chrome/brain plugin that replaces "you guys" with "you babies"
thanks, you babies
you babies killed it today
what are you babies up to?
— Ryan D Gantz, ART (@sixfoot6) August 10, 2015
I’ve been meaning to make a silly find-and-replace words Chrome extensionfor awhile now, but I just haven’t been able to think of a good word or phrase. My personal favorites include Millennials to Snake People and Cloud to Butt. I’ve also seen some find-and-replace Chrome extensions that have an impact (though everyone needs a good chuckle every now and then), like this Chrome extension from Gregor Aisch that highlights anonymous sources in news articles. Ryan’s tweet about changing ‘you guys’ to ‘you babies’ was the perfect opportunity for me to learn how to make a Chrome extension while also highlighting the “creeping sexism” in our language.
A Chrome extension relies mostly on JavaScript, HTML, and CSS (and requires some other packaging and uploading that is outlined pretty clearly in Google Chrome’s tutorials). Since the I worked off a fork of the Cloud to Butt extension, I was able to build ‘You Guys to You Babies’ and get it into the Chrome Web Store in ~1.5-2 hours.
What’s in v1:
- A manifest file that includes the metadata for the extension, like the name, version number, icons, content scripts, etc.
- A content script file that includes a JavaScript function that just traverses the document body for text nodes and replaces a given string with another string
- An icon for the extension (I decided to use the ironic “guise srsly” pug)
Next steps:
- Since the content script file only traverses the document body for text nodes, any occurrences of ‘you guys’ that isn’t in a text node will not be replaced. A future version will try to target all occurrences on a webpage (without accidentally changing outgoing links).
- More testing on different webpages
- Watch for/handle post-load DOM changes so that dynamic additions of ‘you guys’ will be replaced with ‘you babies.’