Page action and quicker.

background.js

@@ -1,3 +1,5 @@
+let urlFromStorage
+
 // Storage init
 browser.runtime.onInstalled.addListener(function() {
   browser.storage.sync.set({
@@ -5,6 +7,12 @@ browser.runtime.onInstalled.addListener(function() {
   });
 });
 
+browser.storage.sync.onChanged.addListener(function(changes) {
+  if (changes.url && changes.url.newValue) {
+    urlFromStorage = changes.url.newValue
+  }
+})
+
 
 // Url format
 function getVideoToken(url) {
@@ -25,25 +33,35 @@ function cleanToken(token) {
 }
 
 
-// Links click event handling
-browser.runtime.onMessage.addListener(function(message) {
+
+function toInvidious(message) {
   let url = message.url;
   const name = message.targetName;
-  browser.storage.sync.get("url").then(function(item) {
-    const subst = item.url + `/watch?v=`;
-    let token = getVideoToken(url)
-    const cleanedToken = cleanToken(token)
-    url = url.replace(/.*\/watch\?v=/gm, subst);
+  const subst = urlFromStorage + `/watch?v=`;
+  let token = getVideoToken(url)
+  const cleanedToken = cleanToken(token)
+  url = url.replace(/.*\/watch\?v=/gm, subst);
 
-    if (name != "_self") {
-      browser.tabs.create(
-        {active: true, url: url}
-      );
-    } else {
-      browser.tabs.update(
-        {url: url, loadReplace: false}
-      )
-    }
-    console.log('Youtube to invidious is redirecting you to invidious')
-  })
+  if (name != "_self") {
+    browser.tabs.create(
+      {active: true, url: url}
+    );
+  } else {
+    browser.tabs.update(
+      {url: url, loadReplace: false}
+    )
+  }
+  console.log('Youtube to invidious is redirecting you to invidious')
+}
+
+
+// Links click event handling
+browser.runtime.onMessage.addListener(function(message) {
+  toInvidious(message)
+});
+
+
+// Page action
+browser.pageAction.onClicked.addListener(function(page) {
+  toInvidious({url: page.url, targetName: "_self"});
 });

manifest.json

@@ -2,13 +2,22 @@
 
   "manifest_version": 2,
   "name": "Youtube to invidious",
-  "version": "0.3",
+  "version": "0.4",
 
   "description": "Change every youtube link to an invidious one",
 
   "icons": {
     "48": "icons/48.png"
   },
+  "page_action": {
+    "show_matches": ["https://*.youtube.com/watch*"],
+    "browser_style": true,
+    "default_icon": {
+      "19": "button/19.png",
+      "38": "button/38.png"
+    }
+  },
+
   "web_accessible_resources": ["icons/48.png"],
   "content_scripts": [
     {

to-invidious.js

@@ -2,14 +2,14 @@ function findATagsAndAddListener(el) {
   let tags = [];
 
   // Google has elements that prevent click on links. May need different handling
-  // if (window.location.href.indexOf("google.") > 0) {
+  // if (window.location.href.indexOf("google.") >= 0) {
   //   const elements = document.getElementsByClassName("NqpkQc");
   //   while(elements.length > 0){
   //       elements[0].parentNode.removeChild(elements[0]);
   //   }
   // }
 
-  if (window.location.href.indexOf('youtube.com') > 0) {
+  if (window.location.href.indexOf('youtube.com') >= 0) {
     tags = el.querySelectorAll('a[href*="/watch"]');
   } else {
     tags = el.querySelectorAll('a[href*="youtube.com/"]');
@@ -22,22 +22,22 @@ function findATagsAndAddListener(el) {
 
 function addListenerToATag(tag) {
   tag.addEventListener('click', function(e) {
-      e.preventDefault();
-      e.stopImmediatePropagation();
+    e.preventDefault();
+    e.stopImmediatePropagation();
 
-      // Find the a tag
-      var target = e.target;
-      while ((target.tagName != "A" || !target.href) && target.parentNode) {
-        target = target.parentNode;
-      }
+    // Find the a tag
+    var target = e.target;
+    while ((target.tagName != "A" || !target.href) && target.parentNode) {
+      target = target.parentNode;
+    }
     
-      let targetName = (target.attributes.target != null ? target.attributes.target.nodeValue : '_self')
-      if (e.ctrlKey || e.metaKey) {
-        targetName = "_blank";
-      }
+    let targetName = (target.attributes.target != null ? target.attributes.target.nodeValue : '_self')
+    if (e.ctrlKey || e.metaKey) {
+      targetName = "_blank";
+    }
 
-      browser.runtime.sendMessage({"url": target.href, "targetName": targetName});
-    })
+    browser.runtime.sendMessage({"url": target.href, "targetName": targetName});
+  })
 }
 
 // Add the event listeners to the current elements of the body