Added source code

raichu2652 · Jul 5, 2013 · 61615ff · 61615ff
commit 61615ff
Show file tree

Hide file tree

Showing 17 changed files with 153 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,4 @@
+## Developing Google Chrome Extensions Source Code
+
+Here's the source code for the Nettuts+ article on Developing Google Chrome 
+Extensions, written by Krasimir Tsonev.
diff --git a/background.js b/background.js
@@ -0,0 +1,41 @@
+// omnibox
+chrome.omnibox.onInputChanged.addListener(function(text, suggest) {
+	suggest([
+	  {content: "color-divs", description: "Make everything red"}
+	]);
+});
+chrome.omnibox.onInputEntered.addListener(function(text) {
+	if(text == "color-divs") colorDivs();
+});
+
+// listening for an event / one-time requests
+// coming from the popup
+chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
+    switch(request.type) {
+        case "color-divs":
+            colorDivs();
+        break;
+    }
+    return true;
+});
+
+// listening for an event / long-lived connections
+// coming from devtools
+chrome.extension.onConnect.addListener(function (port) {
+    port.onMessage.addListener(function (message) {
+       	switch(port.name) {
+			case "color-divs-port":
+				colorDivs();
+			break;
+		}
+    });
+});
+
+// send a message to the content script
+var colorDivs = function() {
+	chrome.tabs.getSelected(null, function(tab){
+	    chrome.tabs.sendMessage(tab.id, {type: "colors-div", color: "#F00"});
+	    // setting a badge
+		chrome.browserAction.setBadgeText({text: "red!"});
+	});
+}
diff --git a/browseraction/popup.html b/browseraction/popup.html
@@ -0,0 +1,4 @@
+<script type="text/javascript" src="popup.js"></script>
+<div style="width:200px">
+	<button id="button">Color all the divs</button>
+</div>
diff --git a/browseraction/popup.js b/browseraction/popup.js
@@ -0,0 +1,7 @@
+window.onload = function() {
+	document.getElementById("button").onclick = function() {
+		chrome.extension.sendMessage({
+	        type: "color-divs"
+	    });
+	}
+}
diff --git a/content.js b/content.js
@@ -0,0 +1,14 @@
+chrome.extension.onMessage.addListener(function(message, sender, sendResponse) {
+	switch(message.type) {
+		case "colors-div":
+			var divs = document.querySelectorAll("div");
+			if(divs.length === 0) {
+				alert("There are no any divs in the page.");
+			} else {
+				for(var i=0; i<divs.length; i++) {
+					divs[i].style.backgroundColor = message.color;
+				}
+			}
+		break;
+	}
+});
diff --git a/devtools/devtools.html b/devtools/devtools.html
@@ -0,0 +1 @@
+<script src="devtools.js"></script>
diff --git a/devtools/devtools.js b/devtools/devtools.js
@@ -0,0 +1,8 @@
+chrome.devtools.panels.create(
+	"Yeah", 
+	"icons/16x16.png", 
+	"devtools/devtoolscontent.html",
+	function() {
+
+	}
+);
diff --git a/devtools/devtoolscontent.html b/devtools/devtoolscontent.html
@@ -0,0 +1,4 @@
+<script type="text/javascript" src="devtoolscontent.js"></script>
+<div style="width:200px">
+	<button id="button">Color all the divs</button>
+</div>
diff --git a/devtools/devtoolscontent.js b/devtools/devtoolscontent.js
@@ -0,0 +1,6 @@
+window.onload = function() {
+	var port = chrome.extension.connect({ name: "color-divs-port" });
+	document.getElementById("button").onclick = function() {
+    	port.postMessage({ type: "color-divs"});
+	}
+}
diff --git a/icons/128x128.png b/icons/128x128.png
diff --git a/icons/16x16.png b/icons/16x16.png
diff --git a/icons/19x19.png b/icons/19x19.png
diff --git a/icons/38x38.png b/icons/38x38.png
diff --git a/icons/48x48.png b/icons/48x48.png
diff --git a/icons/icon.psd b/icons/icon.psd
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,36 @@
+{
+  "name": "BrowserExtension",
+  "version": "0.0.1",
+  "manifest_version": 2,
+  "description" : "Description ...",
+  "icons": { "16": "icons/16x16.png", "48": "icons/48x48.png", "128": "icons/128x128.png" },
+
+  "omnibox": { "keyword" : "yeah" },
+
+  "browser_action": {
+    "default_icon": {
+      "19": "icons/19x19.png",
+      "38": "icons/38x38.png"
+    },
+    "default_title": "That's the tool tip",
+    "default_popup": "browseraction/popup.html"
+  },
+
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+
+  "chrome_url_overrides" : {
+    "newtab": "newtab/newtab.html"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["content.js"]
+    }
+  ],
+
+  "devtools_page": "devtools/devtools.html"
+}
diff --git a/newtab/newtab.html b/newtab/newtab.html
@@ -0,0 +1,28 @@
+<html>
+	<head>
+		<style type="text/css">
+			body, html {
+				margin: 0;
+				padding: 0;
+				width: 100%;
+				height: 100%;
+				font-size: 18px;
+				font-family: Georgia;
+			}
+			h1 {
+				position: absolute;
+				width: 400px;
+				height: 100px;
+				color: #A4A4A4;
+				font-weight: normal;
+				left: 50%;
+				top: 50%;
+				margin: -50px 0 0 -200px;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Yeah, that's my awesome new tab page!</h1>
+	</body>
+</html>