migrate to manifest v3, fix extension showAction rule

sr1jan · Feb 12, 2022 · 0d95fb0 · 0d95fb0
1 parent 2bd4490
commit 0d95fb0
Show file tree

Hide file tree

Showing 5 changed files with 201 additions and 164 deletions.
diff --git a/build/build-chrome.zip b/build/build-chrome.zip
diff --git a/src/background.js b/src/background.js
@@ -1,46 +1,69 @@
-'use strict';
+"use strict";
+
+console.log("[YTGREP] BackgroundJS init");
 
 // extension only active on youtube watch page
 const default_rule = {
-  id: "default_rule",
+  id: "enable_action",
   conditions: [
     new chrome.declarativeContent.PageStateMatcher({
-      pageUrl: {hostEquals: "www.youtube.com"},
-      css: ["video"]
-    })
+      pageUrl: {
+        hostEquals: "www.youtube.com",
+        schemes: ["https"],
+        pathContains: "watch",
+      },
+    }),
   ],
-  actions: [ new chrome.declarativeContent.ShowPageAction() ]
-}
+  actions: [new chrome.declarativeContent.ShowAction()],
+};
 
-chrome.runtime.onInstalled.addListener(function() {
-  console.log('ytGrep installed successfully!');
+chrome.runtime.onInstalled.addListener(function () {
+  console.log("ytGrep installed successfully!");
+  chrome.action.disable();
 
-  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
     chrome.declarativeContent.onPageChanged.addRules([default_rule]);
   });
 });
 
 // setIcon when on youtube.com
-chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
-    if(message.type === "showPageAction"){
-      chrome.pageAction.setIcon({
-        tabId: sender.tab.id,
-        path: {"16": "./assets/icons/ytGrep16.png", "24": "./assets/icons/ytGrep24.png"}
-      });
-    }
+chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
+  if (message.type === "showPageAction") {
+    console.log("[YTGREP::showPageAction] init");
+    chrome.declarativeContent.onPageChanged.getRules(
+      ["enable_action"],
+      (rules) => {
+        if (!rules[0]) {
+          console.log("enable_action rule was not set, adding now.");
+          chrome.declarativeContent.onPageChanged.removeRules(
+            undefined,
+            function () {
+              chrome.declarativeContent.onPageChanged.addRules([default_rule]);
+            }
+          );
+        }
+      }
+    );
+    chrome.action.setIcon({
+      tabId: sender.tab.id,
+      path: {
+        16: "./assets/icons/ytGrep16.png",
+        24: "./assets/icons/ytGrep24.png",
+      },
+    });
+  }
 });
 
-chrome.tabs.onRemoved.addListener(function(tabId) {
+chrome.tabs.onRemoved.addListener(function (tabId) {
   try {
-    chrome.storage.local.remove(tabId.toString(), function(){
-      if(chrome.runtime.lastError === undefined){
+    chrome.storage.local.remove(tabId.toString(), function () {
+      if (chrome.runtime.lastError === undefined) {
         console.log("Removed:", tabId);
-      }else{
+      } else {
         console.log(chrome.runtime.lastError);
       }
     });
-  } catch (e){
+  } catch (e) {
     console.log(e);
   }
 });
-
diff --git a/src/contentScript.js b/src/contentScript.js
@@ -1,49 +1,59 @@
 // init
-console.log('ytGREP extension loaded!');
+console.log("ytGREP extension loaded!");
 
 // message to background.js to setIcon
-chrome.runtime.sendMessage({type:'showPageAction'});
+chrome.runtime.sendMessage({ type: "showPageAction" });
 
 // receive from webpage via window
 // transmit to extension via runtime
-window.addEventListener("message", function(event) {
-  // We only accept messages from ourselves
-  if (event.source != window)
-    return;
-
-  if (event.data.type && (event.data.type === "CAPS")) {
-    // console.log("Message from webpage: " + event.data.text);
-    if(typeof chrome.app.isInstalled!=='undefined'){
-      chrome.runtime.sendMessage({type: "CAPS", status: event.data.text, capsArr: event.data.capsArr}, function(response) {
-        // console.log('Message from extension:', response.reply);
-      });
+window.addEventListener(
+  "message",
+  function (event) {
+    // We only accept messages from ourselves
+    if (event.source != window) return;
+
+    if (event.data.type && event.data.type === "CAPS") {
+      // console.log("Message from webpage: " + event.data.text);
+      if (typeof chrome.app.isInstalled !== "undefined") {
+        chrome.runtime.sendMessage(
+          {
+            type: "CAPS",
+            status: event.data.text,
+            capsArr: event.data.capsArr,
+          },
+          function (response) {
+            // console.log('Message from extension:', response.reply);
+          }
+        );
+      }
     }
-  }
-}, false);
+  },
+  false
+);
 
 // listening to extension
-chrome.runtime.onMessage.addListener(
-  function(request, sender, sendResponse){
-    if(request.type === "PLAYER" && request.action === "SEEK"){
-      window.postMessage({type: "PLAYER", action: "SEEK",time: request.time}, "*");
-    }
-
-    if(request.type === "PLAYER" && request.action === "PLAY"){
-      window.postMessage({type: "PLAYER", action: "PLAY"}, "*");
-    }
+chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+  if (request.type === "PLAYER" && request.action === "SEEK") {
+    window.postMessage(
+      { type: "PLAYER", action: "SEEK", time: request.time },
+      "*"
+    );
+  }
 
-    if(request.type === "PLAYER" && request.action === "PAUSE"){
-      window.postMessage({type: "PLAYER", action: "PAUSE"}, "*");
-    }
+  if (request.type === "PLAYER" && request.action === "PLAY") {
+    window.postMessage({ type: "PLAYER", action: "PLAY" }, "*");
   }
-)
 
+  if (request.type === "PLAYER" && request.action === "PAUSE") {
+    window.postMessage({ type: "PLAYER", action: "PAUSE" }, "*");
+  }
+});
 
 // inject ytPlayer into the webpage
-let script = document.createElement('script');
-script.src = chrome.runtime.getURL('inject/ytPlayer.js');
-script.onload = function() {
-    this.remove();
+let script = document.createElement("script");
+script.id = "ytGrep";
+script.src = chrome.runtime.getURL("inject/ytPlayer.js");
+script.onload = function () {
+  this.remove();
 };
 (document.head || document.documentElement).appendChild(script);
-
diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
   "name": "ytGREP",
-  "version": "1.3",
+  "version": "1.4",
   "description": "Search for words or sentences in youtube videos",
   "author": "Srijan Singh",
   "homepage_url": "https://github.com/sr1jan/ytGREP",
@@ -14,18 +14,20 @@
   },
   "permissions": ["activeTab", "declarativeContent", "storage"],
   "background": {
-    "scripts": ["background.js"],
-    "persistent": false
+    "service_worker": "background.js"
   },
-  "web_accessible_resources": ["inject/getTranscript.js", "inject/ytPlayer.js"],
+  "web_accessible_resources": [{
+    "resources": ["inject/getTranscript.js", "inject/ytPlayer.js"],
+    "matches": ["*://www.youtube.com/*"]
+  }],
   "content_scripts": [
    {
-     "matches": ["*://www.youtube.com/*"],
+     "matches": ["https://www.youtube.com/watch*"],
      "js": ["contentScript.js"],
      "run_at": "document_idle"
    }
   ],
-  "page_action": {
+  "action": {
     "default_popup": "ui/index.html",
     "default_icon": {
       "16": "assets/icons/ytGrep_inactive16.png",