Add change icon when clicked functionality

background.js

@@ -0,0 +1,14 @@
+chrome.browserAction.onClicked.addListener(function(tab) {
+  chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
+    var activeTab = tabs[0];
+    chrome.tabs.sendMessage(activeTab.id, { "message": "clicked_browser_action" });
+  });
+});
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  // Returned from content script that should contain current_icon_path
+  if (request.message == "clicked_browser_action") {
+    // Truly change the extension's icon
+    chrome.browserAction.setIcon({ path: { "38": request.current_icon_path }, tabId: sender.tab.id });
+  }
+});

content.js

@@ -0,0 +1,17 @@
+var hidden_icon_name_html = "<input type='hidden' value='mata-inactive.png' id='mata-icon-name' />";
+
+$('body').append(hidden_icon_name_html);
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
+  // Extension is clicked
+  if (request.message == "clicked_browser_action") {
+    // Change the extension's icon name on hidden field
+    if ($('#mata-icon-name').val() == "mata-inactive.png") {
+      $('#mata-icon-name').val("mata-active.png");
+    } else {
+      $('#mata-icon-name').val("mata-inactive.png");
+    }
+
+    chrome.runtime.sendMessage({ "message": "clicked_browser_action", "current_icon_path": $('#mata-icon-name').val() });
+  }
+});

manifest.json

@@ -6,6 +6,19 @@
   "version": "0.0.1",
 
   "browser_action": {
-    "default_icon": "mata-inactive.png"
-  }
+    "default_icon": { "38": "mata-inactive.png" }
+  },
+
+  "background": {
+    "scripts": ["background.js"]
+  },
+
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": ["jquery-2.1.4.min.js", "content.js"]
+    }
+  ]
 }