joshwcomeau

Chrome Extension Resources

Official Docs

Official Sample Extensions:
https://developer.chrome.com/extensions/samples

Official Getting Started Chrome Tutorial:

joshwcomeau

var animal = {
  position: [0,0],
  species:  "mammal",
  move: function(distance, axis) {
    axis === 'x' 
    ? this.position[0] += distance
    : this.position[1] += distance;
  }
}

joshwcomeau

console.log(dog);
  // would return:
  {
    position: [0,0],
    move:     function(distance, axis) { ... },
    species:  "canine",
    bark:     function() { ... }
  }

joshwcomeau

window.reqKitControllers.application = {
  // Fetch an array of 'Emotion' objects from the server.
  // Returns a promise.
  fetchEmotions: function() {
    return $.ajax(window.reqKitConstants.ApiEmotionIndex, {
      method: 'GET',
      contentType: "application/json",
      headers: {
        'Authorization': window.reqKitConstants.ApiKey
      }

joshwcomeau

// Cat Index Controller
window.reqKitControllers.catIndex = _.extend({}, window.reqKitControllers.application, {
  emotionSelector: "#select-emotion",

  initialize: function() {
    this.populateEmotionsSelect(this.emotionSelector, " ", true);
  }
});

// Cat New Controller

joshwcomeau

$.ajax("http://requestkittens.com/cats", {
  data: {
    emotion:      "grumpy",
    imageSize:    "full",
    numOfResults: 10
  },
  headers: {
    'Authorization': <your API key here>
  }
});

joshwcomeau

{
  "_items": [
    {
      "id": "553fff884c7f7f44fa6b7fe7",
      "url": "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-b469c2c29d887b46d9019839d9a70df4/full.jpg",
      "emotion": "happy",
      "source": {
        "owner": "we-lovecats.tumblr.com",
        "url": "http://40.media.tumblr.com/bdebb1aaa241e3faeb70233145c0cd87/tumblr_n6t7upX1LR1rouu9to1_400.jpg"
      }

joshwcomeau

{
  "_items": [
    {
      "_id": "553ba848e4b0bde7020ac65d",
      "name": "sad"
    },
    {
      "_id": "553ba851e4b0bde7020ac65e",
      "name": "happy"
    },

joshwcomeau

{
  "_id":      "553d327e594a1b5f1b13f198",
  "url": {
    "thumb":  "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/thumb.jpg",
    "small":  "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/small.jpg",
    "medium": "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/medium.jpg",
    "full":   "https://s3.amazonaws.com/requestkittens/553c0437e4b0bde7020ac956-d9ed2ad384499394dde0eaa8c0ed040a/full.jpg"
  },
  "emotion": [
    {

joshwcomeau

"use strict";
const connect  = ReactRedux.connect;
const Provider = ReactRedux.Provider;

// REDUCER
const defaultState = { count: 0 };
const appReducer = (state = defaultState, action) => {
  switch ( action.type ) {
    case 'increment':
      return _.extend({}, state, { count: state.count+1 });