Add ability to enable/disable from toolbar (#528)

* Add ability to enable/disable from toolbar
2025-08-21 09:58:45 -04:00 · 2019-10-19 03:28:52 +08:00
parent a01f397d36
commit c3f44db1bf
9 changed files with 84 additions and 19 deletions
--- a/icons/icon19_disabled.png
+++ b/icons/icon19_disabled.png
--- a/icons/icon38_disabled.png
+++ b/icons/icon38_disabled.png
--- a/icons/icon48_disabled.png
+++ b/icons/icon48_disabled.png
--- a/inject.js
+++ b/inject.js
@@ -3,6 +3,7 @@
  var tc = {
    settings: {
      lastSpeed: 1.0,       // default 1x
+      enabled: true,        // default enabled
      speeds: {},           // empty object to hold speed for each source

      displayKeyCode: 86,   // default: V
@@ -77,6 +78,7 @@
        rememberSpeed: tc.settings.rememberSpeed,
        audioBoolean: tc.settings.audioBoolean,
        startHidden: tc.settings.startHidden,
+        enabled: tc.settings.enabled,
        controllerOpacity: tc.settings.controllerOpacity,
        blacklist: tc.settings.blacklist.replace(regStrip, '')
      });
@@ -85,6 +87,7 @@
    tc.settings.displayKeyCode = Number(storage.displayKeyCode);
    tc.settings.rememberSpeed = Boolean(storage.rememberSpeed);
    tc.settings.audioBoolean = Boolean(storage.audioBoolean);
+    tc.settings.enabled = Boolean(storage.enabled);
    tc.settings.startHidden = Boolean(storage.startHidden);
    tc.settings.controllerOpacity = Number(storage.controllerOpacity);
    tc.settings.blacklist = String(storage.blacklist);
@@ -309,6 +312,7 @@
    }
  }
  function initializeNow(document) {
+      if (!tc.settings.enabled) return;
      // enforce init-once due to redundant callers
      if (!document.body || document.body.classList.contains('vsc-initialized')) {
        return;
--- a/options.html
+++ b/options.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<title>Video Speed Controller: Options</title>
-		<link rel="stylesheet" href="options.css" />
-		<script src="options.js"></script>
-	</head>
-	<body>
-		<header>
-			<h1>Video Speed Controller</h1>
-		</header>
+    <head>
+        <title>Video Speed Controller: Options</title>
+        <link rel="stylesheet" href="options.css" />
+        <script src="options.js"></script>
+    </head>
+    <body>
+        <header>
+            <h1>Video Speed Controller</h1>
+        </header>

    <section id="customs">
      <h3>Shortcuts</h3>
@@ -81,26 +81,30 @@
    </section>

    <section>
-            <h3>Other</h3>
-		<div class="row">
+      <h3>Other</h3>
+      <div class="row">
+        <label for="enabled">Enabled</label>
+        <input id="enabled" type="checkbox"/>
+      </div>
+      <div class="row">
        <label for="startHidden">Hide controller by default</label>
        <input id="startHidden" type="checkbox"/>
      </div>
      <div class="row">
-          <label for="rememberSpeed">Remember Playback Speed</label>
-          <input id="rememberSpeed" type="checkbox"/>
+        <label for="rememberSpeed">Remember Playback Speed</label>
+        <input id="rememberSpeed" type="checkbox"/>
      </div>
      <div class="row">
-          <label for="audioBoolean">Work on audio</label>
-          <input id="audioBoolean" type="checkbox"/>
+        <label for="audioBoolean">Work on audio</label>
+        <input id="audioBoolean" type="checkbox"/>
      </div>
      <div class="row">
-            <label for="controllerOpacity">Controller opacity</label>
-            <input id="controllerOpacity" type="text" value="">
+        <label for="controllerOpacity">Controller opacity</label>
+        <input id="controllerOpacity" type="text" value="">
      </div>
      <div class="row">
-          <label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label>
-          <textarea id="blacklist" rows="10" cols="50"></textarea>
+        <label for="blacklist">Blacklisted sites on which extension is disabled<br/>(one per line)</label>
+        <textarea id="blacklist" rows="10" cols="50"></textarea>
      </div>
    </section>

--- a/options.js
+++ b/options.js
@@ -6,6 +6,7 @@ var tcDefaults = {
  rememberSpeed: false, // default: false
  audioBoolean: false, // default: false
  startHidden: false,   // default: false
+  enabled: true,        // default enabled
  controllerOpacity: 0.3, // default: 0.3
  keyBindings: [
    {action: "slower", key: 83, value: 0.1, force: false, predefined: true}, // S
@@ -168,6 +169,7 @@ function save_options() {
  var displayKeyCode = document.getElementById('displayKeyInput').keyCode;
  var rememberSpeed = document.getElementById('rememberSpeed').checked;
  var audioBoolean = document.getElementById('audioBoolean').checked;
+  var enabled = document.getElementById('enabled').checked;
  var startHidden = document.getElementById('startHidden').checked;
  var controllerOpacity = document.getElementById('controllerOpacity').value;
  var blacklist     = document.getElementById('blacklist').value;
@@ -179,6 +181,7 @@ function save_options() {
    displayKeyCode: displayKeyCode,
    rememberSpeed:  rememberSpeed,
    audioBoolean:  audioBoolean,
+    enabled:  enabled,
    startHidden:    startHidden,
    controllerOpacity:    controllerOpacity,
    keyBindings:    keyBindings,
@@ -199,6 +202,7 @@ function restore_options() {
    updateShortcutInputText('displayKeyInput', storage.displayKeyCode);
    document.getElementById('rememberSpeed').checked = storage.rememberSpeed;
    document.getElementById('audioBoolean').checked = storage.audioBoolean;
+    document.getElementById('enabled').checked = storage.enabled;
    document.getElementById('startHidden').checked = storage.startHidden;
    document.getElementById('controllerOpacity').value = storage.controllerOpacity;
    document.getElementById('blacklist').value = storage.blacklist;
--- a/popup.css
+++ b/popup.css
@@ -27,3 +27,7 @@ button {
  font-size: 0.95em;
  margin: 0.15em 0;
 }
+
+.hide {
+  display: none;
+}
--- a/popup.html
+++ b/popup.html
@@ -6,6 +6,10 @@
    <script src="popup.js"></script>
  </head>
  <body>
+    <button id="enable" class="hide">Enable</button>
+    <button id="disable">Disable</button>
+    <span id="status" class="hide"></span>
+    <hr />
    <button id="config">Settings</button>
    <hr />
    <button id="feedback" class="secondary">Send feedback</button>
--- a/popup.js
+++ b/popup.js
@@ -10,4 +10,49 @@ document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#feedback').addEventListener('click', function() {
    window.open("https://github.com/igrigorik/videospeed/issues");
  });
+
+  document.querySelector('#enable').addEventListener('click', function() {
+      toggleEnabled(true, settingsSavedReloadMessage);
+  });
+
+  document.querySelector('#disable').addEventListener('click', function() {
+      toggleEnabled(false, settingsSavedReloadMessage);
+  });
+
+  chrome.storage.sync.get({enabled: true}, function(storage) {
+    toggleEnabledUI(storage.enabled);
+  });
+
+  function toggleEnabled(enabled, callback){
+    chrome.storage.sync.set({
+      enabled: enabled,
+    }, function() {
+      toggleEnabledUI(enabled);
+      if(callback) callback(enabled);
+    });
+  }
+
+  function toggleEnabledUI(enabled){
+    document.querySelector('#enable').classList.toggle("hide", enabled);
+    document.querySelector('#disable').classList.toggle("hide", !enabled);
+
+    const suffix = `${(enabled ? "" : "_disabled")}.png`
+    chrome.browserAction.setIcon({
+      "path": {
+        "19": "icons/icon19" + suffix,
+        "38": "icons/icon38" + suffix,
+        "48": "icons/icon48" + suffix
+      }
+    });
+  }
+
+  function settingsSavedReloadMessage(enabled){
+    setStatusMessage(`${enabled ? "Enabled" : "Disabled"}. Reload page to see changes`);
+  }
+
+  function setStatusMessage(str){
+    const status_element = document.querySelector('#status')
+    status_element.classList.toggle("hide", false);
+    status_element.innerText = str;
+  }
 });