v0.1.1

cettoana · Apr 11, 2018 · c7b4a6c · c7b4a6c
1 parent 25624a5
commit c7b4a6c
Show file tree

Hide file tree

Showing 21 changed files with 2,832 additions and 1 deletion.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "env",
+    "minify"
+  ]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+dist/*.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,17 @@
+{
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "chrome": true
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "rules": {
+    "semi": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-console": ["warn"]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+extension.zip
diff --git a/README.md b/README.md
@@ -1 +1,26 @@
-hide-youtube-video
+# Hide YouTube™ Video Chrome Extension
+
+Play YouTube video with no video display.
+
+## Install
+
+Install from [Chrome Web Store](https://chrome.google.com/webstore/detail/lminokaobchppnocfchcjcenlmodehmi) or manually.
+
+### Manual Install
+
+* Download from releases and unzip `extension.zip`
+* Open chrome extension manage page at `chrome://extensions/`
+* Turn on **developer mode**
+* Drag and drop the unzipped folder on page
+* Or click **load unpacked extension** to open the unzipped folder
+* After these you should see the extension icon on toolbar. Once you entered `www.youtube.com` domain the icon will be active
+
+## Usage
+
+Hide YouTube video while playing, for example,
+
+![demo](https://raw.githubusercontent.com/cettoana/hide-youtube-video/master/doc/img/demo.png)
+
+and behavior can be set from popup menu.
+
+![menu](https://raw.githubusercontent.com/cettoana/hide-youtube-video/master/doc/img/menu.png)
diff --git a/build.sh b/build.sh
@@ -0,0 +1,4 @@
+yarn install --pure-lockfile
+
+./node_modules/.bin/babel src -d dist
+zip -r -X extension.zip dist images styles manifest.json popup.html
diff --git a/doc/img/demo.png b/doc/img/demo.png
diff --git a/doc/img/menu.png b/doc/img/menu.png
diff --git a/images/image_128.png b/images/image_128.png
diff --git a/images/image_16.png b/images/image_16.png
diff --git a/images/image_32.png b/images/image_32.png
diff --git a/images/image_48.png b/images/image_48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,45 @@
+{
+  "manifest_version": 2,
+  "name": "Hide YouTube™ Video",
+  "version": "0.1.1",
+  "description": "Hide YouTube video",
+  "background": {
+    "scripts": ["dist/background.js"],
+    "persistent": false
+  },
+  "permissions": [
+    "https://www.youtube.com/*",
+    "declarativeContent",
+    "tabs",
+    "activeTab",
+    "storage"
+  ],
+  "page_action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/image_16.png",
+      "32": "images/image_32.png",
+      "48": "images/image_48.png",
+      "128": "images/image_128.png"
+    }
+  },
+  "icons": {
+    "16": "images/image_16.png",
+    "32": "images/image_32.png",
+    "48": "images/image_48.png",
+    "128": "images/image_128.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["https://www.youtube.com/*"],
+      "js": [
+        "dist/insertCSS.js",
+        "dist/removeCSS.js"
+      ],
+      "css": [
+        "styles/default.css"
+      ],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "hide-youtube-video",
+  "version": "0.1.1",
+  "main": "",
+  "repository": "https://github.com/cettoana/hide-youtube-video.git",
+  "author": "Abel Chen <[email protected]>",
+  "license": "MIT",
+  "scripts": {
+    "eslint": "eslint src/*.js",
+    "babel": "babel src -d dist",
+    "build": "./build.sh"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-eslint": "^8.2.2",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-minify": "^0.4.0",
+    "eslint": "^4.19.1"
+  }
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        body {
+          font-family: monospace;
+          font-size: 16px;
+        }
+
+        button {
+          height: 24px;
+          width: 80px;
+          color: #FFF;
+          background-color: #00bcd4;
+          border: none;
+          border-radius: 2px;
+          font-size: 16px;
+          font-family: monospace;
+          letter-spacing: 2px;
+          outline:0;
+          cursor: pointer;
+        }
+
+        button.show {
+          background-color: rgb(229, 229, 229);
+          color: rgb(127, 127, 127);
+        }
+
+        label {
+          width: 120px;
+        }
+
+        .container {
+          padding: 0 5px;
+        }
+
+        .row {
+          padding: 8px 0;
+          display: flex;
+          align-items: center;
+        }
+      </style>
+    </head>
+    <body>
+      <div class="container">
+        <h4>Options:</h4>
+        <div class="row">
+          <label for="btn-video">Video</label>
+          <button id="btn-video">HIDE</button>
+        </div>
+        <div class="row">
+          <label for="thumbnail">Thumbnail</label>
+          <button id="btn-thumbnail">HIDE</button>
+        </div>
+      </div>
+      <script src="dist/popup.js"></script>
+    </body>
+  </html>
diff --git a/src/background.js b/src/background.js
@@ -0,0 +1,53 @@
+const syncStatus = (type, tabId) => {
+  chrome.storage.sync.get([type], result => {
+    chrome.tabs.executeScript(tabId, {
+      code: 'removeCSS("'+ type +'")',
+    });
+
+    if (result[type] === 'SHOW') {
+      chrome.tabs.executeScript(tabId, {
+        code: 'insertCSS("'+ type +'")',
+      });
+    }
+  });
+};
+
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
+    chrome.declarativeContent.onPageChanged.addRules([{
+      conditions: [
+        new chrome.declarativeContent.PageStateMatcher({
+          pageUrl: { hostEquals: 'www.youtube.com' },
+        }),
+      ],
+      actions: [new chrome.declarativeContent.ShowPageAction()],
+    }]);
+  });
+});
+
+chrome.tabs.onCreated.addListener(tab => {
+  const tabUrl = tab.url;
+  const tabId = tab.id;
+
+  if (tabUrl.indexOf("www.youtube.com") !== -1) {
+    syncStatus('video', tabId);
+    syncStatus('thumbnail', tabId);
+  }
+});
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  const tabUrl = tab.url;
+  const status = changeInfo.status;
+
+  if (tabUrl.indexOf("www.youtube.com") !== -1 && status === 'loading') {
+    syncStatus('video', tabId);
+    syncStatus('thumbnail', tabId);
+  }
+});
+
+chrome.tabs.onActivated.addListener(activeInfo => {
+  const tabId = activeInfo.tabId;
+
+  syncStatus('video', tabId);
+  syncStatus('thumbnail', tabId);
+});
diff --git a/src/insertCSS.js b/src/insertCSS.js
@@ -0,0 +1,43 @@
+const bypassCSS = {
+  video: `
+    video.video-stream {
+      opacity: 1 !important;
+    }
+
+    .ytp-cued-thumbnail-overlay-image {
+      opacity: 1;
+    }
+
+    .ytp-ce-covering-image {
+      opacity: 1;
+    }
+  `,
+  thumbnail: `
+    ytd-thumbnail {
+      opacity: 1;
+    }
+
+    ytd-playlist-video-thumbnail-renderer {
+      opacity: 1;
+    }
+
+    .ytp-videowall-still-image {
+      opacity: 1;
+    }
+
+    .ytp-videowall-still-info-content {
+      opacity: 0 !important;
+    }
+  `,
+};
+
+// eslint-disable-next-line no-unused-vars
+const insertCSS = type => {
+  const style = document.createElement("style");
+  style.id = 'show-youtube-' + type;
+  style.innerHTML = bypassCSS[type];
+
+  document.head.appendChild(style);
+
+  chrome.storage.sync.set({[type]: 'SHOW'});
+};
diff --git a/src/popup.js b/src/popup.js
@@ -0,0 +1,49 @@
+const hide = type => {
+  chrome.tabs.executeScript({
+    code: `removeCSS("${type}")`,
+  });
+};
+
+const show = type => {
+  // prevent duplicated insertCSS
+  chrome.tabs.executeScript({
+    code: `removeCSS("${type}")`,
+  });
+  chrome.tabs.executeScript({
+    code: `insertCSS("${type}")`,
+  });
+};
+
+const getClickHandler = type => () => {
+  const btn = document.querySelector(`#btn-${type}`);
+  const status = btn.innerHTML;
+
+  if (status === 'HIDE') {
+    show(type);
+    btn.classList.add('show');
+    btn.innerHTML = 'SHOW';
+    return;
+  }
+
+  hide(type);
+  btn.classList.remove('show');
+  btn.innerHTML = 'HIDE';
+};
+
+const initBtn = type => {
+  const btn = document.querySelector(`#btn-${type}`);
+
+  chrome.storage.sync.get([type], result => {
+    if (result[type] === 'SHOW') {
+      btn.classList.add('show');
+    }
+    btn.innerHTML = result[type] || 'HIDE';
+  });
+
+  btn.addEventListener('click', getClickHandler(type));
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  initBtn('video');
+  initBtn('thumbnail');
+});
diff --git a/src/removeCSS.js b/src/removeCSS.js
@@ -0,0 +1,7 @@
+// eslint-disable-next-line no-unused-vars
+const removeCSS = type => {
+  const elm = document.getElementById('show-youtube-' + type);
+  elm && elm.parentNode.removeChild(elm);
+
+  chrome.storage.sync.set({[type]: 'HIDE'});
+};
diff --git a/styles/default.css b/styles/default.css
@@ -0,0 +1,29 @@
+/* Default hide video */
+video.video-stream {
+  opacity: 0 !important;
+}
+
+.ytp-cued-thumbnail-overlay-image {
+  opacity: 0;
+}
+
+.ytp-ce-covering-image {
+  opacity: 0;
+}
+
+/* Default hide thumbnail */
+ytd-thumbnail {
+  opacity: 0;
+}
+
+ytd-playlist-video-thumbnail-renderer {
+  opacity: 0;
+}
+
+.ytp-videowall-still-image {
+  opacity: 0;
+}
+
+.ytp-videowall-still-info-content {
+  opacity: 1 !important;
+}