update app detector to be able to detect other store types and fix a …

…bug where it was not detecting some stores again due to asset paths

css/popup.css

@@ -22,8 +22,13 @@ body {
 
 .apps-table-container {
     max-height: 300px;
-    overflow: scroll;
+    overflow-y: auto;
     min-width: 400px;
+    width: 100%;
+}
+
+.table-apps {
+    margin-bottom: 0;
 }
 
 .app-links > a {

js/background.js

@@ -10,7 +10,14 @@ SAD.Background = function(opts) {
 
         chrome.runtime.onMessage.addListener(function(msgObj) {
             if (msgObj.action == 'getApps') {
-                chrome.runtime.sendMessage({ action: "setApps", apps: self.apps, detectableApps: SHOPIFY_APPS, detectableThemes: SHOPIFY_THEMES, theme: self.theme });
+                chrome.runtime.sendMessage({ 
+                    action: "setApps", 
+                    apps: self.apps, 
+                    detectableApps: SHOPIFY_APPS, 
+                    detectableThemes: SHOPIFY_THEMES, 
+                    theme: self.theme, 
+                    platform: self.platform 
+                });
                 return true;
             } else if (msgObj.action =='setPageScripts') {
                 self.detectScripts(msgObj.pageScripts, msgObj.pageUrl, msgObj.theme);
@@ -28,7 +35,7 @@ SAD.Background = function(opts) {
 
     self.setLoading = function() {
         chrome.browserAction.disable();
-        chrome.browserAction.setIcon({ path: 'img/icon.png' });
+        chrome.browserAction.setIcon({ path: 'img/icons/detector.png' });
         chrome.browserAction.setBadgeText({
             text: '..'
         });
@@ -38,22 +45,23 @@ SAD.Background = function(opts) {
         chrome.browserAction.setBadgeText({
             text: ''
         });
-        chrome.browserAction.setIcon({ path: 'img/icon-disabled.png' });
+        chrome.browserAction.setIcon({ path: 'img/icons/detector-disabled.png' });
         chrome.browserAction.disable();
     };
 
     self.detectScripts = function(scripts, pageUrl, windowTheme) {
         var detector = new SAD.Detector({ scripts: scripts, pageUrl: pageUrl, windowTheme: windowTheme });
+        self.platform = detector.detectPlatform();
 
-        if (detector.isShopifyStore()) {
+        if (self.platform) {
             self.apps = detector.detectApps();
             self.theme = detector.detectTheme();
 
             chrome.browserAction.setBadgeText({
                 text: self.apps.length.toString()
             });
             chrome.browserAction.enable();
-            chrome.browserAction.setIcon({ path: 'img/icon.png' });
+            chrome.browserAction.setIcon({ path: 'img/icons/' + self.platform + '.png' });
             return true;
         } else {
             self.disable();

js/detector.js

@@ -31,14 +31,24 @@ SAD.Detector = function(opts) {
         return { name: self.windowTheme.name, custom_name: self.windowTheme.name, fully_custom: true};
     };
 
-    self.isShopifyStore = function() {
+    self.detectPlatform = function() {
         // Skip this site - it's core shopify
-        if (opts.pageUrl.match(/.*\.shopify\..*/i)) return false;
+        if (opts.pageUrl.match(/.*\.(shopify|magento|bigcommerce)\.[a-z]+/i)) return false;
 
         for (var i = 0; i < self.scripts.length; i++) {
             var script = self.scripts[i];
-            if (!script.match(/.*\.shopify\..*/i)) {
-                return true;
+            if (script.match(/cdn[0-9]*\.bigcommerce\.[a-z]+/i)) {
+                return 'bigcommerce';
+            } else if (script.match(/cdn[0-9]*\.shopify\.[a-z]+/i)) {
+                return 'shopify';
+            } else if (script.match(/mage\/cookies\.js/i)) {
+                return 'magento1';
+            } else if (script.match(/mage\/polyfill(\.min)?\.js/i)) {
+                return 'magento2';
+            } else if (script.match(/woocommerce/i)) {
+                return 'woocommerce';
+            } else if (script.match(/services\/wix-/i)) {
+                return 'wix';
             }
         }
         return false;

js/popup.js

@@ -2,7 +2,8 @@ SAD.Popup = function(opts) {
     opts = opts || {};
     var self = this;
 
-    var $themeSummary, $themeCustomNameContainer, $customName, $themeName, $fullyCustomTheme, $existingTheme, $fullyCustomThemeNameSection;
+    var $themeSummary, $themeCustomNameContainer, $customName, $themeName, 
+        $fullyCustomTheme, $existingTheme, $fullyCustomThemeNameSection, $platformName;
 
     var init = function() {
          self.apps = [];
@@ -13,7 +14,8 @@ SAD.Popup = function(opts) {
               self.detectableApps = msgObj.detectableApps;
               self.detectableThemes = msgObj.detectableThemes;
               self.theme = msgObj.theme;
-              self.displayApps();
+              self.platform = msgObj.platform;
+              self.updateDisplay();
             } else if (msgObj.action == 'setLoading') {
                 $('#appsTable').css('opacity', 0.5);
             }
@@ -22,7 +24,7 @@ SAD.Popup = function(opts) {
          chrome.runtime.sendMessage({ action: "getApps"});
     };
 
-    self.displayApps = function() {
+    self.updateDisplay = function() {
         var $table = $('#appsTable');
         var $body = $table.find('tbody');
         var $num = $('.num-detections');
@@ -41,6 +43,8 @@ SAD.Popup = function(opts) {
             $table.css('opacity', 1);
             $table.show();
         }
+
+        $platformName.text(self.platform);
     }
 
     // Private Methods //
@@ -53,6 +57,7 @@ SAD.Popup = function(opts) {
         $fullyCustomTheme = $('.fully-custom-theme');
         $existingTheme = $('.existing-theme');
         $fullyCustomThemeNameSection = $('.theme-custom-name-section');
+        $platformName = $('.platform-name');
     };
 
     var showThemeDetection = function() {

manifest.json

@@ -1,16 +1,16 @@
 {
   "manifest_version": 2,
 
-  "name": "Shopify App/Theme Detector by Fera.ai",
-  "description": "Detect which apps and what theme a Shopify store is using. Built and maintained by Fera.ai and the Shopify dev community.",
-  "version": "0.5.4",
+  "name": "Shopify App Detector by Fera.ai",
+  "description": "Detect which apps and what theme a Shopify store is using. Built and maintained by Fera.ai and the community.",
+  "version": "0.6.0",
   "author": "Fera.ai",
   "homepage_url": "https://www.github.com/feracommerce/shopify_app_detector",
-  "icons": { "16": "img/icon.png",
-           "48": "img/icon.png",
-          "128": "img/icon.png" },
+  "icons": { "16": "img/icons/detector.png",
+           "48": "img/icons/detector.png",
+          "128": "img/icons/detector.png" },
   "browser_action": {
-   "default_icon": "img/icon-disabled.png",
+   "default_icon": "img/icons/detector-disabled.png",
    "default_popup": "popup.html"
   },
   "permissions": [

popup.html

@@ -19,14 +19,14 @@
   <body>
     <div class="main-content">
       <p class="summary-statement">
-        This store is running <span class="num-detections emphasize">some apps</span><span class="theme-statement">
+        This <strong class="platform-name"></strong> store is running <span class="num-detections emphasize">some apps</span><span class="theme-statement">
           and <span class="existing-theme">
             a variation of the <a class="theme-name emphasize" target="_blank" href="https://themes.shopify.com">Shopify theme</a>
             <span class="theme-custom-name-container" stlye="display: none;">
               (renamed to <span class="theme-custom-name"></span>)
             </span>
           </span><span class="fully-custom-theme" style="display: none;">
-            a seemingly <span class="emphasize">fully custom theme</span><span class="theme-custom-name-section"> labeled <span class="theme-custom-name"></span></span>
+            a seemingly <span class="emphasize">custom theme</span><span class="theme-custom-name-section"> labeled <span class="theme-custom-name"></span></span>
           </span>
         </span>
       </p>
@@ -58,7 +58,7 @@
     <div class="footer-content">
       <div class="support-statement">
         Open source &amp; freely supported by <a href="https://www.github.com/feracommerce/shopify_app_detector" target="github">the github community </a> and
-        <a href="https://www.fera.ai?ref=shopify_app_detector">the <img src="/img/fera_icon-64px.png" class="img-responsive" style="height: 14px;"> Fera.ai team</a>.
+        <a href="https://www.fera.ai?ref=shopify_app_detector" target="fera">the <img src="/img/icons/fera.png" class="img-responsive" style="height: 14px;"> Fera.ai team</a>.
       </div>
     </div>
   </body>