Make websites look and do what you want!
Overview
“Browsers” today refer to internet browsers:
- Google Chrome = https://developer.chrome.com/extensions/overview
- Edge (from Microsoft) accepts extensions from other browsers
- Firefox from Mozilla
- Safari from Apple
- Brave (into crypto currencies)
- Tor (The Onion Browser) to “Protect yourself against tracking, surveillance, and censorship.”
NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.
The browsers themselves are installed by mac-setup.zsh script.
To enable invocation of the browser GUI from the CLI (command line Terminal), they are defined in aliases.zsh.
Browser extensions inject JavaScript code within internet browsers to modify web content users see and interact with, changing and extending the behavior of the browser itself.
The value of this tutorial is the painstaking arrangement of a learning sequence that is both thorough yet logical.
Show me some Chrome extensions
-
In Chrome, click the three vertical dots at the upper-right corner, select “More Tools”, then “Extensions”.
Alternately, type in or click:
In Firefox, click the “sandwich” icon at the upper-right corner and
select “Add-ons”.PROTIP: Security-conscious companies manage browsers of their people to add extension such as “DigiCert Authentication Client Extension”.
-
In another Chrome tab, search for Chrome Extensions at:
https://chrome.google.com/webstore/category/extensions?hl=en
On that website, click “Install” for one you like.
Here are the most useful and highly-rated by a large number of people:
- “The Great Suspender” saves memory and bandwidth by suspending tabs sleeping, because Google Chrome is a memory hog.
- “Noscript” blocks images, javascript, fonts from loading and allow only sites you specify you trust
- Tab Resize splits a large screens into several panes of tabs on the same page (like TMUX)
-
“Silent site sound blocker” mutes sites such as CNet which blasts sound on entry
- “Chrome Connectivity Diagnostics” (app from Google) tests connection speeds
- “Free Download Manager” to resume downloads that otherwise time out
- TrafficLight (from Bitdefender) blocks malicious websites and highlights tracking cookies
-
HTTPS Everywhere (from EFF.org) ensures that you’re using HTTPS rather than HTTP protocol, to avoid man-in-the-middle attacks.
- Picture-in-Picture Extension (by Google)
- “Dark Reader” or “Dark Night Mode” presents any web page with a dark theme
- Wikiwand puts a modern UI to Wikipedia pages
- “Turn off the Lights” darkens and blurs other sections of the screen when watching a video
-
Behind the overlay enables you to view text behind pop-ups
- 1Password, LastPass, or NordPass password manager
- “I don’t care about cookies” removes cookie warnings
- Google Keep to keep notes
- Evernote web clipper
- Asana for coordination of team tasks
-
Cisco WebEx Extension (for companies that haven’t already switched to Zoom)
- “Noisli” plays soothing background sounds to help you focus
-
Dayboard to block websites you don’t have the discipline to avoid. It also displays your top tasks whenever you open a browser tab. So it’s better than “Citrus”.
-
Selenium IDE for automating human actions
- Honey to find and apply discount codes for shopping
- “The Camelizer” shows price history on Amazon, BestBuy
-
“Hunter” hunts for emails to company name you type in (registration required)
- Grammerly spell checker (it won’t autocorrect, though)
- “Typio Form Recovery” auto-saves form entries (may cause data leak)
- “Print Friendly” removes text and images before printing
-
“Fireshot” captures entire page (not just what appears on your monitor)
- NewsGuard rates websites
- “TinEye” reverse image search to find original author
- “AgoraPulse” (from RazorSocial) to easily share content in social media
- “Pullbullet” transfers images & web urls among devices
- “Chrome User Agent Switcher” to post on Instagram from a laptop rather than mobile phone
- GoogleGIFs
-
Imagus
- Bit.ly to shorten URLs for social sharing
- Unshorten.Link shows where shortened links will send you
YouTube videos about extensions:
- 10 Awesome Chrome Extensions You Need to Know About! Oct 23, 2019 by ThioJoe
- 13 Cool Chrome Extensions You’ve Never Heard Of! by ThioJoe
- 10 Chrome Extensions That Are Amazingly Useful! Jun 14, 2019 by TechGumbo
- Building Your First Chrome Extension
- 9 Browser Extensions that May Change your Life Jun 13, 2018 by Steve Dotto (dottotech)
TODO: For other browsers
Install Chrome Extension locally
-
The sample code associated with Google’s tutorial at
https://developer.chrome.com/extensions/getstarted is at
https://developer.chrome.com/extensions/examples/tutorials/get_started_complete.zip.PROTIP: Google loads extensions from its website by loading zip files.
“Browser actions” icons to the right of the star icon add functionality on most/all websites.
Files from Google contain “Copyright 2018 The Chromium Authors” and “Use of this source code is governed by a BSD-style license” which is one of the oldest and broadly used license family in the FOSS ecosystem”.
So those who change it code can use the “3-clause BSD License 2.0”, which Wikipedia says is compatible with almost all FOSS licenses (and as well proprietary licenses).
-
Unzip get_started_complete.zip into folder get_started_complete.
-
I renamed the folder and moved its files to a Git-enabled folder so I can version control changes and load it up to GitHub.com for archival and sharing.
Remove Extension
-
In the Extensions page, click the “Remove” associated with the extension to remove it (and reclaim disk space).
Install extension locally
Code to other examples include:
-
https://github.com/PalashTanejaPro/BlindHelper explained at “Talk to Me” at Freecodecamp.org.
-
How to Make Chrome Extensions by Kyle Robinson Young shows how to create an extension from scratch
-
View Harley Brody’s blog “So You Want to Build a Chrome Extension?” from June 5, 2013, but still relevant today.
He wrote the “BuzzKill” Chrome Extension that automatically removes all Buzz Feed content from the browsing experience on Facebook.com.
-
Navigate to facebook.com and login.
- On a new Chrome tab, On https://github.com/hartleybrody/buzzkill, click Fork to your own account, click the green “Code” and Download or clone.
-
cd buzzkill
-
In Chrome URL chrome://extensions/
-
Click the slider to turn on Developer Mode at the top right to expose a menu:
Load unpacked | Pack extension | Update
-
Click “Load unpacked”, then select your extension’s folder.
If you selected Google’s example, you should now see:
PROTIP: Stay on this page. When code is changed, Chrome knows to reload your extension. You won’t need to press command+R.
Notice “Inspect views background” in some of the extensions. See below.
-
Click Load unpacked and navigate to buzzkill. “Make Facebook Great Again” should appear.
NOTE: Extensions are automatically turned On upon load.
-
Switch to Facebook tab.
NOTE: “Page actions” icons to the left of the star icon in the address bar are for specific pages (URLs).
Examine code for sample extension
-
Click the url below to download file get_started_complete.zip:
PROTIP: Google obtains extensions by loading zip files.
Load your own extension
-
To activate the add-on, click the extension icon at the upper-right
-
Click “Details” for its “Manage Extensions” page.
-
In the add-on menu, click the three-dot icon to the right of your extension to select Pin so its icon appears on all Chrome tabs.
-
Click on the new icon to see its menu. The default code just shows a color.
-
Right-click on your add-on to select Options.
The look and feel of the option UI is defined in the add-in’s options.html file invoked by the options.js file.
-
Click on a different color.
-
Click on the tab to a page displaying its content.
As with other extensions, the extension applies to whatever web page your are on.
The “Getting Started Example” default paints the background green.
-
Click on the add-on’s icon for the add-in’s popup page_action.
-
In the option pop-up, select the color to change the background of the current page.
We’ll next talk about fixing the code producing this awful UI.
Files
Extensions are zipped bundles of HTML, CSS, JavaScript, images, and other files used in the web platform. Google’s “Getting Started Example” contains these default files:
In Google’s folder:
. ├── LICENSE ├── README.md ├── background.js ├── images │ ├── get_started128.png │ ├── get_started16.png │ ├── get_started32.png │ └── get_started48.png ├── manifest.json ├── options.html ├── options.js ├── popup.html └── popup.js
In the BuzzKill folder:
├── README.md ├── bootstrap.js ├── clean.js ├── images │ └── icon.png ├── libs │ └── underscore.min.js ├── manifest.json ├── popup.html └── settings.js
The manifest.json file Google reads as the “entry point”.
The BuzzKill extension, because it has permissions to work only on Facebook, is a page_action
In the manifest.json file, specify the URL Google should check every few hours to see if there is an update:
"update_url": "https://mysite.com/myextension.xml"
JavaScript (.js) files Google calls “content scripts”.
Icons
The “icon.png” should be like the “get_started” image files – the same image in 4 different sizes 16, 32, 48, 128 pixels square. Note that the icon files are specified twice:
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"page_action": {
"default_title": "Getting Started Example",
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
Menu change
1. Load your extension into Chrome
Chrome injects content scripts after the DOM is complete.
Pop-up menu
Background
Code to the background listener in “Getting Started Example”
chrome.runtime.onInstalled.addListener(function() {
chrome.storage.sync.set({color: '#3aa757'}, function() {
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: 'developer.chrome.com'},
})],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
Change URL
- https://thoughtbot.com/blog/how-to-make-a-chrome-extension
To listen for clicks on the browser action, pass a message (URL) to a background script.
"background": {
"scripts": ["background.js"]
}
background.js has access to every Chrome API but cannot access the current page. As Google puts it:
// background.js
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
// Send a message to the active tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "clicked_browser_action"});
});
});
References
Tutorials referenced include:
-
https://thoughtbot.com/blog/how-to-make-a-chrome-extension
-
https://www.youtube.com/watch?v=9Tl3OmwrSaM video
-
https://www.youtube.com/watch?v=8q1_NkDbfzE&list=PLC3y8-rFHvwg2-q6Kvw3Tl_4xhxtIaNlY from codevolution
-
https://www.youtube.com/watch?v=bmxr75CV36A Google Chrome Extensions: Extension API Design Dec 7, 2009 by Google Developer Rafael Weinstein
The playlist of Google videos about Extensions from 2009
https://www.youtube.com/watch?v=e3McMaHvlBY
https://youtu.be/uh84Asy2W4s Fullstack Academy