Moving to webextension-polyfill

cjmaxik · Feb 27, 2021 · 91f730d · 91f730d
1 parent 56bdec4
commit 91f730d
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 72 deletions.
diff --git a/.babelrc b/.babelrc
@@ -10,4 +10,4 @@
   "plugins": [
     "@babel/plugin-transform-runtime"
   ]
-}
+}
diff --git a/source/background.js b/source/background.js
@@ -1,15 +1,14 @@
-// eslint-disable-next-line import/no-unassigned-import
 import optionsStorage from './options-storage.js'
 import { readFromCache, removeExpiredItems } from './cache'
 
 // Listeners for a content scripts
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+browser.runtime.onMessage.addListener((request, _sender) => {
   if (request.query === 'player') {
-    queryPlayer(request).then(sendResponse)
+    return Promise.resolve(queryPlayer(request))
   }
 
   if (request.query === 'options') {
-    queryOptions().then(sendResponse)
+    return Promise.resolve(queryOptions())
   }
 
   return true
@@ -22,7 +21,7 @@ const queryPlayer = async (request) => {
   return await readFromCache(request.steamId, async function () {
     await delay(request.key)
     const response = await fetch('https://api.truckersmp.com/v2/player/' + request.steamId + '?ref=truckersmp-steam-helper')
-    return response.json()
+    return await response.json()
   })
 }
 
@@ -33,5 +32,5 @@ const queryOptions = async (request) => {
 
 // Cache governor
 removeExpiredItems()
-chrome.alarms.create({ periodInMinutes: 10.0 })
-chrome.alarms.onAlarm.addListener(removeExpiredItems)
+browser.alarms.create({ periodInMinutes: 10.0 })
+browser.alarms.onAlarm.addListener(removeExpiredItems)
diff --git a/source/contentScripts/friends.js b/source/contentScripts/friends.js
@@ -2,33 +2,32 @@ const friendTemplate = require('../templates/friend.hbs')
 const inviteTemplate = require('../templates/invite.hbs')
 
 const init = () => {
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       query: 'options'
-    },
-    (options) => {
-      warningMessage()
+    }
+  ).then((options) => {
+    warningMessage()
 
-      if (options.showInFriends) {
-        const friends = document.querySelectorAll('div.friend_block_v2')
-        friends.forEach((friend, key) => render(friend, 'div.friend_block_content', friendTemplate, key))
-      }
+    if (options.showInFriends) {
+      const friends = document.querySelectorAll('div.friend_block_v2')
+      friends.forEach((friend, key) => render(friend, 'div.friend_block_content', friendTemplate, key))
+    }
 
-      if (options.showInInvites) {
-        const invites = document.querySelectorAll('div.invite_row')
-        invites.forEach((invite, key) => render(invite, 'div.invite_block_details', inviteTemplate, key))
-      }
+    if (options.showInInvites) {
+      const invites = document.querySelectorAll('div.invite_row')
+      invites.forEach((invite, key) => render(invite, 'div.invite_block_details', inviteTemplate, key))
+    }
 
-      if (options.friendsMaxWidth) {
-        const pageContent = document.querySelectorAll('div.pagecontent')
-        if (pageContent.length) pageContent.forEach(element => element.classList.add('max_width'))
-      }
+    if (options.friendsMaxWidth) {
+      const pageContent = document.querySelectorAll('div.pagecontent')
+      if (pageContent.length) pageContent.forEach(element => element.classList.add('max_width'))
     }
-  )
+  })
 }
 
 const warningMessage = () => {
-  const template = `<div class="search_results_none">Due to <img src="${chrome.extension.getURL('icons/tmp.png')}" alt="Icon"> API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK</div>`
+  const template = `<div class="search_results_none">Due to <img src="${browser.extension.getURL('icons/tmp.png')}" alt="Icon"> API limits, new data might load with a noticeable delay. Be patient 😉 --CJMAXiK</div>`
   const titleBarSelector = document.querySelectorAll('div.profile_friends.title_bar')
 
   if (titleBarSelector) titleBarSelector[0].insertAdjacentHTML('beforebegin', template)
@@ -43,27 +42,26 @@ const render = (mainSelector, targetSelector, template, key) => {
 
   if (!isSteamId(steamId)) return
 
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       query: 'player',
       steamId,
       key
-    },
-    (playerInfo) => {
-      let player = null
-      if (playerInfo.data && !playerInfo.data.error) {
-        player = playerInfo.data.response
-      }
-
-      const blockContent = mainSelector.querySelector(targetSelector)
-      blockContent.insertAdjacentHTML('beforeend', template(
-        {
-          ...player,
-          iconURL: chrome.extension.getURL('icons/tmp.png')
-        }
-      ))
     }
-  )
+  ).then((playerInfo) => {
+    let player = null
+    if (playerInfo.data && !playerInfo.data.error) {
+      player = playerInfo.data.response
+    }
+
+    const blockContent = mainSelector.querySelector(targetSelector)
+    blockContent.insertAdjacentHTML('beforeend', template(
+      {
+        ...player,
+        iconURL: browser.extension.getURL('icons/tmp.png')
+      }
+    ))
+  })
 }
 
 // Check for URL changes (friends menu is ajax)

