Change webextension to browser action, add badges

package.json

@@ -21,6 +21,6 @@
     "convert": "cd ./src/drivers/webextension/images/icons ; cp *.svg converted ; cd converted ; convert-svg-to-png *.svg --width 32 --height 32 ; rm *.svg",
     "prettify": "jsonlint -si --trim-trailing-commas --enforce-double-quotes ./src/apps.json",
     "build": "yarn run link && yarn run validate && yarn run prettify && yarn run convert && node ./bin/build.js",
-    "build:safari": "xcrun safari-web-extension-converter --swift --project-location build --bundle-identifier com.wappalyzer.webextension --force src/drivers/webextension"
+    "build:safari": "xcrun safari-web-extension-converter --swift --project-location build --force src/drivers/webextension"
   }
 }

src/drivers/webextension/css/styles.css

@@ -68,6 +68,10 @@ a:hover {
   width: 100%;
 }
 
+.alerts--hidden {
+  visibility: hidden;
+}
+
 .alerts__icon {
   color: var(--color-primary);
   height: 1.1rem;
@@ -90,12 +94,20 @@ a:hover {
   padding: 1.5rem 1.5rem .5rem 1.5rem;
 }
 
+.detections--hidden {
+  display: none;
+}
+
 .empty {
   opacity: .3;
   padding: 3rem 1.5rem .5rem 1.5rem;
   text-align: center;
 }
 
+.empty--hidden {
+  display: none;
+}
+
 .category {
   page-break-inside: avoid;
   break-inside: avoid-column;
@@ -185,6 +197,10 @@ a:hover {
   width: 36rem;
 }
 
+.terms--hidden {
+  display: none;
+}
+
 .terms__wrapper {
   display: none;
   height: 100%;

src/drivers/webextension/js/driver.js

@@ -55,11 +55,16 @@ const Driver = {
       ads: await getOption('ads', [])
     }
 
+    await promisify(chrome.browserAction, 'setBadgeBackgroundColor', {
+      color: '#6B39BD'
+    })
+
     chrome.webRequest.onCompleted.addListener(
       Driver.onWebRequestComplete,
       { urls: ['http://*/*', 'https://*/*'], types: ['main_frame'] },
       ['responseHeaders']
     )
+
     chrome.tabs.onRemoved.addListener((id) => (Driver.cache.tabs[id] = null))
 
     // Enable messaging between scripts
@@ -361,11 +366,7 @@ const Driver = {
    * @param {Object} technologies
    */
   async setIcon(url, technologies) {
-    if (!chrome.pageAction.show) {
-      return
-    }
-
-    const dynamicIcon = await getOption('dynamicIcon', true)
+    const dynamicIcon = await getOption('dynamicIcon', false)
 
     let icon = 'default.svg'
 
@@ -382,9 +383,13 @@ const Driver = {
     const tabs = await promisify(chrome.tabs, 'query', { url })
 
     await Promise.all(
-      tabs.map(async ({ id: tabId }) => {
-        await Promise.race([
-          promisify(chrome.pageAction, 'setIcon', {
+      tabs.map(({ id: tabId }) =>
+        Promise.all([
+          promisify(chrome.browserAction, 'setBadgeText', {
+            tabId,
+            text: technologies.length.toString().toString()
+          }),
+          promisify(chrome.browserAction, 'setIcon', {
             tabId,
             path: chrome.extension.getURL(
               `../images/icons/${
@@ -393,12 +398,9 @@ const Driver = {
                   : icon
               }`
             )
-          }),
-          new Promise((resolve) => setTimeout(resolve, 500))
+          })
         ])
-
-        chrome.pageAction.show(tabId)
-      })
+      )
     )
   },
 

src/drivers/webextension/js/options.js

@@ -18,7 +18,7 @@ const Options = {
 
     ;[
       ['upgradeMessage', true],
-      ['dynamicIcon', true],
+      ['dynamicIcon', false],
       ['tracking', true],
       ['themeMode', false]
     ].map(async ([option, defaultValue]) => {
@@ -36,12 +36,6 @@ const Options = {
       })
     })
 
-    if (!chrome.pageAction.show) {
-      document
-        .querySelector('[data-i18n="optionDynamicIcon"]')
-        .parentNode.remove()
-    }
-
     i18n()
   }
 }

src/drivers/webextension/js/popup.js

@@ -40,24 +40,26 @@ const Popup = {
       agent === 'chrome' || (await getOption('termsAccepted', false))
 
     if (termsAccepted) {
+      document.querySelector('.terms').classList.add('terms--hidden')
+      document.querySelector('.empty').classList.remove('empty--hidden')
+
       Popup.onGetDetections(await Popup.driver('getDetections'))
     } else {
-      document.querySelector('.terms').style.display = 'flex'
-      document.querySelector('.detections').style.display = 'none'
-      document.querySelector('.empty').style.display = 'none'
+      document.querySelector('.terms').classList.remove('terms--hidden')
+      document.querySelector('.detections').classList.add('detections--hidden')
+      document.querySelector('.empty').classList.add('empty--hidden')
 
       document.querySelector('.terms').addEventListener('click', async () => {
         await setOption('termsAccepted', true)
 
-        document.querySelector('.terms').remove()
-        document.querySelector('.detections').style.display = 'block'
-        document.querySelector('.empty').style.display = 'block'
+        document.querySelector('.terms').classList.remove('terms--hidden')
+        document
+          .querySelector('.detections')
+          .classList.add('.detections--hidden')
+        document.querySelector('.empty').classList.add('empty--hidden')
 
         chrome.runtime.sendMessage('getDetections', Popup.onGetDetections)
       })
-
-      // Apply internationalization
-      i18n()
     }
 
     // Alert
@@ -66,15 +68,24 @@ const Popup = {
       currentWindow: true
     })
 
-    document.querySelector(
-      '.alerts__link'
-    ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
-      `${url}`
-    )}`
+    if (url.startsWith('http')) {
+      document.querySelector('.alerts').classList.remove('alerts--hidden')
+
+      document.querySelector(
+        '.alerts__link'
+      ).href = `https://www.wappalyzer.com/alerts/manage?url=${encodeURIComponent(
+        `${url}`
+      )}`
+    } else {
+      document.querySelector('.alerts').classList.add('alerts--hidden')
+    }
 
     document
       .querySelector('.footer__settings')
       .addEventListener('click', () => chrome.runtime.openOptionsPage())
+
+    // Apply internationalization
+    i18n()
   },
 
   driver(func, args) {
@@ -115,12 +126,14 @@ const Popup = {
    * @param {Array} detections
    */
   async onGetDetections(detections = []) {
-    const pinnedCategory = await getOption('pinnedCategory')
-
-    if (detections.length) {
-      document.querySelector('.empty').remove()
+    if (!detections || !detections.length) {
+      return
     }
 
+    document.querySelector('.empty').classList.add('empty--hidden')
+
+    const pinnedCategory = await getOption('pinnedCategory')
+
     const categorised = Popup.categorise(detections)
 
     categorised.forEach(({ id, name, slug: categorySlug, technologies }) => {

src/drivers/webextension/manifest.json

@@ -14,7 +14,7 @@
     "38": "images/icon_38.png",
     "128": "images/icon_128.png"
   },
-  "page_action": {
+  "browser_action": {
     "default_icon": {
       "16": "images/icon_16.png",
       "19": "images/icon_19.png",