Merge branch 'main' into Picture-in-Picture

Author: rgantzos

.github/ISSUE_TEMPLATE/--bug.yml

@@ -1,5 +1,5 @@
 name: 🐛 Bug
-description: Report a bug for ScratchTool.
+description: Report a bug in ScratchTools.
 labels: ["type: bug", "status: needs review"]
 body:
 

.github/scripts/extract-classnames.js

@@ -0,0 +1,45 @@
+const fs = require("fs");
+const path = require("path");
+
+const rootDir = path.resolve(__dirname, "../../features");
+const outputFile = path.resolve(__dirname, "../../class-names.json");
+
+let collected = new Set();
+
+function traverseDir(dir) {
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+
+    if (stat.isDirectory()) {
+      traverseDir(fullPath);
+    } else if (stat.isFile() && file.endsWith(".js")) {
+      const content = fs.readFileSync(fullPath, "utf-8");
+      const regex = /className\(["'`](.*?)["'`]\)/g;
+      let match;
+      while ((match = regex.exec(content)) !== null) {
+        collected.add({
+          className: "ste-" + match[1].replaceAll(" ", "-"),
+          features: [
+            dir.split("/features/")[1].split("/")[0].replaceAll(".js", ""),
+          ],
+        });
+      }
+    }
+  }
+}
+
+traverseDir(rootDir);
+
+const mergedFeatures = Object.values(
+    [...collected].reduce((acc, item) => {
+      if (!acc[item.className]) {
+        acc[item.className] = { className: item.className, features: new Set() };
+      }
+      item.features.forEach(f => acc[item.className].features.add(f));
+      return acc;
+    }, {})
+  ).map(obj => ({ className: obj.className, features: [...obj.features] }));
+
+fs.writeFileSync(outputFile, JSON.stringify(mergedFeatures, null, 2));

.github/workflows/extract-classnames.yml

@@ -0,0 +1,48 @@
+name: Extract Class Names
+
+on:
+  push:
+    paths:
+      - "features/**.js"
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  extract:
+    if: github.repository == 'STForScratch/ScratchTools'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Run extraction script
+        run: node .github/scripts/extract-classnames.js
+
+      - name: Check for changes
+        id: git-diff
+        run: |
+          if git diff --quiet --exit-code class-names.json; then
+            echo "changed=false" >> $GITHUB_OUTPUT
+          else
+            echo "changed=true" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Create or Update Pull Request
+        if: steps.git-diff.outputs.changed == 'true'
+        uses: peter-evans/create-pull-request@v6
+        with:
+          commit-message: "Update class-names.json"
+          branch: update-class-names
+          title: "Update class names"
+          body: "Automated update of class-names.json"
+          labels: automated
+          assignees: rgantzos
+          delete-branch: true

README.md

@@ -40,12 +40,12 @@ There are multiple ways of installing.
 - Chrome: You can download from Chrome's Extension Webstore [here](https://chrome.google.com/webstore/detail/scratchtools/jjnpbalpllpfdpgplpbcbadkgdmleopm). Then just press the Add to Chrome button, and you've downloaded ScratchTools!
 
 > [!NOTE]
-> If you are using a browser based on Chromium (eg. Brave), then this is your way of installing unless your browser has it's own extension store.
+> If you are using a browser based on Chromium (eg. Brave), then this is your way of installing unless your browser has its own extension store.
 
 - Firefox/Mozilla: You can download from Firefox Addons (Works on Firefox forks) [here](https://addons.mozilla.org/en-US/firefox/addon/scratchtools/). You can then just add it to Firefox, and then you have ScratchTools!
 
 > [!NOTE]
-> The Firefox version of Scratchtools is behind compared to the chrome version of Scratchtools due to technical difficulties. Until a solution is found, the Firefox version will remain behind.
+> The Firefox version of ScratchTools is behind compared to the Chrome version of ScratchTools due to technical difficulties. Until a solution is found, the Firefox version will remain behind.
 
 - Microsoft Edge: You can download from Edge's addon webstore [here](https://microsoftedge.microsoft.com/addons/detail/scratchtools/aaidjeidbnhpjhblbianjeghjopbimmk). You can then just add it to Edge, and then you have ScratchTools!
 - Safari (macOS, iPadOS and iOS): You can build the extension by typing `make` for macOS, and `make ios` for the iOS app (you will have to sign it on Xcode), make sure you have enabled Developer mode and allowed unsigned extensions.
@@ -55,7 +55,7 @@ There are multiple ways of installing.
 - GitHub (For Firefox & Firefox Forks): Download from the GitHub repository [here](https://github.com/STForScratch/ScratchTools/zipball/master). After the `.zip` file is downloaded, unpack it. Then, with the folder, go to `about:debugging`, click "This Firefox" and click "Load temporary extension", go into the extension folder and select the `manifest.json`.
 
 > [!WARNING]
-> Extensions loaded this way onto Safari indeed temporary. Once you close the window, it will be gone. In addition, ScratchTools is still outdated on Firefox at the time of writing this.
+> Extensions loaded this way onto Safari are temporary. Once you close the window, it will be gone.
 
 - Installing with Git: Open the code dropdown on the extension's repository, copy the HTTPS url and then execute `git clone https://github.com/STForScratch/ScratchTools.git -b main` in Git, and you have installed ScratchTools! To pull changes instead of cloning the repository, enter the folder and execute `git remote add upstream https://github.com/STForScratch/ScratchTools.git`. When a commit is made to the repository, you can just run `git pull upstream main` to pull the changes, note that sometimes you may need to refresh ScratchTools.
 
@@ -77,7 +77,7 @@ Using `ScratchTools.Auth`, you can access the authentication info for the signed
 Using `ScratchTools.Scratch.blockly` and `ScratchTools.Scratch.vm`, you can access the Blockly and Virtual Machine from inside the editor (or on the project page with vm). Blockly must wait for the editor to load, but the virtual machine is ready instantly.
 ##### Blockly Context Menus
 If you want to control what appears in a context menu, you easily can with the `ScratchTools.Scratch.waitForContextMenu()` API. The only input you need is JSON, which must include the block ID for the context menu, the ID you want to set for the context menu option (lets you change the context menu option, so don't use the same ID as another feature), and the callback for when the context menu is opened. The callback function will also have an input, which is the context menu itself. That way, you can add the context menu option when the context menu is opened.
-##### Sound , GUI and Paint-Mode
+##### Sound, GUI and Paint-Mode
 Using `ScratchTools.Scratch.scratchSound`and `ScratchTools.Scratch.scratchGui`, you can return sound from the editor as well as access Graphical User Interface inside the editor. `ScratchTools.Scratch.scratchPaint` can be used in selecting the paint editor mode.
 
 #### Logging

_locales/en/messages.json

@@ -6,7 +6,7 @@
     "message": "ScratchTools is fully customizable with tons of features, all for making the Scratch website better and easier to use!"
   },
   "supportButton": {
-    "message": "Get support"
+    "message": "Get live support"
   },
   "feedbackButton": {
     "message": "Give feedback"

api/feature.js

@@ -6,6 +6,9 @@ class Feature {
         finalFeature = el;
       }
     });
+    this.requestPermissions = async function(...permissions) {
+      return await ScratchTools.sendMessage("request-perms", permissions)
+    }
     this.data = finalFeature;
     this.msg = function (string) {
       return this.data.localesData[`${this.data.id}/`+string] || `ScratchTools.${this.data.id}.${string}`;
@@ -81,6 +84,15 @@ class Feature {
       path: window.location.pathname,
       scratch: document.querySelector("#app") ? 3 : 2,
     }
+    this.getInternals = function(element) {
+      let reactKey = Object.keys(element).find((key) => key.startsWith("__reactInternalInstance"))
+      if (!reactKey) return null;
+
+      return element[reactKey]
+    }
+    this.getInternalKey = function(element) {
+      return Object.keys(element).find((key) => key.startsWith("__reactInternalInstance")) || null
+    }
     this.redux = document.querySelector("#app")?.[
         Object.keys(app).find((key) => key.startsWith("__reactContainer"))
       ].child.stateNode.store

api/main.js

@@ -74,6 +74,24 @@ ScratchTools.Storage = {};
 ScratchTools.Resources = {};
 ste.console.log("ScratchTools API Created", "ste-main");
 
+ScratchTools.cssFiles = [];
+async function updateCSSFiles() {
+  let activeCSSFiles = Array.from(document.styleSheets)
+    .filter((sheet) => sheet.href)
+    .map((sheet) => sheet.href)
+    .filter((el) => new URL(el).host === "scratch.mit.edu");
+  activeCSSFiles = activeCSSFiles.filter(
+    (el) => !ScratchTools.cssFiles.find((e) => e.url === el)
+  );
+
+  for (var i in activeCSSFiles) {
+   ScratchTools.cssFiles.push({
+      url: activeCSSFiles[i],
+      data: await (await fetch(activeCSSFiles[i])).text(),
+    });
+  }
+}
+
 if (
   window.location.href.startsWith("https://scratch.mit.edu/projects/") &&
   window.location.href.includes("/editor")
@@ -83,6 +101,23 @@ if (
   ScratchTools.type = "Website";
 }
 
+ScratchTools.MESSAGES = []
+ScratchTools.sendMessage = function(id, content) {
+  let uuid = UUID()
+  chrome.runtime.sendMessage(ScratchTools.id, { message: id, content, source: "message-api", uuid });
+  return new Promise((resolve, reject) => {
+    ScratchTools.MESSAGES.push({ message: id, source: "message-api", uuid, resolve });
+  });
+}
+
+function UUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (char) {
+      const random = Math.random() * 16 | 0;
+      const value = char === 'x' ? random : (random & 0x3 | 0x8);
+      return value.toString(16);
+  });
+}
+
 var storagePromises = [];
 ScratchTools.storage = {
   get: async function (key) {
@@ -159,6 +194,7 @@ function enableScratchToolsSelectorsMutationObserver() {
 enableScratchToolsSelectorsMutationObserver();
 
 function returnScratchToolsSelectorsMutationObserverCallbacks() {
+  updateCSSFiles()
   Object.keys(allWaitInstances).forEach(function (key) {
     var waitInstance = allWaitInstances[key];
     if (!waitInstance.removed) {
@@ -340,6 +376,39 @@ ScratchTools.styles = {
   },
 };
 
+function scratchClass(name) {
+  let element = document.querySelector(`[class*='${name}']`);
+  if (element) {
+    let classes = [...element.classList];
+    return classes.find((el) => el.includes(name));
+  } else {
+    let text = []
+
+    for (var i in ScratchTools.cssFiles) {
+      text.push(ScratchTools.cssFiles[i].data)
+    }
+
+    text = text.join("\n\n")
+    let classes = ScratchTools.getClassNamesFromCSSText(text)
+
+    let relClass = classes.find((el) => el.includes(name))
+    return relClass
+  }
+}
+
+ScratchTools.getClassNamesFromCSSText = function(cssText) {
+  const classNames = new Set();
+
+  const classRegex = /\.([a-zA-Z0-9_-]+)\b/g;
+
+  let match;
+  while ((match = classRegex.exec(cssText)) !== null) {
+    classNames.add(match[1]);
+  }
+
+  return Array.from(classNames);
+}
+
 ScratchTools.waitForElements(
   "ul[class*='menu_menu_'][class*='menu_right_']",
   function (ul) {
@@ -351,10 +420,13 @@ ScratchTools.waitForElements(
       if (!ul.querySelector(".ste-menu-full-settings")) {
         var li = document.createElement("li");
         li.className =
-          "ste-menu-full-settings menu_menu-item_3EwYA menu_hoverable_3u9dt";
+          "ste-menu-full-settings " +
+          scratchClass("menu_menu-item_") +
+          " " +
+          scratchClass("menu_hoverable_");
 
         var div = document.createElement("div");
-        div.className = "settings-menu_option_3rMur";
+        div.className = "settings-menu_option_GGukG";
 
         var icon = document.createElement("img");
         icon.src = ScratchTools.icons.main;
@@ -391,6 +463,8 @@ async function blockliveDetection() {
       Object.keys(app).find((key) => key.startsWith("__reactContainer"))
     ].child.stateNode.store.getState()?.scratchGui;
   if (!gui?.projectState) return;
-  let detectBlocklive = await import("./blocklive-detection/blocklive-detect.js");
+  let detectBlocklive = await import(
+    "./blocklive-detection/blocklive-detect.js"
+  );
   detectBlocklive.default();
-}
+}

api/module.js

@@ -1,6 +1,30 @@
 let allFeatures = []
 let alreadyInjected = [];
 
+function scratchClass(name) {
+  let element = document.querySelector(`[class*='${name}']`);
+  if (element) {
+    let classes = [...element.classList];
+    return classes.find((el) => el.includes(name));
+  } else {
+    let text = []
+
+    for (var i in ScratchTools.cssFiles) {
+      text.push(ScratchTools.cssFiles[i].data)
+    }
+
+    text = text.join("\n\n")
+    let classes = ScratchTools.getClassNamesFromCSSText(text)
+
+    let relClass = classes.find((el) => el.includes(name))
+    return relClass
+  }
+}
+
+function className(name) {
+  return "ste-" + name.toLowerCase().replaceAll(" ", "-")
+}
+
 ScratchTools.modules.forEach(async function (script) {
   var feature = await import(ScratchTools.dir + "/api/feature/index.js");
   var shouldBeRun = true;
@@ -20,6 +44,8 @@ ScratchTools.modules.forEach(async function (script) {
         allFeatures.push(featureGenerated)
         fun.default({
           feature: featureGenerated,
+          scratchClass,
+          className,
           console: {
             log: function (content) {
               ste.console.log(content, script.feature.id);
@@ -56,6 +82,8 @@ ScratchTools.injectModule = async function (script) {
         allFeatures.push(featureGenerated)
         fun.default({
           feature: featureGenerated,
+          scratchClass,
+          className,
           console: {
             log: function (content) {
               ste.console.log(content, script.feature.id);

api/update/changelogs/forum.json

@@ -0,0 +1,7 @@
+{
+    "active": false,
+    "title": "Forum Changes for {{ version }}",
+    "description": "",
+    "changes": []
+  }
+