asynchronous data messaging between tabs ftw

rossmoody · Jul 8, 2020 · e49db26 · e49db26
1 parent 40f1830
commit e49db26
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 53 deletions.
diff --git a/public/extension/background.js b/public/extension/background.js
@@ -1,34 +1,44 @@
 let id = 1
+let viewTabUrl = null
+
+function sendMessagePromise(tabId, item) {
+  viewTabUrl = chrome.runtime.getURL('index.html?id=' + id++)
+
+  return new Promise((resolve, reject) => {
+    chrome.tabs.sendMessage(tabId, item, response => {
+      if (response && response.complete) {
+        buildTab(response.data)
+        resolve()
+      } else {
+        reject('Something wrong')
+      }
+    })
+  })
+}
 
 chrome.browserAction.onClicked.addListener(function () {
-  // Inject webpack script that finds and processes all SVGs on the page
-  // Fires as soon as the extension icon is clicked
-  chrome.tabs.executeScript(null, { file: './dist/gather.js' })
+  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+    sendMessagePromise(tabs[0].id, {
+      message: 'start_gobbling',
+    })
+  })
 })
 
-chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
-  let targetId = null
-  const viewTabUrl = chrome.extension.getURL('index.html?id=' + id++)
-  chrome.tabs.create({ url: viewTabUrl }, function (tab) {
-    targetId = tab.id
-  })
+function buildTab(data) {
+  chrome.tabs.create({ url: viewTabUrl })
 
   chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
-    if (tabId != targetId || changedProps.status != 'complete') return
+    if (changedProps.status != 'complete') return
 
     chrome.tabs.onUpdated.removeListener(listener)
 
-    const views = chrome.extension.getViews()
+    var views = chrome.extension.getViews()
 
     for (const view of views) {
       if (view.location.href == viewTabUrl) {
-        // This function is running from the window object
-        // It is being imported from the index.html script src
-        view.gobble(message)
+        view.gobble(data)
         break
       }
     }
   })
-
-  return true
-})
+}
diff --git a/public/extension/icons/favicon.ico b/public/extension/icons/favicon.ico
diff --git a/public/extension/index.html b/public/extension/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SVG Gobbler</title>
     <link rel="stylesheet" href="./dist/style.css" />
+    <link rel="shortcut icon" href="./icons/favicon.ico" type="image/x-icon" />
   </head>
   <body>
     <div class="gob">

diff --git a/public/extension/manifest.json b/public/extension/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "SVG Gobbler",
-  "version": "1.19",
+  "version": "2.0",
   "description": "Download SVGs from the web",
   "icons": {
     "16": "./icons/icon16.png",
@@ -20,5 +20,11 @@
   "background": {
     "scripts": ["background.js"]
   },
-  "permissions": ["activeTab", "tabs"]
+  "permissions": ["activeTab", "tabs"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["./dist/gather.js"]
+    }
+  ]
 }
diff --git a/src/scripts/controller.js b/src/scripts/controller.js
@@ -1,7 +1,5 @@
 import processSVGs from './process-svgs'
 
-require('../styles/index.scss')
-
 function noGobbles() {
   const style = document.createElement('style')
   style.innerHTML = `
@@ -27,17 +25,17 @@ function noGobbles() {
           opacity: 0;
           top: 0;
         }
-      
+
         20% {
           opacity: 1;
           top: 90px;
         }
-      
+
         90% {
           opacity: 1;
           top: 90px;
         }
-      
+
         100% {
           opacity: 0;
           top: 0px;
@@ -58,23 +56,16 @@ function noGobbles() {
   }, 2900)
 }
 
-async function init() {
-  const data = await processSVGs()
-  try {
-    if (data.length === 0) {
-      noGobbles()
-    } else {
-      // Weird little hack I stumbled upon so that
-      // sendMessage waits for return of Promise
-      // before sending message
-      setTimeout(() => {
-        // eslint-disable-next-line
-        chrome.runtime.sendMessage(data)
-      }, 1)
-    }
-  } catch (e) {
-    console.log(e)
+// eslint-disable-next-line
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  if (request.message === 'start_gobbling') {
+    processSVGs().then(result => {
+      if (result.length === 0) {
+        noGobbles()
+      } else {
+        sendResponse({ complete: true, data: result })
+      }
+    })
+    return true
   }
-}
-
-init()
+})
diff --git a/src/scripts/create-ui.js b/src/scripts/create-ui.js
@@ -1,6 +1,8 @@
 import createCards from './create-card'
 import download from './download'
 
+require('../styles/index.scss')
+
 const createUI = data => {
   const container = document.querySelector('.gob__container')
   const countCont = document.querySelector('.gob__countCont')

diff --git a/src/scripts/process-svgs.js b/src/scripts/process-svgs.js
@@ -14,30 +14,23 @@ function removeDups(arr, comp) {
 function processSVGs() {
   const pageEles = findSVGs()
   const filteredSVGs = pageEles
-    // Runs each element through class creation
-    // Clones the original element
     .map(ele => new SVG(ele))
-    // Determines what type of SVG it is
-    // Also if it has a url to fetch
     .map(ele => ele.determineType())
-    // Filters out any elements that don't have
-    // a type property on the class
     .filter(ele => ele.type)
     .map(ele => ele.buildSpriteString())
-    // Determines size of orig ele
     .map(ele => ele.determineSize())
     .map(async svg => {
       const result = await svg.fetchSvg()
       result.checkForWhite()
+      delete result.origEle
       return result
     })
 
-  const uniqueSvgs = Promise.all(filteredSVGs).then(result => {
+  const data = Promise.all(filteredSVGs).then(result => {
     return removeDups(result, 'svgString')
   })
 
-  console.log(uniqueSvgs)
-  return uniqueSvgs
+  return data
 }
 
 export default processSVGs