feat: add option to display framework icon (#21)

* save tabs data to storage

handle service worker for manifest v3

* refactor background. Split background into modules

* add branded icons

* update tabs manager

* add cache controller

* implement user local settings

* add settings controller UI

* change UI color

* Update src/components/Settings.vue

* use framework icon by default

#21 (comment)

* remove on-click-outside

* remove checkbox icons

* chore: update vta

---------

Co-authored-by: Den <os-denis.inozemcev@rakuten.com>
Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>
Co-authored-by: Den <denis.inozemtsev@btb.dev>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

Author: 4 people

chrome/manifest.json

@@ -28,7 +28,7 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["scripting"],
+  "permissions": ["scripting", "storage"],
   "host_permissions": [
     "<all_urls>"
   ],

firefox/manifest.json

@@ -27,7 +27,7 @@
     "background": {
       "scripts": ["background.js"]
     },
-    "permissions": ["https://*/*"],
+    "permissions": ["https://*/*", "storage"],
     "content_security_policy": "script-src 'self'; object-src 'self'",
     "web_accessible_resources": ["injected.js"]
 }

package.json

@@ -31,7 +31,7 @@
     "postcss-loader": "^3.0.0",
     "tailwindcss": "^1.3.5",
     "vue": "^2.6.12",
-    "vue-telescope-analyzer": "^0.9.19",
+    "vue-telescope-analyzer": "^0.9.21",
     "vuex": "^3.1.3",
     "webextension-polyfill": "^0.3.1"
   },

src/background/TabsStateService.js

@@ -0,0 +1,18 @@
+import CacheService from '../shared/CacheService'
+
+// persistent state storage
+export default class TabsStorage extends CacheService {
+  get key () {
+    return 'tabs'
+  }
+
+  async get () {
+    const cache = await super.get()
+    return cache || {}
+  }
+
+  async updateData (tabId, state) {
+    const cache = await this.get()
+    return this.set({ ...cache, [tabId]: state })
+  }
+}

src/background.js renamed to src/background/index.js

@@ -1,7 +1,8 @@
-import { IS_CHROME, IS_FIREFOX, isSupportExecutionVersion } from './utils'
-const browser = require('webextension-polyfill')
+import { IS_CHROME, IS_FIREFOX, isSupportExecutionVersion } from '../utils'
+import browser from 'webextension-polyfill'
+import TabsStateService from './TabsStateService'
 
