Created

icons/LICENSE

@@ -0,0 +1,2 @@
+These icons are taken from the "Material Design" iconset designed by Google:
+https://google.github.io/material-design-icons/.

icons/off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#FF0000" id="Core" transform="translate(-170.000000, -86.000000)"><g id="check-circle-outline-blank" transform="translate(170.000000, 86.000000)"><path d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" id="Shape"/></g></g></g></svg>

icons/on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#FF0000" id="Core" transform="translate(-338.000000, -338.000000)"><g id="radio-button-on" transform="translate(338.000000, 338.000000)"><path d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" id="Shape"/></g></g></g></svg>

index.js

@@ -0,0 +1,131 @@
+const CSS = `
+.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;
+  }
+}
+`;
+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);

manifest.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 2,
+  "name": "RGB YouTube",
+  "version": "1.0",
+
+  "description": "Makes the YouTube progress bar cycle through different RGB colors.",
+
+  "icons": {
+    "48": "icons/icon-48.png",
+    "96": "icons/icon-96.png"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["*://*.youtube.com/*"],
+      "js": ["index.js"],
+      "css": ["colors.css"]
+    }
+  ],
+
+  "background": {
+    "scripts": ["index.js"]
+  },
+
+  "page_action": {
+    "default_icon": "icons/off.svg",
+    "browser_style": true
+  },
+
+  "permissions": ["activeTab", "tabs"]
+}