0xjjpa

// In Background.js
chrome.tabs.sendMessage(tab.id, {content: "message"}, function(response) {
 	if(response) {
 		//We do something
 	}
});

// In ContentScript.js
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {  
	if(request.content) {

0xjjpa

#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

0xjjpa

var population = [
  {
		"year": "1850",
		"age": "0",
		"sex": "1",
		"people": "1483789"
	},
	{
		"year": "1850",
		"age": "0",

0xjjpa

var Node = function(v, l, r) { 
  this.value = v; this.left = l || {}; this.right = r || {};
}

Node.prototype.addChildren = function(number) {
		if(number) {
			if(this.value) {
				Node.prototype.parent = this;
				if(this.value > number) {	
					Node.prototype.direction = "left";			

0xjjpa

{
  "manifest_version": 2,
  "name": "Chrome Socket API Server",
  "description": "listen & accept for socket",
  "version": "0.1",
  "app": {
    "background": {
      "scripts": ["server.js"]
    }
  },

0xjjpa

<meta id="viewport" name="viewport" content="width=320, intial-scale=0.5, maximum-scale=.5, minimum-scale=.5, user-scalable=no"/>
<script>
  (function(doc) {
    if (navigator.userAgent.match(/iPad/i)) {
      doc.getElementById("viewport").setAttribute("content", "initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no");
    }
  }(document));
</script>

0xjjpa

$break-small: 480px;
$break-large: 1024px;

@mixin media-query-for($device) {
  @if $device == palm {
    @media only screen and (max-width: $break-small) { @content; }
  }
  @else if $device == lap {
    @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
  }

0xjjpa

/* Read article at http://typecast.com/blog/a-more-modern-scale-for-web-typography */
body {
  font-size: 100%;
}

body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 {
  font-size-adjust: 0.5;
}

#page {

0xjjpa

window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v

0xjjpa

"use strict";

angular.module('usersResources', [
  'apiConstants',
  'apiModule'
  ])
.service('usersResources.users', [
  '$q',
  'api',
  function users($q, api) {