Transcript: If You Only Make Chrome Extensions, You’re Killing the Open Web

A (very rough) transcript of my WaffleJS talk at https://slides.com/folz/webextensions/

hello everyone! my name’s Rodney. just to introduce myself, I am a PM this summer at yelp, I live in berkeley, i actually i was until very recently a student at cal, just across the bay, but I am no longer a student! I grew up, and so I decided I had to put away childish things like giving talks at meetups for student nerds, and instead I decided to turn to serious adult pasttimes like giving talks at meetups for grownup nerds. needless to say, I am so excited to be here at the june edition of waffle jay ess! thank you very much to the organizers of waffle js for putting this on and letting me give this talk. seriously, give it up for ‘em.

the title of my talk today is “if you only make chrome extensions, you are killing the open web.” and while this is probably true, i’m not actually going to talk about chrome very much tonight.

instead, let’s talk about browser extensions. How many of you — and this part is interactive, by the way, raise your hands — how many people here use browser extensions? like adblock, or ublock origin, or ghostery, and so on.

hands up, hands up. don’t be shy.

now, of those of you with your hands up, how many of you use browser extensions that are not an adblocker of some kind? so if you use browser extensions that are not adblockers, keep your hands up, otherwise put your hands down. and look around the room, get a feel for how many of you there are.

ok now — of those of you with your hands up: how many of you have written a browser extension of your very own, have written a browser extension yourself. keep your hands up if you have, otherwise put your hands down. now look around the room to see who has their hands up still.

and then last question: for those of you with your hands still up, used a browser extension, more than an adblocker, have written your own — how many of you have written a browser extension for a browser other than chrome? (or chromium)

i thought so

so, the reason i’ve gathered you all here today is to talk about something that makes me very sad. which is when people — smart people — people with interesting ideas and problems to solve, write browser extensions to solve them, and then only write them for chrome. this reminds me of the good old days of yore when webmasters held very strong opinions on which browsers were the proper one to use or not use when visiting their site.

but i’m glad that’s in the past. we’ve come very far from those dark days, haven’t we.

so when people make browser extensions that are just for google chrome, i am sad, because i cannot use them. I want more people to make extensions for all browsers. I want people to realize just how easy it can be to make extensions for firefox, and for chrome and firefox at the same time.

so originally this talk was going to be based off my experience writing browser extensions for reaction packs, which depending on how much you like facebook, you may or may not have heard of. but basically they were a browser extension that replaced the reaction images that facebook released a few months ago, with images of your own choosing. probably ten times as many people used the chrome extension as the firefox one, but supporting firefox was important to me, so i wanted to find a way to build extensions for both browsers.

no matter which browser you use, the logic for reaction packs is not very different. you basically want to inject a dynamically generated stylesheet into every facebook page and the logic for that is the same: is this page facebook? yes. ok, generate the stylesheet and inject it into a style tag right after the page loads so it is the last style loaded.

so what this talk was going to be about was the system that I came up with, which was using webpack to basically combine the business logic of this extension with user interfaces for both firefox and chrome. and it built extensions for both of these browsers off of the same codebase and using the same test suite for business logic in both browsers.

but the thing about webpack is, it is a lot to ask casual developers to learn. especially if you’re new to writing browser extensions at all. that config took me about three hours to write. six minutes per line.

and the chrome team, they put a lot of thought into writing browser extensions, and to be quite frank, chrome has been in my opinion much nicer to people who are just getting started writing browser extensions.

and they have a very large userbase, a ton of people now use chrome, and a thriving developer ecosystem, so it’s not entirely surprising that developers would pick the easier option to make extensions with, especially given that you reach more people that way.

but mozilla is smart and they noticed this, and they sat and they thought about this problem for a while, and about a month ago, announced a pretty stunning response: web extensions no space.

web extensions are a set of APIs that look astonishingly similar to chrome extensions. and web extensions are very interesting, because they are basically mozilla’s admission that chrome got a lot right about making browser extensions. and so instead of requiring developers to learn Firefox’s model for extension development, mozilla decided to try to bring all of chrome’s extensions into firefox.

anyway when mozilla announced that they were releasing webextensions, I realized the webpack talk I was writing for wafflejs tonight was completely out of date and so I threw it out and wrote you a brand new one, this time about webextensions.th that context we will now walk through building an extension for firefox and immediately turning around and running it in chrome. how neat is that?

=== manifest.json
{
“manifest_version”: 2,
“name”: “WaffleJS”,
“version”: “1.0”,
“applications”: {
“gecko”: {
“id”: “extension@wafflejs.com”
}
},

“browser_action”: {
“default_title”: “WaffleJS!”
}
}
=== `bash`
zip wafflejs.xpi manifest.json
=== manifest.json
// above browser_action

“background”: {
“scripts”: [“background.js”],
“persistent”: false
},
=== background.js
‘use strict’;

/*global chrome:false */

chrome.browserAction.setBadgeText({text: ‘❤’});
chrome.browserAction.setBadgeBackgroundColor({color: ‘#eae’});

chrome.browserAction.onClicked.addListener(function(aTab) {
chrome.tabs.create({‘url’: ‘https://wafflejs.com/', ‘active’: true});
});
=== `bash`
zip wafflejs.xpi manifest.json background.js
=== manifest.json
// underneath manifest_version
“icons”: {
“48”: “icon.png”,
“128”: “icon128.png”
},

“default_icon”: {
“19”: “button.png”,
“38”: “button38.png”
},
=== `bash`
zip wafflejs.xpi manifest.json background.js *.png
===

we can also take some chrome extensions and throw them directly into firefox. to demonstrate this, we will start with this very popular chrome extension from the last week tonight show, called drumpfinator. and this, if you are unaware, the drumpfinator is an extension for chrome that was released by last week tonight, and it, every time it sees the word Trump it replaces it with Drumpf, which apparently is our next president’s birth name.

when it was released, we’ll notice that drumpfinator was released for chrome only, and this made me very sad, again as a firefox user, that I could not run it.

so I took the liberty of downloading it and we will download and install it for firefox, and see what happens.

(sadly I’m using a borrowed computer for this talk since mine isn’t a mac. but I took a screenshot of what happened after I ran that command)

and oh my goodness

firefox is drumpf again

thank you very much