Skip to content

Instantly share code, notes, and snippets.

View hsanchez's full-sized avatar
I may be slow to respond.

Huascar Sanchez hsanchez

I may be slow to respond.
View GitHub Profile

#Introduction

Developing Chrome Extensions is REALLY fun if you are a Front End engineer. If you, however, struggle with visualizing the architecture of an application, then developing a Chrome Extension is going to bite your butt multiple times due the amount of excessive components the extension works with. Here are some pointers in how to start, what problems I encounter and how to avoid them.

Note: I'm not covering chrome package apps, which although similar, work in a different way. I also won't cover the page options api neither the new brand event pages. What I explain covers most basic chrome applications and should be enough to get you started.

Table of Contents

  1. Understand the Chrome Architecture
  2. Understand the Tabs-Extension Relationship
  3. Picking the right interface for the job
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/hint/javascript-hint.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/edit/matchbrackets.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/addon/display/fullscreen.min.js"></script>

[Isolating Differences Between Files][paper]

Advantage over Other Algorithms

The diff output is more specific:

[I]f a whole block of text is moved, then all of it, rather than just the beginning and end, is detected as changed.

>The algorithm described here avoids these difficulties. It detects differences that correspond very closely to our intuitive notion of difference.

javascript:(function(){var p=document.createElement("p");p.innerHTML="<strong>Loading&hellip;</strong>";p.id="loadingp";p.style.padding="20px";p.style.background="#fff";p.style.left="20px";p.style.top=0;p.style.position="fixed";p.style.zIndex="9999999";p.style.opacity=".85";document.body.appendChild(p);document.body.appendChild(document.createElement("script")).src="https://gist.github.com/ttscoff/6109434/raw/Bullseye.js?x="+(Math.random());})();

Step 0:

Get Homebrew installed on your mac if you don't already have it

Step 1:

Install highlight. "brew install highlight". (This brings down Lua and Boost as well)

Step 2:

val regex = """mongodb://(\w+):([\w|-]+)@([\w|\.]+):(\d+)/(\w+)""".r
url match {
case Some(regex(u, p, host, port, dbName)) =>
ConnectionParams(host, port.toInt, dbName, u, p)
case None => {
ConnectionParams("127.0.0.1", 27017, "mylocaldb")
}
/**
* Quick and Easy Integration of Google URL Shortener API in your Java Applications using Scribe-Java and GSon
* http://codeoftheday.blogspot.com/2013/07/quick-and-easy-integration-of-google.html
*/
package smhumayun.codeoftheday.google.urlshortener;
import com.google.gson.GsonBuilder;
import com.google.gson.reflect.TypeToken;
import org.scribe.builder.ServiceBuilder;
import org.scribe.builder.api.GoogleApi;
@hsanchez
hsanchez / 0_reuse_code.js
Created July 30, 2014 00:24
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
#!/Users/dustyeike/.rvm/rubies/ruby-1.9.2-p290/bin/ruby
require "rubygems"
require "test/unit"
require "date"
EPOCH = Date.new(1970, 1, 1)
#
# Returns the number of seconds from the epoch to date
def epoch_seconds date
@hsanchez
hsanchez / bijective.rb
Last active August 29, 2015 14:07 — forked from zumbojo/bijective.rb
# Simple bijective function
# Basically encodes any integer into a base(n) string,
# where n is ALPHABET.length.
# Based on pseudocode from http://stackoverflow.com/questions/742013/how-to-code-a-url-shortener/742047#742047
ALPHABET =
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split(//)
# make your own alphabet using:
# (('a'..'z').to_a + ('A'..'Z').to_a + (0..9).to_a).shuffle.join