The internet is often times a mirror. Day to day we see the structural problems we face in real life reflected in publications, tweets or even google search. What if we could change how we experience the web? Web browsers are the way we access the internet and thus, the world. A chrome extension is a way of adding functionality to the chrome browser. You can add interface elements, open and close tabs, interact with the address bar, as well as modify the contents of any page the browser is currently on. You can create the internet you want to see. In this workshop we’ll go over the basic architecture of a chrome extension and learn how to make one with HTML, CSS and JavaScript.
2. Mutating the Browser Experience
Remaking the internet through browser extensions.
3.
4. A chrome extension is a way of adding functionality to
the chrome browser. You can add interface elements,
open and close tabs, interact with the address bar, as well
as modify the contents of any page the browser is
currently on.
Hi! I’m Yeli. You can find me on the twitter as YellzHeard. I’m a designer, developer and artist.
Today we’re going to talk about making a browser extension. Our focus will be on chrome extensions since Google Chrome is the most popular browser on the web (about 45% use it)
http://www.zdnet.com/article/chrome-is-the-most-popular-web-browser-of-all/
Before I talk about the how, I thought it would be helpful to go over the what and why. So what is a chrome extension and why would you want to make one, what kinds of things could you do with one?
Chrome extensions are built with HTML, CSS, and JavaScript (the tools you would use to build a website)
This extension, BuyBlack, created by Angie Coleman, suggests black owned alternatives you can buy from when you go to a website. So for example, if you install it and go to sephora.com, you can click the icon at the top right, near the address bar and it’ll show you black owned alternatives for that store.
https://github.com/angiesaurus/buyBlack
This browser extension removes all the metrics on twitter. He also created one called Facebook Demetricator that does the same thing for facebook.
https://bengrosser.com/projects/twitter-demetricator
https://github.com/bengrosser/twitter-demetricator
This extension, Jailbreak the Patriarchy genderswaps the world for you so we can interrogate how we talk about women and men. When it's installed, everything you read in Chrome loads with pronouns and a reasonably thorough set of other gendered words swapped. For example: "he loved his mother very much" would read as "she loved her father very much."
https://github.com/DanielleSucher/Jailbreak-the-Patriarchy
I was going to read out a genderswapped excerpt of Think like a Man but I’ll save yall the agony.
Data Selfie tells you what facebook knows about you.
It collects data about what you click on (through likes and links), what you type, and what you look at, and for how long. Based on this information, the app compiles a personality profile similar to the ones created by big tech companies like Facebook, Google to sell us more ads.
https://github.com/d4t4x/data-selfie
Replaces the text ‘alt right’ with the proper term, ‘white supremacy’. It also does ‘lone wolf’ to ‘terrorist’
AdNauseam obfuscates browsing data and protecst users from tracking by advertising networks by automatically and blindly clicking on ads for you.
And most of these extensions that I mentioned are open source so you can see for yourself how they’re written and also use them to jumpstart your own applications. All the extensions I mentioned and a few others are listed in the link above.
Ok now we’re going to make our own chrome extensions! We’re going to be using something called Glitch which allows you to ‘remix’ other people’s projects. So if someone works on something, you can easily go in, change the code and make it your own with little to no setup.
We’re going to be making a text-replacing extension that replaces the word ‘females’ on twitter with ‘women’ because I don’t like the word ‘females. If you want to follow along, go to the link at the top then click the remix button.
Okay also, show of hands, if you know JavaScript, and if you know HTML?