manifest v3 changes

manifest/chrome-manifest-extra.json

@@ -1,8 +1,2 @@
 {
-  "optional_permissions": [
-    "declarativeContent"
-  ],
-  "background": {
-    "persistent": false
-  }
 }

manifest/manifest.json

@@ -22,7 +22,8 @@
             "popup.css"
         ]
     }],
-    "web_accessible_resources": [
+    "web_accessible_resources": [{
+        "resources": [
             "icons/LogoSponsorBlocker256px.png",
             "icons/IconSponsorBlocker256px.png",
             "icons/PlayerStartIconSponsorBlocker.svg",
@@ -55,22 +56,20 @@
             "popup.html",
             "content.css"
         ],
+        "matches": ["<all_urls>"]
+    }],
     "permissions": [
-        "storage",
+        "storage"
+    ],
+    "host_permissions": [
         "https://sponsor.ajay.app/*"
     ],
-    "optional_permissions": [
+    "action": {
-        "*://*/*"
-    ],
-    "browser_action": {
         "default_title": "SponsorBlock",
         "default_popup": "popup.html"
     }, 
     "background": {
-        "scripts":[
+        "service_worker": "./js/background.js"
-        "./js/vendor.js",
-        "./js/background.js"
-        ]
     },
     "icons": {
         "16": "icons/LogoSponsorBlocker64px.png",
@@ -85,5 +84,5 @@
         "page": "options/lock-options.html",
         "open_in_tab": true
     },
-    "manifest_version": 2
+    "manifest_version": 3
 }  

package.json

@@ -11,10 +11,10 @@
     "@types/chrome": "^0.0.178",
     "@types/firefox-webext-browser": "^94.0.1",
     "@types/jest": "^27.4.0",
-    "@types/wicg-mediasession": "^1.1.3",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/selenium-webdriver": "^4.0.17",
+    "@types/wicg-mediasession": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "chromedriver": "^97.0.4",
@@ -65,19 +65,24 @@
   "engines": {
     "node": ">=12.20.0"
   },
-  "funding": [{
+  "funding": [
+    {
       "type": "individual",
       "url": "hhttps://sponsor.ajay.app/donate"
-    }, {
+    },
+    {
       "type": "github",
       "url": "https://github.com/sponsors/ajayyy-org"
-    }, {
+    },
+    {
       "type": "patreon",
       "url": "https://www.patreon.com/ajayyy"
-    }, {
+    },
+    {
       "type": "individual",
       "url": "https://paypal.me/ajayyy"
-  }],
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ajayyy/SponsorBlock.git"

src/background.ts

@@ -4,8 +4,7 @@ import Config from "./config";
 import { Registration } from "./types";
 
 // Make the config public for debugging purposes
-
+// window.SB = Config; //no window for service workers
-window.SB = Config;
 
 import Utils from "./utils";
 const utils = new Utils({

src/components/CategoryPillComponent.tsx

@@ -50,7 +50,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 onMouseLeave={() => this.closeTooltip()}>
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
-                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
                     <span className="sponsorBlockCategoryPillTitle">
                         {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
@@ -79,7 +79,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                 )}
 
                 {/* Close Button */}
-                <img src={chrome.extension.getURL("icons/close.png")}
+                <img src={chrome.runtime.getURL("icons/close.png")}
                     className="categoryPillClose"
                     onClick={() => this.setState({ show: false })}>
                 </img>

src/components/NoticeComponent.tsx

@@ -116,7 +116,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                     {/* Logo */}
                                     <img id={"sponsorSkipLogo" + this.idSuffix} 
                                         className="sponsorSkipLogo sponsorSkipObject"
-                                        src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                                        src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                                     </img>
 
                                     <span id={"sponsorSkipMessage" + this.idSuffix}
@@ -148,7 +148,7 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
                                 
 
                                     {/* Close button */}
-                                    <img src={chrome.extension.getURL("icons/close.png")}
+                                    <img src={chrome.runtime.getURL("icons/close.png")}
                                         className={"sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" 
                                                         + (this.props.biggerCloseButton ? " biggerCloseButton" : "")}
                                         onClick={() => this.close()}>

src/components/SponsorTimeEditComponent.tsx

@@ -194,7 +194,7 @@ class SponsorTimeEditComponent extends React.Component<SponsorTimeEditProps, Spo
                         target="_blank" rel="noreferrer">
                         <img id={"sponsorTimeCategoriesHelpButton" + this.idSuffix}
                             className="helpButton"
-                            src={chrome.extension.getURL("icons/help.svg")}
+                            src={chrome.runtime.getURL("icons/help.svg")}
                             title={chrome.i18n.getMessage("categoryGuidelines")} />
                     </a>
                 </div>

src/content.ts

@@ -1430,7 +1430,7 @@ function createButton(baseID: string, title: string, callback: () => void, image
     newButton.draggable = isDraggable;
     newButtonImage.id = baseID + "Image";
     newButtonImage.className = "playerButtonImage";
-    newButtonImage.src = chrome.extension.getURL("icons/" + imageName);
+    newButtonImage.src = chrome.runtime.getURL("icons/" + imageName);
 
     // Append image to button
     newButton.appendChild(newButtonImage);
@@ -1607,7 +1607,7 @@ function openInfoMenu() {
     //hide info button
     if (playerButtons.info) playerButtons.info.button.style.display = "none";
 
-    sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
+    sendRequestToCustomServer('GET', chrome.runtime.getURL("popup.html"), function(xmlhttp) {
         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
             const popup = document.createElement("div");
             popup.id = "sponsorBlockPopupContainer";
@@ -1626,7 +1626,7 @@ function openInfoMenu() {
             //close button
             const closeButton = document.createElement("button");
             const closeButtonIcon = document.createElement("img");
-            closeButtonIcon.src = chrome.extension.getURL("icons/close.png");
+            closeButtonIcon.src = chrome.runtime.getURL("icons/close.png");
             closeButtonIcon.width = 15;
             closeButtonIcon.height = 15;
             closeButton.appendChild(closeButtonIcon);
@@ -1659,14 +1659,14 @@ function openInfoMenu() {
             const refreshSegments = <HTMLImageElement> popup.querySelector("#refreshSegments");
             const heart = <HTMLImageElement> popup.querySelector(".sbHeart");
             const close = <HTMLImageElement> popup.querySelector("#sbCloseDonate");
-            logo.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
+            logo.src = chrome.runtime.getURL("icons/IconSponsorBlocker256px.png");
-            settings.src = chrome.extension.getURL("icons/settings.svg");
+            settings.src = chrome.runtime.getURL("icons/settings.svg");
-            edit.src = chrome.extension.getURL("icons/pencil.svg");
+            edit.src = chrome.runtime.getURL("icons/pencil.svg");
-            copy.src = chrome.extension.getURL("icons/clipboard.svg");
+            copy.src = chrome.runtime.getURL("icons/clipboard.svg");
-            check.src = chrome.extension.getURL("icons/check.svg");
+            check.src = chrome.runtime.getURL("icons/check.svg");
-            heart.src = chrome.extension.getURL("icons/heart.svg");
+            heart.src = chrome.runtime.getURL("icons/heart.svg");
-            close.src = chrome.extension.getURL("icons/close.png");
+            close.src = chrome.runtime.getURL("icons/close.png");
-            refreshSegments.src = chrome.extension.getURL("icons/refresh.svg");
+            refreshSegments.src = chrome.runtime.getURL("icons/refresh.svg");
 
             parentNode.insertBefore(popup, parentNode.firstChild);
 
@@ -1853,7 +1853,7 @@ async function sendSubmitMessage() {
     }
 
     // Add loading animation
-    playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
+    playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadIconSponsorBlocker.svg");
     const stopAnimation = AnimationUtils.applyLoadingAnimation(playerButtons.submit.button, 1, () => updateEditButtonsOnPlayer());
 
     //check if a sponsor exceeds the duration of the video
@@ -1928,7 +1928,7 @@ async function sendSubmitMessage() {
     } else {
         // Show that the upload failed
         playerButtons.submit.button.style.animation = "unset";
-        playerButtons.submit.image.src = chrome.extension.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
+        playerButtons.submit.image.src = chrome.runtime.getURL("icons/PlayerUploadFailedIconSponsorBlocker.svg");
 
         if (response.status === 403 && response.responseText.startsWith("Submission rejected due to a warning from a moderator.")) {
             Chat.openWarningChat(response.responseText);
@@ -2026,7 +2026,7 @@ function addCSS() {
 
                 fileref.rel = "stylesheet";
                 fileref.type = "text/css";
-                fileref.href = chrome.extension.getURL(file);
+                fileref.href = chrome.runtime.getURL(file);
 
                 head.appendChild(fileref);
             }

src/js-components/chat.ts

@@ -19,7 +19,7 @@ export function openChat(config: ChatConfig): void {
 
     const closeButton  = document.createElement("img");
     closeButton.classList.add("sbChatClose");
-    closeButton.src = chrome.extension.getURL("icons/close.png");
+    closeButton.src = chrome.runtime.getURL("icons/close.png");
     closeButton.addEventListener("click", () => {
         chat.remove();
         closeButton.remove();

src/render/RectangleTooltip.tsx

@@ -58,7 +58,7 @@ export class RectangleTooltip {
                     className="sponsorBlockRectangleTooltip" >
                     <div>
                         <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                         <span className="sponsorSkipObject">
                             {this.text + (props.link ? ". " : "")}

src/render/Tooltip.tsx

@@ -50,7 +50,7 @@ export class Tooltip {
                 <div>
                     {props.showLogo ? 
                         <img className="sponsorSkipLogo sponsorSkipObject"
-                            src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
+                            src={chrome.runtime.getURL("icons/IconSponsorBlocker256px.png")}>
                         </img>
                     : null}
                     <span className="sponsorSkipObject">

webpack/webpack.common.js

@@ -35,12 +35,6 @@ module.exports = env => ({
     output: {
         path: path.join(__dirname, '../dist/js'),
     },
-    optimization: {
-        splitChunks: {
-            name: 'vendor',
-            chunks: "initial"
-        }
-    },
     module: {
         rules: [
             {