diff --git a/source/contentScripts/profile.js b/source/contentScripts/profile.js
@@ -1,22 +1,21 @@
 const template = require('../templates/profile.hbs')
 
 const init = () => {
-  return chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       query: 'options'
-    },
-    (options) => {
-      let steamId = null
-      steamId = getSteamId()
-
-      if (!steamId) {
-        console.log('steamId cannot be found! Aborted.')
-        return
-      }
+    }
+  ).then((options) => {
+    let steamId = null
+    steamId = getSteamId()
 
-      if (options.showInProfile) renderPlayerInfo(steamId, options)
+    if (!steamId) {
+      console.log('steamId cannot be found! Aborted.')
+      return
     }
-  )
+
+    if (options.showInProfile) renderPlayerInfo(steamId, options)
+  })
 }
 
 const getSteamId = () => {
@@ -36,21 +35,20 @@ const getSteamId = () => {
 }
 
 const renderPlayerInfo = (steamId, options) => {
-  chrome.runtime.sendMessage(
+  browser.runtime.sendMessage(
     {
       query: 'player',
       steamId,
       key: 0
-    },
-    (playerInfo) => {
-      let player = null
-      if (playerInfo.data && !playerInfo.data.error) {
-        player = playerInfo.data.response
-      }
-
-      return render(player, options, playerInfo.data.timeout !== 0)
     }
-  )
+  ).then((playerInfo) => {
+    let player = null
+    if (playerInfo.data && !playerInfo.data.error) {
+      player = playerInfo.data.response
+    }
+
+    return render(player, options, playerInfo.data.timeout !== 0)
+  })
 }
 
 const render = (player, options, isCached) => {
@@ -75,7 +73,9 @@ const render = (player, options, isCached) => {
 
   selector.insertAdjacentHTML(mainTarget, template(
     {
-      ...player, ...options, isCached, iconURL: chrome.extension.getURL('icons/tmp.png')
+      ...player, ...options,
+      isCached,
+      iconURL: browser.extension.getURL('icons/tmp.png')
     }
   ))
 }

diff --git a/source/manifest.json b/source/manifest.json
@@ -23,7 +23,6 @@
     "alarms"
   ],
   "options_ui": {
-    "chrome_style": false,
     "page": "options.html"
   },
   "background": {
@@ -72,6 +71,7 @@
         "*://steamcommunity.com/profiles/*/recommended*"
       ],
       "js": [
+        "browser-polyfill.min.js",
         "profile.js"
       ],
       "css": [
@@ -86,6 +86,7 @@
         "*://steamcommunity.com/profiles/*/friends/*"
       ],
       "js": [
+        "browser-polyfill.min.js",
         "friends.js"
       ],
       "css": [
@@ -96,4 +97,4 @@
   "web_accessible_resources": [
     "icons/tmp.png"
   ]
-}
+}
diff --git a/source/options.html b/source/options.html
@@ -4,7 +4,6 @@
   <meta charset="utf-8">
   <title>Options</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
   <link rel="stylesheet" href="https://unpkg.com/chota@latest">
   <link rel="stylesheet" href="options.css">
 </head>

diff --git a/source/options.js b/source/options.js
@@ -1,7 +1,6 @@
 import optionsStorage from './options-storage.js'
 
-if (window.matchMedia &&
-  window.matchMedia('(prefers-color-scheme: dark)').matches) {
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   document.body.classList.add('dark')
 }
 
@@ -12,8 +11,8 @@ const links = document.getElementsByClassName('openURL')
 Array.from(links).forEach((element) => {
   element.addEventListener('click', (event) => {
     const url = event.target.getAttribute('data-href')
-    if (url) chrome.tabs.create({ url })
+    if (url) browser.tabs.create({ url })
   })
 })
 
-document.getElementById('version').innerHTML = chrome.runtime.getManifest().version
+document.getElementById('version').innerHTML = browser.runtime.getManifest().version