-const tabsStorage = {}
+const tabsState = new TabsStateService()
 
 if (IS_CHROME && isSupportExecutionVersion) {
   /**
@@ -30,39 +31,75 @@ if (IS_CHROME && isSupportExecutionVersion) {
   )
 }
 
-browser.tabs.onActivated.addListener(handleActivated)
 browser.tabs.onUpdated.addListener(handleUpdated)
+browser.runtime.onStartup.addListener(() => {
+  // clear state on startup.
+  // note: chrome allows to use 'browser.storage.session' but it is available in chrome only.
+  // for firefox a 'window.session' can be considered as alternative.
+  // TODO: create polyfill for session store.
+  tabsState.clear()
+})
 
-function setIcon (details) {
+async function setIcon (details) {
   // because manifest version is different
   if (IS_FIREFOX) {
-    browser.browserAction.setIcon(details)
+    await browser.browserAction.setIcon(details)
   } else {
-    browser.action.setIcon(details)
+    await browser.action.setIcon(details)
   }
 }
 
+const setIconForTab = async (tabId) => {
+    const tabs = await tabsState.get()
+    const tab = tabs[tabId];
+    if (tab?.framework?.slug) {
+        const slug = tab.framework.slug
+        const iconPath = `icons/${slug}.png`
+        try {
+            await setIcon({tabId, path: iconPath});
+        } catch(e) {
+            await setIcon({
+                tabId,
+                path: 'icons/icon-128.png'
+              })
+        }
+    } else {
+        await setIcon({
+          tabId,
+          path: tab?.hasVue ? 'icons/icon-128.png' : 'icons/icon-grey-128.png'
+        })
+    }
+}
+
+browser.storage.local.onChanged.addListener(async (payload) => {
+    if (payload.settings) {
+        const tabs = await browser.tabs.query({});
+        tabs.forEach(tab => {
+            if (tab.id) {
+                setIconForTab(tab.id)
+            }
+        })
+    }
+})
+
 browser.runtime.onMessage.addListener(
   async function (message, sender, sendResponse) {
     if (message.action === 'analyze') {
       // when sending message from popup.js there's no sender.tab, so need to pass tabId
       const tabId = (sender.tab && sender.tab.id) || message.payload.tabId
-      setIcon({
-        tabId: tabId,
-        path: message.payload.hasVue ? 'icons/icon-128.png' : 'icons/icon-grey-128.png'
-      })
 
-      if (!tabsStorage[tabId]) {
-        tabsStorage[tabId] = message.payload
+      const tabs = await tabsState.get()
+      if (!tabs[tabId]) {
+        tabs[tabId] = message.payload
       } else {
         // temporary fix when hit CSP
         if (!message.payload.modules.length) delete message.payload.modules
         if (!message.payload.plugins.length) delete message.payload.plugins
 
-        tabsStorage[tabId] = { ...tabsStorage[tabId], ...message.payload }
+        tabs[tabId] = { ...tabs[tabId], ...message.payload }
       }
 
-      const showcase = tabsStorage[tabId]
+      const showcase = tabs[tabId]
       if (showcase.hasVue && !showcase.slug) {
         try {
           if (typeof EventSource === 'undefined') {
@@ -72,7 +109,7 @@ browser.runtime.onMessage.addListener(
           const sse = new EventSource(
           `https://service.vuetelescope.com?url=${message.payload.url}`
           )
-          sse.addEventListener('message', (event) => {
+          sse.addEventListener('message', async (event) => {
             try {
               const res = JSON.parse(event.data)
               if (!res.error && !res.isAdultContent) {
@@ -87,6 +124,7 @@ browser.runtime.onMessage.addListener(
                 if (!showcase.plugins.length && res.plugins.length) {
                   showcase.plugins = res.plugins
                 }
+                await tabsState.updateData(tabId, tabs[tabId])
               } else {
                 throw new Error('API call to VT failed')
               }
@@ -96,48 +134,28 @@ browser.runtime.onMessage.addListener(
           })
         } catch (err) {}
       }
-      // tabsStorage[tabId] = message.payload
+      await tabsState.updateData(tabId, tabs[tabId])
+      await setIconForTab(tabId);
     } else if (!sender.tab) {
       if (message.action === 'getShowcase') {
-        // this is likely popup requesting
-        // sendResponse doesn't work in Firefox 👀
-        // https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#Sending_a_synchronous_response
-        return Promise.resolve({ payload: tabsStorage[message.payload.tabId] })
-        // sendResponse({ payload: tabsStorage[message.payload.tabId] })
+        const tabs = await tabsState.get()
+        return { payload: tabs[message.payload.tabId] }
       }
     }
   }
 )
 
-// when tab clicked
-async function handleActivated ({ tabId, windowId }) {
-  setIcon({
-    tabId,
-    path: tabsStorage[tabId] && tabsStorage[tabId] && tabsStorage[tabId].hasVue ? 'icons/icon-128.png' : 'icons/icon-grey-128.png'
-  })
-  // chrome.tabs.query({ currentWindow: true, active: true }, function (tabs) {
-  //   const { id, url, status } = tabs[0]
-  //   if (status === 'complete') {
-  //     // tabsStorage[id].url = url
-  //   }
-  // })
-}
-
 // when tab updated
 async function handleUpdated (tabId, changeInfo, tabInfo) {
   if (changeInfo.status === 'complete') {
-    if (!tabsStorage[tabId]) return
+    const tabs = await tabsState.get()
+    if (!tabs[tabId]) return
     // tabsStorage[tabId].url = tabInfo.url
     browser.tabs.sendMessage(tabId, {
       from: 'background',
       to: 'injected',
       action: 'analyze',
       payload: {}
     })
-    // chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-    //   // send message to content script
-    //   chrome.tabs.sendMessage(tabs[0].id, { from: 'background', to: 'injected', payload: { message: 'hello from background with sendMessage' } })
-    // })
-    // console.log('tabsStorage', tabsStorage)
   }
 }