Version 5: Manifest v3 and Material UI v5

app/_locales/en/messages.json

@@ -82,6 +82,9 @@
   "OptionsPerDeviceWarning": {
     "message": "<strong>Note</strong>: All settings are per-device. If you have YouTube Popout Player installed on multiple devices, you can configure settings differently for each device."
   },
+  "OptionsPageForceDarkMode": {
+    "message": "Force Dark Mode for Options panel"
+  },
   "OptionsTabNameBehavior": {
     "message": "Behavior"
   },
@@ -161,7 +164,10 @@
     "message": "Autoplay Video(s)"
   },
   "OptionsBehaviorAutoplayDescription": {
-    "message": "This setting controls whether or not the video in the popout player begins playing automatically when the popout player is opened. <strong>The default for this setting is enabled.</strong><blockquote><strong>Note</strong>: Autoplaying videos with sound are commonly blocked by default in modern browsers; you may need to manually enable/allow autoplay through your browser's settings for this to work correctly.</blockquote>"
+    "message": "This setting controls whether or not the video in the popout player begins playing automatically when the popout player is opened. <strong>The default for this setting is enabled.</strong>"
+  },
+  "AutoplayVideosBlockedTip": {
+    "message": "<strong>Note</strong>: Autoplaying videos with sound are commonly blocked by default in modern browsers; you may need to manually enable/allow autoplay through your browser's settings for this to work correctly."
   },
   "OptionsBehaviorLoopLabel": {
     "message": "Loop Video(s)"
@@ -283,6 +289,12 @@
   "HeightLabel": {
     "message": "Height"
   },
+  "TopLabel": {
+    "message": "Top"
+  },
+  "LeftLabel": {
+    "message": "Left"
+  },
   "InfoCurrentScreenResolutionLabel": {
     "message": "Current Screen Resolution"
   },

app/manifest.json

@@ -2,7 +2,7 @@
   "name": "__MSG_ExtensionName__",
   "short_name": "__MSG_ExtensionShortName__",
   "description": "__MSG_ExtensionDescription__",
-  "manifest_version": 2,
+  "manifest_version": 3,
   "default_locale": "en",
   "author": "Ryan Thaut",
   "homepage_url": "https://rthaut.github.io/YouTubePopoutPlayer/",
@@ -18,11 +18,10 @@
     "128": "images/icon-128.png"
   },
   "background": {
-    "scripts": [
-      "scripts/background.js"
-    ]
+    "__chrome|edge__service_worker": "scripts/background.js",
+    "__firefox__scripts": ["scripts/background.js"]
   },
