Addon disabled listener (ScratchAddons#1500)

* add files

* add more extensions

* final changes

* style: format code

* merge it

* init commit

* style: format code

* oh yeah

* style: format code

* just some tweeks

* remove load-auto extension

* lots of major stuff, still not done tho

* style: format code

* whoopsie

* amazing changes!

* style: format code

* remove notice

* couple of wls

* style: format code

* more stuff

* style: format code

* Remove references to late and allAddons, use fireEvent instead of postMessage

* style: format code

* Revert unnecessary changes by PR

* Support disabled event (but not reenabled) on persistent scripts

* style: format code

* Do not use removed addon.tab.bindEvent

* Introduce dynamicUserscriptDisable, remake ordering of addons in "addons" popup tab

* style: format code

* Add dynamicUserscriptDisable:true to scratchr2 (theme with userscripts)

* editor-stage-left: recalculate cached blockly areas after disable/reenable

* Add issue number to comment

* Rename "dynamicUserscriptDisable" to "dynamicDisable"

* Do not inject editor-stage-left CSS if JS is not running (temp fix until ScratchAddons#1672 fix)

* Add comment to clarify this won't work very well with dynamic userscript enabling

Co-authored-by: TheColaber <[email protected]>
Co-authored-by: WorldLanguages <[email protected]>
Co-authored-by: WorldLanguages <[email protected]>

Author: TheColaber

Diff for: addon-api/background/Addon.js

@@ -28,6 +28,7 @@ export default class BackgroundScriptAddon extends Addon {
   _kill() {
     this.auth.dispose();
     this.settings.dispose();
+    this.self.dispose();
     if (this.notifications) this.notifications.dispose();
     this._timeouts.forEach((timeoutId) => clearTimeout(timeoutId));
     this._intervals.forEach((intervalId) => clearInterval(intervalId));

Diff for: addon-api/common/Addon.js

@@ -1,5 +1,6 @@
 import Auth from "./Auth.js";
 import Account from "./Account.js";
+import Self from "./Self.js";
 import fetch from "./fetch.js";
 import Settings from "../common/Settings.js";
 
@@ -17,20 +18,7 @@ import Settings from "../common/Settings.js";
  */
 export default class Addon {
   constructor(info) {
-    this.self = {
-      id: info.id,
-      browser: typeof InstallTrigger !== "undefined" ? "firefox" : "chrome",
-    };
-    Object.defineProperties(this.self, {
-      dir: {
-        enumerable: true,
-        get: () => `${this._path}addons/${info.id}`,
-      },
-      lib: {
-        enumerable: true,
-        get: () => `${this._path}libraries`,
-      },
-    });
+    this.self = new Self(this, info);
     this.auth = new Auth(this);
     this.account = new Account();
     this.fetch = fetch;

Diff for: addon-api/common/Self.js

@@ -0,0 +1,31 @@
+import Listenable from "./Listenable.js";
+
+/**
+ * @extends Listenable
+ */
+export default class Self extends Listenable {
+  constructor(addonObj, info) {
+    super();
+    this._addonId = info.id; // In order to receive fireEvent messages from background
+    this.id = info.id;
+    this._addonObj = addonObj;
+    this.browser = typeof InstallTrigger !== "undefined" ? "firefox" : "chrome";
+    this.disabled = false;
+    this.addEventListener("disabled", () => (this.disabled = true));
+    this.addEventListener("reenabled", () => (this.disabled = false));
+  }
+  get dir() {
+    return `${this._addonObj._path}addons/${this.id}`;
+  }
+
+  get lib() {
+    return `${this._addonObj._path}libraries`;
+  }
+
+  /**
+   * @private
+   */
+  get _eventTargetKey() {
+    return "self";
+  }
+}

Diff for: addon-api/content-script/Addon.js

@@ -9,8 +9,10 @@ import Tab from "./Tab.js";
 export default class UserscriptAddon extends Addon {
   constructor(info) {
     super(info);
+    this._addonId = info.id;
     this.__path = document.getElementById("scratch-addons").getAttribute("data-path");
     this.tab = new Tab(info);
+    this.self.disabled = false;
   }
 
   /**

Diff for: addons/editor-stage-left/addon.json

@@ -1,13 +1,6 @@
 {
   "name": "Display stage on left side",
   "description": "Moves the stage to the left side of the editor.",
-  "info": [
-    {
-      "type": "notice",
-      "text": "Refresh the editor after enabling/disabling this theme.",
-      "id": "refresheditor"
-    }
-  ],
   "credits": [
     {
       "name": "NitroCipher/ZenithRogue"
@@ -19,6 +12,7 @@
       "matches": ["https://scratch.mit.edu/projects/*"]
     }
   ],
+  "dynamicDisable": true,
   "userstyles": [
     {
       "url": "stageleft.css",

Diff for: addons/editor-stage-left/fix-share-the-love.js

@@ -1,27 +1,49 @@
 export default function ({ addon, global, console }) {
+  let interval, injected;
+
+  addon.self.addEventListener("disabled", () => {
+    clearInterval(interval);
+    // TODO: when dynamicEnable is a thing, set it to false for this addon (its default value)
+    // and make sure "disabled" event is fired after styles are updated, and remove disabled logic
+    document.querySelector(".scratch-addons-theme[data-addon-id='editor-stage-left']").disabled = true;
+    Blockly.getMainWorkspace().recordCachedAreas();
+  });
+  addon.self.addEventListener("reenabled", () => {
+    if (!injected) tryInjecting();
+    document.querySelector(".scratch-addons-theme[data-addon-id='editor-stage-left']").disabled = false;
+    Blockly.getMainWorkspace().recordCachedAreas();
+  });
+
   const inject = (workspace) => {
+    injected = true;
     const originalGetClientRect = workspace.toolbox_.getClientRect;
     workspace.toolbox_.getClientRect = function () {
       // we are trying to undo the effect of BIG_NUM in https://github.com/LLK/scratch-blocks/blob/ab26fa2960643fa38fbc7b91ca2956be66055070/core/flyout_vertical.js#L739
       const rect = originalGetClientRect.call(this);
-      if (!rect) return rect;
+      if (!rect || addon.self.disabled) return rect;
       if (rect.left > 0) return rect;
       rect.left += 1000000000;
       rect.width -= 1000000000;
       return rect;
     };
   };
 
-  if (addon.tab.editorMode === "editor") {
-    const interval = setInterval(() => {
-      if (Blockly.getMainWorkspace()) {
+  function tryInjecting() {
+    if (addon.tab.editorMode === "editor") {
+      interval = setInterval(() => {
+        if (Blockly.getMainWorkspace()) {
+          inject(Blockly.getMainWorkspace());
+          clearInterval(interval);
+        }
+      }, 100);
+    }
+
+    addon.tab.addEventListener("urlChange", () => {
+      if (addon.tab.editorMode === "editor") {
+        // Inject even if addon is disabled, will pollute but not change function return value
         inject(Blockly.getMainWorkspace());
-        clearInterval(interval);
       }
-    }, 100);
+    });
   }
-  addon.tab.addEventListener(
-    "urlChange",
-    () => addon.tab.editorMode === "editor" && inject(Blockly.getMainWorkspace())
-  );
+  tryInjecting();
 }

Diff for: addons/editor-stage-left/stageleft.css

@@ -1,4 +1,7 @@
 /* sa-autoupdate-theme-ignore */
+/* Userscript handles whether this style should be enabled until dynamicEnable is a thing */
+/* If we didn't add autoupdate-ignore, loading the editor with the addon disabled, then
+   enabling it, would inject the CSS but of course not the JS */
 
 [class*="stage-header_stage-button-icon"] {
   transform: scaleX(-1);

Diff for: addons/scratch-messaging/background.js

@@ -4,6 +4,7 @@ export default async function ({ addon, global, console, setTimeout, setInterval
   let lastDateTime;
   let data;
   let pendingAuthChange = false;
+  let addonEnabled = true;
   const commentLocationPrefixes = {
     0: "p", // Projects
     1: "u", // Users
@@ -28,8 +29,7 @@ export default async function ({ addon, global, console, setTimeout, setInterval
 
   async function routine() {
     await runCheckMessagesAfter({ checkOld: true }, 0);
-    // Can't use while(true) because addon might get disabled
-    while (addon.self) {
+    while (addonEnabled) {
       if (pendingAuthChange) {
         pendingAuthChange = false;
         resetData();
@@ -101,14 +101,7 @@ export default async function ({ addon, global, console, setTimeout, setInterval
     data.ready = true;
   }
 
-  chrome.runtime.onMessage.addListener(function thisFunction(request, sender, sendResponse) {
-    // If this addon has been killed, addon.self will throw
-    try {
-      addon.self;
-    } catch (err) {
-      chrome.runtime.onMessage.removeListener(thisFunction);
-      return;
-    }
+  const messageListener = (request, sender, sendResponse) => {
     if (!request.scratchMessaging) return;
     const popupRequest = request.scratchMessaging;
     if (popupRequest === "getData")
@@ -131,6 +124,11 @@ export default async function ({ addon, global, console, setTimeout, setInterval
         .catch((err) => sendResponse(err));
       return true;
     }
+  };
+  chrome.runtime.onMessage.addListener(messageListener);
+  addon.self.addEventListener("disabled", () => {
+    chrome.runtime.onMessage.removeListener(messageListener);
+    addonEnabled = false;
   });
 
   async function retrieveComments(resourceType, resourceId, commentIds, page = 1, commentsObj = {}) {

Diff for: addons/scratchr2/addon.json

@@ -22,6 +22,7 @@
       "runAtComplete": false
     }
   ],
+  "dynamicDisable": true,
   "userstyles": [
     {
       "url": "set-default-var-value.css",

Diff for: background/declare-scratchaddons-object.js

@@ -11,6 +11,7 @@ scratchAddons.addonObjects = [];
 scratchAddons.eventTargets = {
   auth: [],
   settings: [],
+  self: [],
 };
 
 // Event target for local background page events

Diff for: background/handle-settings-page.js

@@ -24,9 +24,33 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
     chrome.storage.sync.set({
       addonsEnabled: scratchAddons.localState.addonsEnabled,
     });
+
+    // Fire disabled event for userscripts
+    // TODO: this might not be an addon being reenabled. We should consider this
+    // in case we want to provide userscripts with a way to run after the page
+    // has loaded, dynamically.
+    chrome.tabs.query({}, (tabs) =>
+      tabs.forEach(
+        (tab) =>
+          (tab.url || (!tab.url && typeof browser !== "undefined")) &&
+          chrome.tabs.sendMessage(tab.id, {
+            fireEvent: {
+              target: "self",
+              name: newState ? "reenabled" : "disabled",
+              addonId,
+            },
+          })
+      )
+    );
+
     if (newState === false) {
+      // TODO: can there be many addon objects for the same addon?
       const addonObjs = scratchAddons.addonObjects.filter((addonObj) => addonObj.self.id === addonId);
-      if (addonObjs) addonObjs.forEach((addonObj) => addonObj._kill());
+      if (addonObjs)
+        addonObjs.forEach((addonObj) => {
+          addonObj.self.dispatchEvent(new CustomEvent("disabled"));
+          addonObj._kill();
+        });
       scratchAddons.localEvents.dispatchEvent(new CustomEvent("badgeUpdateNeeded"));
     } else {
       runPersistentScripts(addonId);

Diff for: content-scripts/cs.js

@@ -61,6 +61,9 @@ window.addEventListener("load", () => {
   }
 });
 
+// Store all themes that were enabled this session
+const sessionEnabledThemes = new Set();
+
 function injectUserstylesAndThemes({ userstyleUrls, themes, isUpdate }) {
   document.querySelectorAll(".scratch-addons-theme").forEach((style) => {
     if (!style.textContent.startsWith("/* sa-autoupdate-theme-ignore */")) style.remove();
@@ -73,6 +76,7 @@ function injectUserstylesAndThemes({ userstyleUrls, themes, isUpdate }) {
     else document.documentElement.appendChild(link);
   }
   for (const theme of themes) {
+    sessionEnabledThemes.add(theme.addonId);
     for (const styleUrl of theme.styleUrls) {
       let css = theme.styles[styleUrl];
       // Replace %addon-self-dir% for relative URLs
@@ -131,15 +135,16 @@ function onHeadAvailable({ globalState, l10njson, addonsWithUserscripts, usersty
     } else if (typeof request.setMsgCount !== "undefined") {
       template.setAttribute("data-msgcount", request.setMsgCount);
     } else if (request === "getRunningAddons") {
-      // We need to send themes that might have been injected dynamically
-      sendResponse([
-        ...new Set([
-          ...addonsWithUserscripts.map((obj) => obj.addonId),
-          ...Array.from(document.querySelectorAll(".scratch-addons-theme")).map((style) =>
-            style.getAttribute("data-addon-id")
-          ),
-        ]),
-      ]);
+      const userscripts = addonsWithUserscripts.map((obj) => obj.addonId);
+      const activeThemes = Array.from(document.querySelectorAll(".scratch-addons-theme")).map((style) =>
+        style.getAttribute("data-addon-id")
+      );
+      const inactiveThemes = [...sessionEnabledThemes].filter((addonId) => !activeThemes.includes(addonId));
+      sendResponse({
+        userscripts,
+        activeThemes,
+        inactiveThemes,
+      });
     }
   });
 

Diff for: content-scripts/inject/module.js

@@ -23,6 +23,7 @@ scratchAddons.eventTargets = {
   auth: [],
   settings: [],
   tab: [],
+  self: [],
 };
 scratchAddons.classNames = { loaded: false };
 
@@ -92,14 +93,17 @@ const observer = new MutationObserver((mutationsList) => {
       removeAttr();
     } else if (attrType === "data-fire-event") {
       if (attrVal.addonId) {
-        const settingsEventTarget = scratchAddons.eventTargets.settings.find(
+        // Addon specific events, like settings change and self disabled
+        const eventTarget = scratchAddons.eventTargets[attrVal.target].find(
           (eventTarget) => eventTarget._addonId === attrVal.addonId
         );
-        if (settingsEventTarget) settingsEventTarget.dispatchEvent(new CustomEvent("change"));
-      } else
+        if (eventTarget) eventTarget.dispatchEvent(new CustomEvent(attrVal.name));
+      } else {
+        // Global events, like auth change
         scratchAddons.eventTargets[attrVal.target].forEach((eventTarget) =>
           eventTarget.dispatchEvent(new CustomEvent(attrVal.name))
         );
+      }
       removeAttr();
     }
   }

Diff for: webpages/settings/index.html

@@ -129,9 +129,7 @@ <h1>{{ msg("settings") }}</h1>
         </div>
 
         <div class="addons-container">
-          <div id="running-page" v-show="popupOpenedOnScratchTab && searchInput === ''">
-            {{ msg("runningOnThisPage") }}
-          </div>
+          <div id="running-page" v-show="addonsRunningOnTab && searchInput === ''">{{ msg("runningOnThisPage") }}</div>
           <div
             class="addon-body"
             :class="{ 'addon-body-margin-bottom': addon._marginBottom && searchInput === '' }"