diff --git a/README.md b/README.md new file mode 100644 index 0000000..488025f --- /dev/null +++ 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. \ No newline at end of file diff --git a/background.js b/background.js new file mode 100755 index 0000000..2fd5443 --- /dev/null +++ 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!"}); + }); +} \ No newline at end of file diff --git a/browseraction/popup.html b/browseraction/popup.html new file mode 100755 index 0000000..f4ab738 --- /dev/null +++ b/browseraction/popup.html @@ -0,0 +1,4 @@ + +
+ +
\ No newline at end of file diff --git a/browseraction/popup.js b/browseraction/popup.js new file mode 100755 index 0000000..bca6976 --- /dev/null +++ b/browseraction/popup.js @@ -0,0 +1,7 @@ +window.onload = function() { + document.getElementById("button").onclick = function() { + chrome.extension.sendMessage({ + type: "color-divs" + }); + } +} \ No newline at end of file diff --git a/content.js b/content.js new file mode 100755 index 0000000..c1c523d --- /dev/null +++ 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 \ No newline at end of file diff --git a/devtools/devtools.js b/devtools/devtools.js new file mode 100755 index 0000000..75624b3 --- /dev/null +++ b/devtools/devtools.js @@ -0,0 +1,8 @@ +chrome.devtools.panels.create( + "Yeah", + "icons/16x16.png", + "devtools/devtoolscontent.html", + function() { + + } +); \ No newline at end of file diff --git a/devtools/devtoolscontent.html b/devtools/devtoolscontent.html new file mode 100755 index 0000000..4f09e1d --- /dev/null +++ b/devtools/devtoolscontent.html @@ -0,0 +1,4 @@ + +
+ +
\ No newline at end of file diff --git a/devtools/devtoolscontent.js b/devtools/devtoolscontent.js new file mode 100755 index 0000000..5854387 --- /dev/null +++ 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"}); + } +} \ No newline at end of file diff --git a/icons/128x128.png b/icons/128x128.png new file mode 100755 index 0000000..3fe43da Binary files /dev/null and b/icons/128x128.png differ diff --git a/icons/16x16.png b/icons/16x16.png new file mode 100755 index 0000000..8ca85bb Binary files /dev/null and b/icons/16x16.png differ diff --git a/icons/19x19.png b/icons/19x19.png new file mode 100755 index 0000000..db62151 Binary files /dev/null and b/icons/19x19.png differ diff --git a/icons/38x38.png b/icons/38x38.png new file mode 100755 index 0000000..f7d3c3b Binary files /dev/null and b/icons/38x38.png differ diff --git a/icons/48x48.png b/icons/48x48.png new file mode 100755 index 0000000..1c4ad27 Binary files /dev/null and b/icons/48x48.png differ diff --git a/icons/icon.psd b/icons/icon.psd new file mode 100755 index 0000000..d7e05c2 Binary files /dev/null and b/icons/icon.psd differ diff --git a/manifest.json b/manifest.json new file mode 100755 index 0000000..4474be1 --- /dev/null +++ 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" +} \ No newline at end of file diff --git a/newtab/newtab.html b/newtab/newtab.html new file mode 100755 index 0000000..0b45b43 --- /dev/null +++ b/newtab/newtab.html @@ -0,0 +1,28 @@ + + + + + +

Yeah, that's my awesome new tab page!

+ + \ No newline at end of file