-  "browser_action": {
+  "action": {
     "default_icon": {
       "16": "images/icon-16.png",
       "19": "images/icon-19.png",
@@ -90,14 +89,22 @@
     "__firefox__page": "pages/options.html?vendor=firefox",
     "open_in_tab": false
   },
-  "permissions": [
+  "declarative_net_request" : {
+    "rule_resources" : [{
+      "id": "rules",
+      "enabled": true,
+      "path": "rules.json"
+    }]
+  },
+  "host_permissions": [
     "*://*.youtube.com/*",
-    "*://*.youtube-nocookie.com/*",
+    "*://*.youtube-nocookie.com/*"
+  ],
+  "permissions": [
     "contextMenus",
+    "declarativeNetRequest",
     "notifications",
-    "storage",
-    "webRequest",
-    "webRequestBlocking"
+    "storage"
   ],
   "optional_permissions": [
     "tabs"
@@ -106,12 +113,12 @@
     "cookies",
     "tabs"
   ],
-  "__chrome__minimum_chrome_version": "51.0",
-  "__edge__minimum_chrome_version": "79.0.309",
-  "__firefox__applications": {
+  "__chrome__minimum_chrome_version": "90",
+  "__edge__minimum_chrome_version": "91",
+  "__firefox__browser_specific_settings": {
     "gecko": {
       "id": "{85b42b8f-49cd-4935-aeca-a6b32dd6ac9f}",
-      "strict_min_version": "62.0"
+      "strict_min_version": "109.0"
     }
   }
 }

app/rules.json

@@ -0,0 +1,44 @@
+[
+  {
+    "id": 1,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        {
+          "header": "Referer",
+          "operation": "set",
+          "value": "https://www.youtube.com/"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "||youtube.com/embed*popout=1",
+      "resourceTypes": [
+        "main_frame",
+        "sub_frame"
+      ]
+    }
+  },
+  {
+    "id": 2,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        {
+          "header": "Referer",
+          "operation": "set",
+          "value": "https://www.youtube-nocookie.com/"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "||youtube-nocookie.com/embed*popout=1",
+      "resourceTypes": [
+        "main_frame",
+        "sub_frame"
+      ]
+    }
+  }
+]

app/scripts/.eslintrc.json

@@ -11,6 +11,7 @@
   },
   "extends": [
     "eslint:recommended",
+    "prettier",
     "plugin:react/recommended"
   ],
   "parserOptions": {

app/scripts/background.js

@@ -2,16 +2,10 @@ import { OnCommandEventHandler } from "./background/commands";
 import { InitMenus } from "./background/menus";
 import { OpenPopoutBackgroundHelper } from "./background/popout";
 import { OnInstalled, OnRuntimeMessage } from "./background/runtime";
-import {
-  GetExtraInfoSpec,
-  GetFilter,
-  OnBeforeSendHeaders,
-  OnSendHeaders,
-} from "./background/webRequest";
 import Options from "./helpers/options";
 import { IsVideoURL } from "./helpers/youtube";
 
-browser.browserAction.onClicked.addListener(() => {
+browser.action.onClicked.addListener(() => {
   if (browser.runtime.openOptionsPage) {
     browser.runtime.openOptionsPage();
   } else {
@@ -29,18 +23,6 @@ browser.runtime.onInstalled.addListener(OnInstalled);
 
 browser.runtime.onMessage.addListener(OnRuntimeMessage);
 
-browser.webRequest.onBeforeSendHeaders.addListener(
-  OnBeforeSendHeaders,
-  GetFilter("onBeforeSendHeaders"),
-  GetExtraInfoSpec("onBeforeSendHeaders"),
-);
-
-browser.webRequest.onSendHeaders.addListener(
-  OnSendHeaders,
-  GetFilter("onSendHeaders"),
-  GetExtraInfoSpec("onSendHeaders"),
-);
-
 browser.tabs.onUpdated.addListener(async (tabId, changeInfo) => {
   if (changeInfo.url && IsVideoURL(changeInfo.url, false)) {
     if (await Options.GetLocalOption("advanced", "autoOpen")) {

app/scripts/background/menus.js

@@ -5,74 +5,86 @@ import {
 import Options from "../helpers/options";
 import { OpenPopoutBackgroundHelper } from "./popout";
 
-export const GetMenus = async () => {
+const GetMenus = async () => {
   const menus = [
     {
+      id: "OpenVideo",
       title: browser.i18n.getMessage("LinkContextMenuEntry_OpenVideo_Text"),
       contexts: ["link"],
       targetUrlPatterns: YOUTUBE_VIDEO_URL_PATTERNS,
-      onclick: (info, tab) =>
-        OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false),
     },
     {
+      id: "OpenPlaylist",
       title: browser.i18n.getMessage("LinkContextMenuEntry_OpenPlaylist_Text"),
       contexts: ["link"],
       targetUrlPatterns: YOUTUBE_PLAYLIST_URL_PATTERNS,
-      onclick: (info, tab) =>
-        OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false),
     },
   ];
 
-  const showRotationMenus = await Options.GetLocalOption(
-    "behavior",
-    "showRotationMenus",
-  );
+  const showRotationMenus = await Options.GetLocalOption("behavior", "showRotationMenus");
+
   if (showRotationMenus !== false) {
     menus.push({
-      title: browser.i18n.getMessage(
-        "LinkContextMenuEntry_OpenVideoRotateLeft_Text",
-      ),
+      id: "OpenVideoRotateLeft",
+      title: browser.i18n.getMessage("LinkContextMenuEntry_OpenVideoRotateLeft_Text"),
       contexts: ["link"],
       targetUrlPatterns: YOUTUBE_VIDEO_URL_PATTERNS,
-      onclick: (info, tab) =>
-        OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false, 270),
     });
     menus.push({
-      title: browser.i18n.getMessage(
-        "LinkContextMenuEntry_OpenVideoRotateRight_Text",
-      ),
+      id: "OpenVideoRotateRight",
+      title: browser.i18n.getMessage("LinkContextMenuEntry_OpenVideoRotateRight_Text"),
       contexts: ["link"],
       targetUrlPatterns: YOUTUBE_VIDEO_URL_PATTERNS,
-      onclick: (info, tab) =>
-        OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false, 90),
     });
   }
 
   return menus;
 };
 
+const OnMenuClicked = async (info, tab) => {
+  switch (info.menuItemId) {
+    case "OpenVideo":
+    case "OpenPlaylist":
+      OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false);
+      break;
+
+    case "OpenVideoRotateLeft":
+      OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false, 270)
+      break;
+
+    case "OpenVideoRotateRight":
+      OpenPopoutBackgroundHelper(info.linkUrl, tab.id, true, false, 90)
+      break;
+  }
+}
+
+const CreateMenus = async (reset = true) => {
+  try {
+    if (reset) {
+      await browser.contextMenus.removeAll();
+    }
+
+    if (!browser.contextMenus.onClicked.hasListener(OnMenuClicked)) {
+      browser.contextMenus.onClicked.addListener(OnMenuClicked);
+    }
+
+    const menus = await GetMenus();
+    menus.forEach((menu) => browser.contextMenus.create(menu));
+  } catch (ex) {
+    console.error("Failed to initialize context menus", ex);
+  }
+};
+
 /**
  * Initializes menus and event handlers
  */
 export const InitMenus = async () => {
   console.log("[Background] InitMenus()");
 
-  const createMenus = async (reset = true) => {
-    try {
-      if (reset) {
-        await browser.contextMenus.removeAll();
-      }
-      const menus = await GetMenus();
-      menus.forEach((menu) => browser.contextMenus.create(menu));
-    } catch (ex) {
-      console.error("Failed to initialize context menus", ex);
-    }
-  };
-
-  createMenus();
+  CreateMenus();
   browser.storage.local.onChanged.addListener((changes) => {
     if (Object.keys(changes).includes("behavior.showRotationMenus")) {
-      createMenus(true);
+      CreateMenus(true);
     }
   });
 };