From 87004f1a02db98e97c46b3e3e7001d1d5b9df872 Mon Sep 17 00:00:00 2001
From: array-in-a-matrix <nova.neutrino@protonmail.com>
Date: Wed, 12 Jan 2022 13:21:35 -0500
Subject: [PATCH] simplified extension | removed button

---
 index.js      | 198 ++++++++++++++------------------------------------
 manifest.json |  18 ++---
 style.css     |  62 ++++++++++++++++
 3 files changed, 123 insertions(+), 155 deletions(-)
 create mode 100644 style.css

diff --git a/index.js b/index.js
index 1afd1a8..eb36949 100644
--- a/index.js
+++ b/index.js
@@ -1,157 +1,71 @@
-const CSS = `
-.ytp-play-progress,
-.ytp-swatch-background-color {
-  animation: RGB 25s ease-in-out infinite;  
-}
+// const CSS = `
+// .ytp-play-progress,
+// .ytp-swatch-background-color {
+//   animation: RGB 25s ease-in-out infinite;  
+// }
 
-@keyframes RGB {
-  from {
-      background-color: #FF0000;
-  }
+// @keyframes RGB {
+//   from {
+//       background-color: #FF0000;
+//   }
 
-  7% {
-      background-color: #FF7700;
-  }
+//   7% {
+//       background-color: #FF7700;
+//   }
 
-  14% {
-      background-color: #FFDD00;
-  }
+//   14% {
+//       background-color: #FFDD00;
+//   }
 
-  21% {
-      background-color: #00FF00;
-  }
+//   21% {
+//       background-color: #00FF00;
+//   }
 
-  28% {
-      background-color: #0000FF;
-  }
+//   28% {
+//       background-color: #0000FF;
+//   }
 
-  35% {
-      background-color: #8A2BE2;
-  }
+//   35% {
+//       background-color: #8A2BE2;
+//   }
 
-  42% {
-      background-color: #C77DF3;
-  }
+//   42% {
+//       background-color: #C77DF3;
+//   }
 
-  49% {
-      background-color: #C77DF3;
-  }
+//   49% {
+//       background-color: #C77DF3;
+//   }
 
-  56% {
-      background-color: #8A2BE2;
-  }
+//   56% {
+//       background-color: #8A2BE2;
+//   }
 
-  63% {
-      background-color: #0000FF;
-  }
+//   63% {
+//       background-color: #0000FF;
+//   }
 
-  70% {
-      background-color: #00FF00;
-  }
+//   70% {
+//       background-color: #00FF00;
+//   }
 
-  77% {
-      background-color: #FFDD00;
-  }
+//   77% {
+//       background-color: #FFDD00;
+//   }
 
-  84% {
-      background-color: #FF7700;
-  }
+//   84% {
+//       background-color: #FF7700;
+//   }
 
-  91% {
-      background-color: #FF0000;
-  }
-}
-`;
+//   91% {
+//       background-color: #FF0000;
+//   }
+// }
+// `;
 
-const TITLE_APPLY = "Apply CSS";
-const TITLE_REMOVE = "Remove CSS";
-const APPLICABLE_PROTOCOLS = ["http:", "https:"];
-
-/*
-Toggle CSS: based on the current title, insert or remove the CSS.
-Update the page action's title and icon to reflect its state.
-*/
-function toggleCSS(tab) {
-
-  function gotTitle(title) {
-    if (title === TITLE_APPLY) {
-      browser.pageAction.setIcon({
-        tabId: tab.id,
-        path: "icons/on.svg"
-      });
-      browser.pageAction.setTitle({
-        tabId: tab.id,
-        title: TITLE_REMOVE
-      });
-      browser.tabs.insertCSS({
-        code: CSS
-      });
-    } else {
-      browser.pageAction.setIcon({
-        tabId: tab.id,
-        path: "icons/off.svg"
-      });
-      browser.pageAction.setTitle({
-        tabId: tab.id,
-        title: TITLE_APPLY
-      });
-      browser.tabs.removeCSS({
-        code: CSS
-      });
-    }
-  }
-
-  var gettingTitle = browser.pageAction.getTitle({
-    tabId: tab.id
-  });
-  gettingTitle.then(gotTitle);
-}
-
-/*
-Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
-Argument url must be a valid URL string.
-*/
-function protocolIsApplicable(url) {
-  const protocol = (new URL(url)).protocol;
-  return APPLICABLE_PROTOCOLS.includes(protocol);
-}
-
-/*
-Initialize the page action: set icon and title, then show.
-Only operates on tabs whose URL's protocol is applicable.
-*/
-function initializePageAction(tab) {
-  if (protocolIsApplicable(tab.url)) {
-    browser.pageAction.setIcon({
-      tabId: tab.id,
-      path: "icons/off.svg"
-    });
-    browser.pageAction.setTitle({
-      tabId: tab.id,
-      title: TITLE_APPLY
-    });
-    browser.pageAction.show(tab.id);
-  }
-}
-
-/*
-When first loaded, initialize the page action for all tabs.
-*/
-var gettingAllTabs = browser.tabs.query({});
-gettingAllTabs.then((tabs) => {
-  for (let tab of tabs) {
-    initializePageAction(tab);
-  }
-});
-
-/*
-Each time a tab is updated, reset the page action for that tab.
-*/
-browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
-  initializePageAction(tab);
-});
-
-/*
-Toggle CSS when the page action is clicked.
-*/
-browser.pageAction.onClicked.addListener(toggleCSS);
+pageMod.PageMod( {
+    include: '*',
+    contentStyleFile: [
+      data.url( 'style.css' )
+    ]
+  })
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 17618b1..32afa45 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,8 @@
 {
+
   "manifest_version": 2,
   "name": "RGB YouTube",
-  "version": "1.1",
+  "version": "2.0",
 
   "description": "Makes the YouTube progress bar cycle through different RGB colors.",
 
@@ -19,17 +20,8 @@
 
   "content_scripts": [{
     "matches": ["*://*.youtube.com/*"],
-    "js": ["index.js"]
-  }],
+    "js": ["index.js"],
+    "css": ["style.css"]
+  }]
 
-  "background": {
-    "scripts": ["index.js"]
-  },
-
-  "page_action": {
-    "default_icon": "icons/off.svg",
-    "browser_style": true
-  },
-
-  "permissions": ["activeTab", "tabs"]
 }
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..d4a81bf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,62 @@
+.ytp-play-progress,
+.ytp-swatch-background-color {
+  animation: RGB 25s ease-in-out infinite;  
+}
+
+@keyframes RGB {
+  from {
+      background-color: #FF0000;
+  }
+
+  7% {
+      background-color: #FF7700;
+  }
+
+  14% {
+      background-color: #FFDD00;
+  }
+
+  21% {
+      background-color: #00FF00;
+  }
+
+  28% {
+      background-color: #0000FF;
+  }
+
+  35% {
+      background-color: #8A2BE2;
+  }
+
+  42% {
+      background-color: #C77DF3;
+  }
+
+  49% {
+      background-color: #C77DF3;
+  }
+
+  56% {
+      background-color: #8A2BE2;
+  }
+
+  63% {
+      background-color: #0000FF;
+  }
+
+  70% {
+      background-color: #00FF00;
+  }
+
+  77% {
+      background-color: #FFDD00;
+  }
+
+  84% {
+      background-color: #FF7700;
+  }
+
+  91% {
+      background-color: #FF0000;
+  }
+}