scripting_fall2020

week 5

Bookmarklets and Extensions

Today’s Overview

Review website projects

Dark Patterns

How Dark Patterns Trick You Online - video

Bookmarklets

What is a bookmarklet?

It’s a basic tool that with a single click alters the functionality of your viewed web-page, such as changing text, colors, searching a highlighted word online, or translating a page. It is designed to customize and alter the current experience.

They are essentially small lines of Javascript (or jQuery) that alter a page’s HTML or CSS.

how to use it?

bookmarklet resources

Web Extensions

correction in New York Times

In 2018 the New York Times featured the article The Simple, Serendipitous Joy of Browser Extensions. Days earlier the Times had printed an article that referenced the Time of Shedding and Cold Rocks.

As the name implies, a browser extension is a plug-in that you add to a web browser to extend its functionality. In my browser I currently have ad-block extensions, a color picker, and an extension to make it easier to navigate via keyboard instead of the mouse. They are created with standard website creation tools HTML, CSS and Javascript. Browser extensions can make certain tasks simpler, like the ability to easily tweet a link to the current page you’re browsing, but they can also be a source of malware or spying.

Examples

Millenials to Snake People

Airhorn by Todd Anderson

Hitchhiker by Todd Anderson

Interactive Music videos as browser extensions

Yung Jake - Embedded

Discernment Music Video - extension by Dina Kelberman

Homework

Watch Lee’s Intro to bookmarklets

For additional info, watch The Coding Train:

  1. Intro to Chrome Extensions
  2. Bookmarklets

Do - Make a Bookmarklet

Use Chrome! Each browser works differently, but it will be easier for us if we use the same browser. Once you get it to work, feel free to try another browser.

Make a simple bookmarklet to funkify the web. Your bookmarklet, when you click on it, should add CSS, change placement of things, alter words or otherwise affect the page a viewer is looking at.

For inspiration, check out my class site for heavy CSS hacking, or make your own easy-to-read-hack, or alternative-dark-mode or remove-adds on a website you frequent.

Resources

Bookmarklets Maker - click to turn on jQuery mode!

10 year old article about Making your own Bookmarklets with jQuery - still has some good ideas in it

Bookmarklet examples

Add a unicorn to Any page bookmarklet

Change the font to Papyrus on any page