Jaron Wanderley jaronwanderley

This is one chapter of my "Chrome Extension Workshops" tutorial, see the rest here: https://gist.github.com/caseywatts/8eec8ff974dee9f3b247

Unrelated update: my book is out! Debugging Your Brain is an applied psychology / self-help book

Making Bookmarklets

I'm feeling very clever. I've got this sweet line of javascript that replaces "cloud" with "butt". My mom would LOVE this, but she doesn't computer very well. I'm afraid to show her the Developer Console and have her type/paste this in. But she IS pretty good at bookmarks, she knows just how to click those!

A bookmark normally takes you to a new web page. A bookmarklet is a bookmark that runs javascript on the current page instead of taking you to a new page. To declare that it is a bookmarklet, the "location" it points to starts with javascript:.

	var deepObjMap = function(f, obj) {
	return Object.keys(obj).reduce(function(acc, k) {
	if ({}.toString.call(obj[k]) == '[object Object]') {
	acc[k] = deepMap(f, obj[k])
	} else {
	acc[k] = f(obj[k], k)
	}
	return acc
	},{})
	}

	'use strict';

	var Octokat = require('octokat');
	var extend = require('lodash/object/assign');

	var defaults = {
	branchName: 'master',
	token: '',
	username: '',
	reponame: ''

	<!DOCTYPE html>
	<html manifest=sketch.manifest>
	<head>
	<meta charset=utf-8>
	<title>Sketch</title>
	<meta name=apple-mobile-web-app-capable content=yes>
	<meta name=apple-mobile-web-app-status-bar-style content=black>
	<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui">
	<link href="http://staticresource.com/formal.css" rel=stylesheet type=text/css>
	<script>eval(unescape(escape('♶♡♲☠♩☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♣♡♮♶♡♳☧☩☬♣☽♩☮♧♥♴♃♯♮♴♥♸♴☨☧☲♤☧☩☬♦☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☬♭☽♤♯♣♵♭♥♮♴☮♣♲♥♡♴♥♅♬♥♭♥♮♴☨☧♬♩♮♫☧☩☻♩☮♷♩♤♴♨☽☲☰☰☻♩☮♨♥♩♧♨♴☽☲☰☰☻♣☮♦♩♬♬♓♴♹♬♥☽☧♬♩♧♨♴♧♯♬♤♥♮♲♯♤♹♥♬♬♯♷☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☱☰☬☰☩☻♣☮♬♩♮♥♔♯☨☱☹☰☬☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☰☬☲☰☰☬☱☰☩☻♣☮♬♩♮♥♔♯☨☲☰☰☬☱☹☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☲☰☰☬☲☰☰☬☱☹☰☬☲☰☰☩☻♣☮♬♩♮♥♔♯☨☱☰☬☲☰☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☲☰☰☬☰☬☱☹☰☩☻♣☮♬♩♮♥♔♯☨☰☬☱☰☩☻♣☮♱♵♡♤♲♡♴♩♣♃♵♲♶♥♔♯☨☰☬☰☬☱☰☬☰☩☻♣☮♣♬♯♳♥♐♡♴♨☨☩☻♣☮♦♩♬♬☨☩☻♣☮♳♴♲♯♫♥♓♴♹♬♥☽☧♲♥♤☧☻♣☮♬♩♮♥♗♩♤♴♨☽☳☰☻♣☮♬♩♮♥♃♡♰☽☧♲♯♵♮♤☧☻♣☮♢♥♧♩♮♐♡♴♨☨☩☻♣☮♭♯♶♥♔♯☨☴☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☴☵☬☱☳☰☬☷☰☬☲☰☰☬☱☰☵☬☱☳☰☩☻♣☮♢♥♺♩♥♲♃♵♲♶♥♔♯☨☱☰☵☬☱☳☰☬☱☴☰☬☵☰☬

	export const progress = (t, start, end) =>
	t < start ? 0 :
	t > end ? 1 :
	(t / (end - start));

	export const tween = (start, end, step, state, t) =>
	step(state, progress(t, start, end));

	export const event = (time, step, state, t) =>
	t < time ? step(state, 0) : step(state, 1);

	/* Example animation function
	*
	* Interpolate between a start and end position.
	*
	* obj.x represents a position parameter (e.g. 12.2)
	* end_pos is the value obj.x will have at the end of the animation
	* msec is the number of milliseconds we want to run the animation for
	* easing is a timing function that accepts a number between 0 to 1
	* and returns the proportion of the interpolation between start and end to move the object to.
	*

	function Storage(name) {
	this.ready = new Promise((resolve, reject) => {
	var request = window.indexedDB.open(location.origin);

	request.onupgradeneeded = e => {
	this.db = e.target.result;
	this.db.createObjectStore('store');
	};

	request.onsuccess = e => {

	var touchstartX = 0;
	var touchstartY = 0;
	var touchendX = 0;
	var touchendY = 0;

	var gesuredZone = document.getElementById('gesuredZone');

	gesuredZone.addEventListener('touchstart', function(event) {
	touchstartX = event.screenX;
	touchstartY = event.screenY;

	/* bounceFactory
	*
	* Consult this article: https://medium.com/@willsilversmith/the-bounce-factory-3498de1e5262#.pn5rcjp15
	* The variables below are annotate with comments that reference the article.
	*
	* Simulate a physical bouncing motion based on physics equations of motion.
	*
	* We assume mass and gravity = 1 as they are immaterial when we normalize both
	* the y and t axis to 1. The length of the animation in msec will determine "gravity"
	* and the elasticity will determine the number of bounces.

	// quite untested, adapted from BigstickCarpet's gist, attempt to make it simpler to use

	function openIndexedDB (fileindex) {
	// This works on all devices/browsers, and uses IndexedDBShim as a final fallback
	var indexedDB = window.indexedDB \|\| window.mozIndexedDB \|\| window.webkitIndexedDB \|\| window.msIndexedDB \|\| window.shimIndexedDB;

	var openDB = indexedDB.open("MyDatabase", 1);

	openDB.onupgradeneeded = function() {
	var db = {}