Remove dependency of jQuery from popup.js. Also changed message "name" from boolean to string

eddie168 · eddie168 · commit 96a2f430ce96 · 2012-10-18T21:18:28.000+08:00
diff --git a/background.js b/background.js
@@ -1,22 +1,22 @@
 /*global chrome:true */
 
 chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {
-  if (msg.addPage) {
+  if (msg.msg === 'popupAddPage') {
     addPage(msg, sendResponse);
   } else if (msg.getList) {
     // Get the whole list
     chrome.storage.sync.get(null, function (items) {
       sendResponse(items);
     });
-  } else if (msg.checkDiffs) {
+  } else if (msg.msg === 'popupCheckDiffs') {
     console.log("checkDiffs not implemented");
     sendResponse('Not implemented');
   } else if (msg.removeDiff) {
     console.log("msg.removeDiff");
     chrome.storage.sync.remove(msg.url, function () {
       sendResponse("Item removed");
     });
-  } else if (msg.showDiff) {
+  } else if (msg.msg === 'popupShowDiff') {
     console.log("showDiff: sendMessage to content script. tabid=" + msg.tabId);
     // To talk to content scripts
     var contentScript = chrome.tabs.connect(msg.tabId, {name: "showdiff"});
diff --git a/js/popup.js b/js/popup.js
@@ -1,11 +1,13 @@
 /*global chrome,webkitNotifications:true */
 
-$(function ($) {
-  $('#addPage').on('click', function (evt) {
+function setupEvent() {
+  // Add current page for diff checking
+  var el = document.getElementById("addPage");
+  el.addEventListener('click', function() {
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       // Create the message object
       var msg = {
-        addPage: true,
+        msg: 'popupAddPage',
         url: tabs[0].url,
         tabId: tabs[0].id
       };
@@ -24,30 +26,30 @@ $(function ($) {
       });
     });
   });
-  $('#manageList').on('click', function (evt) {
+
+  // Open the List Manager
+  el = document.getElementById('manageList');
+  el.addEventListener('click', function () {
     chrome.tabs.create({url:"list.html"});
-    /*
-    chrome.runtime.getBackgroundPage(function(bgPage) {
-      bgPage.console.log("manageList click");
-    });
-    window.close();
-    */
   });
-  $('#checkDiffs').on('click', function (evt) {
-    chrome.tabs.create({url:"list.html"});
-
-    var msg = { checkDiffs: true };
-    alert("click on checkDiffs");
+  
+  // Manually check diffs of saved page
+  el = document.getElementById('checkDiffs');
+  el.addEventListener('click', function () {
+    // Create the message
+    var msg = { msg: 'popupCheckDiffs' };
     chrome.extension.sendMessage(msg, function(response) {
       window.close();
     });
-    alert("sent msg");
   });
-  $('#showDiff').on('click', function (evt) {
+  
+  // Show diff of the current page
+  el = document.getElementById('showDiff');
+  el.addEventListener('click', function () {
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
       // Create the message object
       var msg = {
-        showDiff: true,
+        msg: 'popupShowDiff',
         url: tabs[0].url,
         tabId: tabs[0].id
       };
@@ -56,4 +58,7 @@ $(function ($) {
       });
     });
   });
-})(jQuery);
+}
+
+// Binding events when DOM ready
+document.addEventListener("DOMContentLoaded", setupEvent);
diff --git a/popup.html b/popup.html
@@ -16,9 +16,6 @@
       }
     </style>
     <!-- JavaScript and HTML must be in separate files for security. -->
-    <script src="js/jquery-1.8.2.min.js"></script>
-    <script src="js/bootstrap.min.js"></script>
-    <script src="js/popup.js"></script>
   </head>
   <body>
     <h4>WebPageDiff</h4>
@@ -36,5 +33,6 @@ <h4>WebPageDiff</h4>
         <div class="clickable" id="manageList"><i class="icon-list"></i> Manage List</div>
       </li>
     </ul>
+    <script src="js/popup.js"></script>
   </body>
 </html>
