add design

Author: floflosciante

package-lock.json

@@ -18,6 +18,8 @@
     "watch:dev": "cross-env HMR=true npm run build:dev -- --watch"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.8.7",
+    "@lottiefiles/lottie-player": "^0.5.1",
     "axios": "^0.19.0",
     "vue": "^2.6.10",
     "vue-telemetry-analyzer": "^0.1.6",
@@ -48,6 +50,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.0.1",
     "file-loader": "^5.0.2",
+    "google-fonts-webpack-plugin": "^0.4.4",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
     "puppeteer": "^2.1.1",

package.json

@@ -4,36 +4,44 @@ import store from './store'
 
 // map to save id + url for checking if allready post
 let domainsVisited = []
+let dataMap = new Map()
 
 // send url to analyzer
-async function sendUrl(url) {
+async function sendUrl(url, domain) {
+
+  //loading
+  store.commit('SET_ISLOADING', true);
+
   try {
     await axios({
       method: 'GET',
-      url: `https://vue-telemetry.netlify.com/api/analyze?url=${url}`,
+      url: `https://vue-telemetry.netlify.com/api/analyze?url=${url}&src=extension`,
       auth: {
         username: 'nuxt-admin',
         password: 'vue-telemetry-protected-area'
-      }
+      },
     }).then(({ data }) => {
-      store.dispatch('setData', data)
+      //not need tag meta
+      delete data.url
+      delete data.hostname
+      delete data.domain
+      delete data.screenshot
+      delete data.meta
+      dataMap.set(domain, data)
+      store.commit('SET_DATA', dataMap)
     }).catch((err) => {
-      console.error(err)
+      store.commit('SET_CURRENTDOMAIN', "WSError")
     })
   } catch (e) {
-    console.error(e)
+    store.commit('SET_CURRENTDOMAIN', "WSError")
   }
+  store.commit('SET_ISLOADING', false);
 }
 
-// when tab updated with new url
-async function handleUpdated(tabId, changeInfo) {
-  if (changeInfo.url) {
-    const { response } = await detectVue(tabId)
-    // check if not already analyzed
-    if (response.vueInfo.hasVue && !domainsVisited.includes(response.vueInfo.domain)) {
-      domainsVisited.push(response.vueInfo.domain)
-      sendUrl(changeInfo.url, tabId)
-    }
+// when tab updated 
+async function handleUpdated(tabId, changeInfo, tabInfo) {
+  if (changeInfo.status == "complete") {
+    await detectVue(tabId, tabInfo.url)
   }
 }
 
@@ -43,25 +51,64 @@ tabs.onUpdated.addListener(handleUpdated)
 async function handleActivated() {
   // get active tab
   tabs.query({ currentWindow: true, active: true }).then(async function (tabsArray) {
-    
-    const { response } = await detectVue(tabsArray[0].id)
-    // check if not already analyzed
-    if (response.vueInfo.hasVue && !domainsVisited.includes(response.vueInfo.domain)) {
-      domainsVisited.push(response.vueInfo.domain)
-      sendUrl(tabsArray[0].url, tabsArray[0].id)
-    }
+    await detectVue(tabsArray[0].id, tabsArray[0].url)
   })
 }
 
 tabs.onActivated.addListener(handleActivated)
 
-function detectVue(tabId) {
+//function to detect vue and send url
+async function detectVue(tabId, url) {
+
+  store.commit('SET_CURRENTDOMAIN', 'noVue')
+
+  //Check vue
+  await hasVue(tabId).then(({ response }) => {
+
+    //set store current domain
+
+    if (response.vueInfo.hasVue) {
+
+      store.commit('SET_CURRENTDOMAIN', response.vueInfo.domain)
+
+      browser.browserAction.setIcon({
+        tabId: tabId,
+        path: {
+          16: `icons/icon-nuxtjs.png`,
+          48: `icons/icon-nuxtjs.png`,
+          128: `icons/icon-nuxtjs.png`
+        }
+      })
+    }
+
+    // if not already analyzed
+    if (!domainsVisited.includes(response.vueInfo.domain)) {
+
+      domainsVisited.push(response.vueInfo.domain)
+
+      //send url and change icon extension
+      if (response.vueInfo.hasVue) {
+        sendUrl(url, response.vueInfo.domain)
+      }
+    }
+
+    return response.vueInfo.hasVue;
+
+  }).catch((err) => {
+    //set store current domain to error 
+    store.commit('SET_CURRENTDOMAIN', "noVUe")
+    return false;
+  })
+}
+
+//check vue in detector.js and get response
+function hasVue(tabId) {
   return new Promise(resolve => {
     browser.tabs.sendMessage(
       tabId,
       { greeting: '' }
-      ).then(response => {
-        resolve(response)
-      })
+    ).then(response => {
+      resolve(response)
     })
-  }
+  })
+}

src/background.js

@@ -1,5 +1,6 @@
 const isBrowser = typeof navigator !== 'undefined'
 const isFirefox = isBrowser && navigator.userAgent.indexOf('Firefox') > -1
+import "@babel/polyfill";
 
 if (document instanceof HTMLDocument) {
   installScript(detectVue)
@@ -27,7 +28,23 @@ browser.runtime.onMessage.addListener(handleMessage)
 
 function detectVue(win) {
   setTimeout(() => {
-    const hasVue = Boolean(window.Vue || window.$nuxt || [...document.querySelectorAll('*')].map((el) => Boolean(el.__vue__)).filter(Boolean).length)
+    const hasVue = Boolean(window.Vue || window.$nuxt) //|| [...document.querySelectorAll('*')].map((el) => Boolean(el.__vue__)).filter(Boolean).length)
+
+    if (hasVue == false) {
+      const all = document.querySelectorAll('*')
+      let el
+      for (let i = 0; i < all.length; i++) {
+        if (all[i].__vue__) {
+          el = all[i]
+          break
+        }
+      }
+      if (el) {
+        hasVue = true;
+      }
+    }
+
+
     win.postMessage({
       __vue_telemetry__: true,
       domain: document.domain,
@@ -38,7 +55,7 @@ function detectVue(win) {
 
 function installScript(fn) {
   const source = ';(' + fn.toString() + ')(window)'
-  
+
   if (isFirefox) {
     // eslint-disable-next-line no-eval
     window.eval(source) // in Firefox, this evaluates on the content window