├── README.md
├── background.js
├── browseraction
    ├── popup.html
    └── popup.js
├── content.js
├── devtools
    ├── devtools.html
    ├── devtools.js
    ├── devtoolscontent.html
    └── devtoolscontent.js
├── icons
    ├── 128x128.png
    ├── 16x16.png
    ├── 19x19.png
    ├── 38x38.png
    ├── 48x48.png
    └── icon.psd
├── manifest.json
└── newtab
    └── newtab.html


/README.md:
--------------------------------------------------------------------------------
1 | ## Developing Google Chrome Extensions Source Code
2 | 
3 | Here's the source code for the Nettuts+ article on Developing Google Chrome 
4 | Extensions, written by Krasimir Tsonev.


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | // omnibox
 2 | chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
 3 | 	suggest([
 4 | 	  {content: "color-divs", description: "Make everything red"}
 5 | 	]);
 6 | });
 7 | chrome.omnibox.onInputEntered.addListener(function(text) {
 8 | 	if(text == "color-divs") colorDivs();
 9 | });
10 | 
11 | // listening for an event / one-time requests
12 | // coming from the popup
13 | chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
14 |     switch(request.type) {
15 |         case "color-divs":
16 |             colorDivs();
17 |         break;
18 |     }
19 |     return true;
20 | });
21 | 
22 | // listening for an event / long-lived connections
23 | // coming from devtools
24 | chrome.extension.onConnect.addListener(function (port) {
25 |     port.onMessage.addListener(function (message) {
26 |        	switch(port.name) {
27 | 			case "color-divs-port":
28 | 				colorDivs();
29 | 			break;
30 | 		}
31 |     });
32 | });
33 | 
34 | // send a message to the content script
35 | var colorDivs = function() {
36 | 	chrome.tabs.getSelected(null, function(tab){
37 | 	    chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
38 | 	    // setting a badge
39 | 		chrome.browserAction.setBadgeText({text: "red!"});
40 | 	});
41 | }


--------------------------------------------------------------------------------
/browseraction/popup.html:
--------------------------------------------------------------------------------
1 | <script type="text/javascript" src="popup.js"></script>
2 | <div style="width:200px">
3 | 	<button id="button">Color all the divs</button>
4 | </div>


--------------------------------------------------------------------------------
/browseraction/popup.js:
--------------------------------------------------------------------------------
1 | window.onload = function() {
2 | 	document.getElementById("button").onclick = function() {
3 | 		chrome.extension.sendMessage({
4 | 	        type: "color-divs"
5 | 	    });
6 | 	}
7 | }


--------------------------------------------------------------------------------
/content.js:
--------------------------------------------------------------------------------
 1 | chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
 2 | 	switch(message.type) {
 3 | 		case "colors-div":
 4 | 			var divs = document.querySelectorAll("div");
 5 | 			if(divs.length === 0) {
 6 | 				alert("There are no any divs in the page.");
 7 | 			} else {
 8 | 				for(var i=0; i<divs.length; i++) {
 9 | 					divs[i].style.backgroundColor = message.color;
10 | 				}
11 | 			}
12 | 		break;
13 | 	}
14 | });


--------------------------------------------------------------------------------
/devtools/devtools.html:
--------------------------------------------------------------------------------
1 | <script src="devtools.js"></script>


--------------------------------------------------------------------------------
/devtools/devtools.js:
--------------------------------------------------------------------------------
1 | chrome.devtools.panels.create(
2 | 	"Yeah", 
3 | 	"icons/16x16.png", 
4 | 	"devtools/devtoolscontent.html",
5 | 	function() {
6 | 		
7 | 	}
8 | );


--------------------------------------------------------------------------------
/devtools/devtoolscontent.html:
--------------------------------------------------------------------------------
1 | <script type="text/javascript" src="devtoolscontent.js"></script>
2 | <div style="width:200px">
3 | 	<button id="button">Color all the divs</button>
4 | </div>


--------------------------------------------------------------------------------
/devtools/devtoolscontent.js:
--------------------------------------------------------------------------------
1 | window.onload = function() {
2 | 	var port = chrome.extension.connect({ name: "color-divs-port" });
3 | 	document.getElementById("button").onclick = function() {
4 |     	port.postMessage({ type: "color-divs"});
5 | 	}
6 | }


--------------------------------------------------------------------------------
/icons/128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/128x128.png


--------------------------------------------------------------------------------
/icons/16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/16x16.png


--------------------------------------------------------------------------------
/icons/19x19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/19x19.png


--------------------------------------------------------------------------------
/icons/38x38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/38x38.png


--------------------------------------------------------------------------------
/icons/48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/48x48.png


--------------------------------------------------------------------------------
/icons/icon.psd:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tutsplus/developing-google-chrome-extensions/61615ff0c107b8822e88ef6f4ce0543ef01410cc/icons/icon.psd


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "BrowserExtension",
 3 |   "version": "0.0.1",
 4 |   "manifest_version": 2,
 5 |   "description" : "Description ...",
 6 |   "icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
 7 | 
 8 |   "omnibox": { "keyword" : "yeah" },
 9 | 
10 |   "browser_action": {
11 |     "default_icon": {
12 |       "19": "icons/19x19.png",
13 |       "38": "icons/38x38.png"
14 |     },
15 |     "default_title": "That's the tool tip",
16 |     "default_popup": "browseraction/popup.html"
17 |   },
18 | 
19 |   "background": {
20 |     "scripts": ["background.js"],
21 |     "persistent": false
22 |   },
23 | 
24 |   "chrome_url_overrides" : {
25 |     "newtab": "newtab/newtab.html"
26 |   },
27 | 
28 |   "content_scripts": [
29 |     {
30 |       "matches": ["http://*/*", "https://*/*"],
31 |       "js": ["content.js"]
32 |     }
33 |   ],
34 | 
35 |   "devtools_page": "devtools/devtools.html"
36 | }


--------------------------------------------------------------------------------
/newtab/newtab.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<style type="text/css">
 4 | 			body, html {
 5 | 				margin: 0;
 6 | 				padding: 0;
 7 | 				width: 100%;
 8 | 				height: 100%;
 9 | 				font-size: 18px;
10 | 				font-family: Georgia;
11 | 			}
12 | 			h1 {
13 | 				position: absolute;
14 | 				width: 400px;
15 | 				height: 100px;
16 | 				color: #A4A4A4;
17 | 				font-weight: normal;
18 | 				left: 50%;
19 | 				top: 50%;
20 | 				margin: -50px 0 0 -200px;
21 | 				text-align: center;
22 | 			}
23 | 		</style>
24 | 	</head>
25 | 	<body>
26 | 		<h1>Yeah, that's my awesome new tab page!</h1>
27 | 	</body>
28 | </html>


--------------------------------------------------------------------------------