[ Links open in: same window | new window ]
Radical Software
LCST 2234, Fall 2024 (CRN 9430)
Rory Solomon
Project 1, Introduction: Browser extensions and HTTP
For this project, you are going to build a browser extension. Browser extensions are bits of code that you can install within a web browser that modify the functionality of the browser in some way.
For some reason, browser extensions are often depicted as puzzle pieces. I'm not sure I'd agree that this is necessarily the most apt iconography, but I suppose the symbol is meant to signify some kind of add-in object that plugs in to a larger whole.
Browser extention iconography.
In demonstrating how to get started building your own browser extension, I'll have to take a step back at a few points today to explain some of the background concepts involved in this work, including the communication protocol of the web, web browsers, and HTML. I've created a table of contents to help you navigate this tutorial. (Click on any link to jump down to that topic.)
Table of contents
01. Browser extensions overview
Browser extensions can be developed for all major web browsers today: Chrome, Firefox, Safari, Opera, Microsoft Edge, and others. Each browser has it's own rules and format for how to develop & distribute extensions for it. For this project, we'll be making browser extensions for the Chrome browser. Fortunately, Chrome and Firefox mostly comply to the same rules about how their extensions are structured, so if you learn how to develop extensions for Chrome, you should later be able to fairly easily adapt them to Firefox.
Also, as we discussed in class during our conversation on open source software (Thanks, Leland!) the Chrome browser is based on a thing called Chromium, which is also used by Opera and Microsoft Edge, so I believe that Chrome extensions should be easy to adapt to those browsers as well — although I haven't tried.
Safari is a bit of an outlier here, and I believe that developing extensions for that browser platform would be a bit of a different process than what we'll be learning with this project.
02. Browser extension functionality
Browser extensions can interact with web pages that the user of the browser is navigating. They can also do other things like view or manipulate the user's bookmarks, their downloads directory, their browsing history, or their cookies. A cookie is a term for small bits of data that websites save locally within your browser, so that they can remember you when you return to the website later. As you problably know these are often used for tracking in ways that many people now see as invasive data surveillance, used for supporting ad recommendations and other things. Browser extensions can also interact with browser request and responses, which I'll explain below.
03. Hypertext Transfer Protcol (HTTP)
To better understand what browser extensions do, let's take a step back and think about hypertext transfer protcol (or, HTTP) the protocol that dictates how all data on the worldwide web flows.
Let's say you have a web browser open on your computer and you want to visit a website, let's say nytimes.com. You would type the URL (or web address) for that site into your browser's address bar. That will cause your browser to look up the domain name (the human-readable website name) to determine the IP address for the server hosting this website, its identifier on the internet.
A server is just like your computer, except that it most likely sits in a data center somewhere, is always on, always connected to the internet, and does not have a monitor or screen but instead sends information over networks.
Your browser would then make a request, asking that server for the specific web page indicated by the URL. That request would be routed through the internet to the web server, which would then process your generate the desired web page (perhaps by running some code, like Python or another programming language) and returning a web page in the form of HTML text. This is called the response.
Your browser would then receive the response, parse the HTML, and display the web page for you.
This entire process, comprising all the blue elements above, is what is specified by HTTP.
I lay out this process so that we can have some precise vocabulary to talk about what browser extensions can do. A browser extension is like the red component below. It is code that is run by your web browser, and that can intervene in any part of this process of URL specification, request, response, or the parsing or display of HTML.
