Permalink
Browse files

Added source code

  • Loading branch information...
0 parents commit 61615ff0c107b8822e88ef6f4ce0543ef01410cc @andrewperk andrewperk committed Jul 5, 2013
@@ -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.
@@ -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!"});
+ });
+}
@@ -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>
@@ -0,0 +1,7 @@
+window.onload = function() {
+ document.getElementById("button").onclick = function() {
+ chrome.extension.sendMessage({
+ type: "color-divs"
+ });
+ }
+}
@@ -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;
+ }
+});
@@ -0,0 +1 @@
+<script src="devtools.js"></script>
@@ -0,0 +1,8 @@
+chrome.devtools.panels.create(
+ "Yeah",
+ "icons/16x16.png",
+ "devtools/devtoolscontent.html",
+ function() {
+
+ }
+);
@@ -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>
@@ -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"});
+ }
+}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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"
+}
@@ -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>

0 comments on commit 61615ff

Please sign in to comment.