Update extension to use manifest version 3

elliotwaite · Nov 19, 2022 · 97cc385 · 97cc385
1 parent b1d3522
commit 97cc385
Show file tree

Hide file tree

Showing 17 changed files with 1,119 additions and 195 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1 @@
-/build/
+/build/*.zip
diff --git a/build/build_packages.py b/build/build_packages.py
@@ -0,0 +1,41 @@
+"""Creates a package.zip file that contains the extension's files."""
+from pathlib import Path
+import zipfile
+
+ROOT_DIR = Path(__file__).parent.parent
+EXTENSION_DIR = ROOT_DIR / 'extension'
+MANIFEST_V2_DIR = ROOT_DIR / 'manifest-v2'
+OUTPUT_DIR = Path(__file__).parent
+EXCLUDED_FILENAMES = ['.DS_Store']
+
+
+def create_package(filename, manifest_version=3):
+    package_path = OUTPUT_DIR / filename
+
+    print(f'\nGenerating package: {package_path}')
+    print(f'Zipped files:')
+    with zipfile.ZipFile(package_path, 'w') as z:
+        for path in EXTENSION_DIR.rglob('*'):
+            if path.name in EXCLUDED_FILENAMES:
+                continue
+
+            relative_path = path.relative_to(EXTENSION_DIR)
+
+            if (
+                manifest_version == 2
+                and (MANIFEST_V2_DIR / relative_path).exists()
+            ):
+                path = MANIFEST_V2_DIR / relative_path
+
+            z.write(path, relative_path)
+            print(f'    {path.relative_to(ROOT_DIR)}')
+
+
+def main():
+    create_package('package-chrome.zip')
+    create_package('package-firefox.zip', manifest_version=2)
+    create_package('package-edge.zip', manifest_version=2)
+
+
+if __name__ == '__main__':
+    main()
diff --git a/extension/background.js b/extension/background.js
@@ -1,21 +1,23 @@
-// All AJAX requests are made from this background script to avoid CORB errors.
+// All API requests are made through this background script to avoid CORB
+// errors and to cache results.
 
 let cache = {}
 let cacheTimes = []
 let cacheDuration = 600000  // Default is 10 mins.
 
-chrome.storage.sync.get({cacheDuration: 600000}, function(settings) {
-  if (settings && settings.cacheDuration !== undefined) {
-    cacheDuration = settings.cacheDuration
-  }
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.storage.sync.get({cacheDuration: 600000}, function(settings) {
+    if (settings && settings.cacheDuration !== undefined) {
+      cacheDuration = settings.cacheDuration
+    }
+  })
 })
 
-chrome.runtime.onMessage.addListener(
-  function(message, sender, sendResponse) {
-    if (message.query === 'videoApiRequest') {
-
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  switch (message.query) {
+    case 'videoApiRequest':
       // Remove expired cache data.
-      const now = new Date().getTime()
+      const now = Date.now()
       let numRemoved = 0
       for (const [fetchTime, videoId] of cacheTimes) {
         if (now - fetchTime > cacheDuration) {
@@ -32,38 +34,44 @@ chrome.runtime.onMessage.addListener(
       if (message.videoId in cache) {
         // Use cached data if it exists.
         sendResponse(cache[message.videoId])
+        return
+      }
 
-      } else {
-        // Otherwise, fetch new data and cache it.
-        fetch('https://returnyoutubedislikeapi.com/Votes?videoId=' + message.videoId)
-          .then(response => {
-            if (!response.ok) {
-              sendResponse(null)
-            } else {
-              response.json().then(data => {
-                const likesData = {
-                  'likes': data.likes,
-                  'dislikes': data.dislikes,
-                }
-                if (!(message.videoId in cache)) {
-                  cache[message.videoId] = likesData
-                  cacheTimes.push([new Date().getTime(), message.videoId])
-                }
-                sendResponse(likesData)
-              })
-            }
-          })
+      // Otherwise, fetch new data and cache it.
+      fetch('https://returnyoutubedislikeapi.com/Votes?videoId=' + message.videoId)
+        .then(response => {
+          if (!response.ok) {
+            sendResponse(null)
+          } else {
+            response.json().then(data => {
+              const likesData = {
+                'likes': data.likes,
+                'dislikes': data.dislikes,
+              }
+              if (!(message.videoId in cache)) {
+                cache[message.videoId] = likesData
+                cacheTimes.push([Date.now(), message.videoId])
+              }
+              sendResponse(likesData)
+            })
+          }
+        })
 
-        // Returning `true` signals to the browser that we will send our
-        // response asynchronously using `sendResponse()`.
-        return true
-      }
+      // Returning `true` signals to the browser that we will send our
+      // response asynchronously using `sendResponse()`.
+      return true
 
-    } else if (message.query === 'insertCss') {
-      chrome.tabs.insertCSS(sender.tab.id, {file: message.url})
+    case 'insertCss':
+      chrome.scripting.insertCSS({
+        target: {
+          tabId: sender.tab.id,
+        },
+        files: message.files,
+      })
+      break
 
-    } else if (message.query === 'updateSettings') {
+    case 'updateSettings':
       cacheDuration = message.cacheDuration
-    }
+      break
   }
-)
+})
diff --git a/extension/content-script.js b/extension/content-script.js
@@ -137,31 +137,6 @@ function exponentialRatingWidthPercentage(rating) {
   return 100 * Math.pow(2, 10 * (rating - 1))
 }
 
-// function getLikesToViewsPercentage(likes, views) {
-//   if (likes <= 0) return 0
-//   if (likes >= views) return 100
-//
-//   let ratio = likes / views
-//   let r = (ratio ** 0.21032389998435974 - 0.4999999701976776) / 0.09012361615896225
-//   let v = (Math.log(views) - 12.015865325927734) / 2.8472495079040527
-//
-//   let m0 = 0.040817804634571075
-//   let m1 = -0.27621328830718994
-//   let m2 = -0.05106991529464722
-//   let m3 = -0.02893015556037426
-//   let mean = m0 + m1 * v + m2 * v ** 2 + m3 * v ** 3
-//
-//   let s0 = -0.09283683449029922
-//   let s1 = -0.13813409209251404
-//   let s2 = 0.003354990854859352
-//   let s3 = 0.004593323916196823
-//   let log_std = s0 + s1 * v + s2 * v ** 2 + s3 * v ** 3
-//   let std = Math.exp(log_std)
-//
-//   let cdf = jStat.normal.cdf(r, mean, std)
-//   return cdf * 100
-// }
-
 function getRatingBarHtml(videoData) {
   let ratingElement
   if (videoData.rating == null) {
@@ -514,50 +489,51 @@ function handleDomMutations() {
 // An observer for watching changes to the body element.
 const mutationObserver = new MutationObserver(handleDomMutations)
 
-function insertCss(url) {
-  chrome.runtime.sendMessage({
-    query: 'insertCss',
-    url: url,
-  })
-}
-
 chrome.storage.sync.get(DEFAULT_USER_SETTINGS, function(storedSettings) {
   // In Firefox, `storedSettings` will be undeclared if not previously set.
   if (storedSettings) {
     userSettings = storedSettings
   }
 
+  const cssFiles = []
   if (userSettings.barHeight !== 0) {
-    insertCss('css/bar.css')
+    cssFiles.push('css/bar.css')
 
     if (userSettings.barPosition === 'top') {
-      insertCss('css/bar-top.css')
+      cssFiles.push('css/bar-top.css')
     } else {
-      insertCss('css/bar-bottom.css')
+      cssFiles.push('css/bar-bottom.css')
     }
 
     if (userSettings.barSeparator) {
       if (userSettings.barPosition === 'top') {
-        insertCss('css/bar-top-separator.css')
+        cssFiles.push('css/bar-top-separator.css')
       } else {
-        insertCss('css/bar-bottom-separator.css')
+        cssFiles.push('css/bar-bottom-separator.css')
       }
     }
 
     if (userSettings.barTooltip) {
-      insertCss('css/bar-tooltip.css')
+      cssFiles.push('css/bar-tooltip.css')
       if (userSettings.barPosition === 'top') {
-        insertCss('css/bar-top-tooltip.css')
+        cssFiles.push('css/bar-top-tooltip.css')
       } else {
-        insertCss('css/bar-bottom-tooltip.css')
+        cssFiles.push('css/bar-bottom-tooltip.css')
       }
     }
 
     if (userSettings.useOnVideoPage) {
-      insertCss('css/bar-video-page.css')
+      cssFiles.push('css/bar-video-page.css')
     }
   }
 
+  if (cssFiles.length > 0) {
+    chrome.runtime.sendMessage({
+      query: 'insertCss',
+      files: cssFiles,
+    })
+  }
+
   document.documentElement.style.setProperty('--ytrb-bar-height', userSettings.barHeight + 'px')
   document.documentElement.style.setProperty('--ytrb-bar-opacity',  userSettings.barOpacity / 100)
 

diff --git a/extension/lib/getmdl-select.min.css.map b/extension/lib/getmdl-select.min.css.map
diff --git a/extension/lib/getmdl-select.min.js.map b/extension/lib/getmdl-select.min.js.map
diff --git a/extension/lib/jquery-3.6.0.min.js b/extension/lib/jquery-3.6.0.min.js
diff --git a/extension/lib/jquery-3.6.1.min.js b/extension/lib/jquery-3.6.1.min.js
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,57 +1,61 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "Thumbnail Rating Bar for YouTube™",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "Displays a rating bar (likes/dislikes) on the bottom of every YouTube™ video thumbnail.",
   "author": "Elliot Waite",
   "icons": {
     "96": "icons/icon96.png",
     "128": "icons/icon128.png"
   },
-  "browser_action": {
+  "action": {
     "default_icon": "icons/icon96.png",
     "default_title": "Settings",
     "default_popup": "options.html"
   },
   "options_ui": {
     "page": "options.html",
-    "chrome_style": false
+    "browser_style": false
   },
   "background": {
-    "scripts": [
-      "background.js"
-    ],
-    "persistent": false
+    "service_worker": "background.js"
   },
   "content_scripts": [
     {
       "matches": [
         "*://*.youtube.com/*"
       ],
       "js": [
-        "lib/jquery-3.6.0.min.js",
+        "lib/jquery-3.6.1.min.js",
         "content-script.js"
       ],
       "run_at": "document_end"
     }
   ],
   "permissions": [
-    "*://*.youtube.com/*",
-    "*://*.returnyoutubedislikeapi.com/*",
+    "scripting",
     "storage"
   ],
-  "web_accessible_resources": [
-    "css/bar-blue-gray.css",
-    "css/bar-blue-gray-video-page.css",
-    "css/bar-bottom-separator.css",
-    "css/bar-bottom-tooltip.css",
-    "css/bar-bottom.css",
-    "css/bar-green-red.css",
-    "css/bar-green-red-video-page.css",
-    "css/bar-tooltip.css",
-    "css/bar-top-separator.css",
-    "css/bar-top-tooltip.css",
-    "css/bar-top.css",
-    "css/bar.css"
-  ]
+  "host_permissions": [
+    "*://*.youtube.com/*",
+    "*://*.returnyoutubedislikeapi.com/*"
+  ],
+  "web_accessible_resources": [{
+    "resources": [
+      "css/bar-blue-gray.css",
+      "css/bar-blue-gray-video-page.css",
+      "css/bar-bottom-separator.css",
+      "css/bar-bottom-tooltip.css",
+      "css/bar-bottom.css",
+      "css/bar-green-red.css",
+      "css/bar-green-red-video-page.css",
+      "css/bar-tooltip.css",
+      "css/bar-top-separator.css",
+      "css/bar-top-tooltip.css",
+      "css/bar-top.css",
+      "css/bar.css"
+    ],
+    "matches": [],
+    "extension_ids": []
+  }]
 }
diff --git a/extension/options.html b/extension/options.html
@@ -10,7 +10,7 @@
 
     <script src="lib/material.min.js"></script>
     <script src="lib/getmdl-select.min.js"></script>
-    <script src="lib/jquery-3.6.0.min.js"></script>
+    <script src="lib/jquery-3.6.1.min.js"></script>
 </head>
 <body>
 
@@ -185,4 +185,4 @@ <h6 class="h6"><a href="https://github.com/elliotwaite/thumbnail-rating-bar-for-
 <script src="options.js"></script>
 
 </body>
-</html>
+</html>