Fix toaster deinit error

For some reason this broke installation of plugins when another specific
plugin was present (vibrantDeck)

.github/workflows/build.yml

@@ -2,41 +2,211 @@ name: Builder
 
 on:
   push:
-    branches: [ main ]
   pull_request:
-    branches: [ main ]
+  # schedule:
+  #   - cron: '0 13 * * *' # run at 1 PM UTC
+  workflow_dispatch:
+    inputs:
+      release:
+        type: choice
+        description: Release the asset
+        default: 'none'
+        options:
+          - none
+          - prerelease
+          - release
 
 permissions:
-  contents: read
+  contents: write
 
 jobs:
   build:
-
-    name: Packager
+    name: Build PluginLoader
     runs-on: ubuntu-latest
 
     steps:
-    - name: 🧰 Checkout
+    - name: Checkout 🧰
       uses: actions/checkout@v3
+
+    - name: Set up NodeJS 17 💎
+      uses: actions/setup-node@v3
+      with:
+        node-version: 17
       
-    - name: 🐍 Set up Python 3.10
+    - name: Set up Python 3.10 🐍
       uses: actions/setup-python@v3
       with:
         python-version: "3.10"
         
-    - name: ⬇️ Install dependencies
+    - name: Install Python dependencies ⬇️
       run: |
         python -m pip install --upgrade pip
         pip install pyinstaller
-        if [ -f requirements.txt ]; then pip install -r requirements.txt; fi
-    
-    - name: 🛠️ Build
+        [ -f requirements.txt ] && pip install -r requirements.txt
+
+    - name: Install NodeJS dependencies ⬇️
       run: |
-        pyinstaller --noconfirm --onefile --name "PluginLoader" --add-data ./plugin_loader/static:/static --add-data ./plugin_loader/templates:/templates ./plugin_loader/*.py
+        cd frontend
+        npm i
+        npm run build
+
+    - name: Build 🛠️
+      run: pyinstaller --noconfirm --onefile --name "PluginLoader" --add-data ./backend/static:/static --add-data ./backend/legacy:/legacy ./backend/*.py
         
-    - name: ⬆️ Upload package
-      uses: actions/upload-artifact@v2
+    - name: Upload package artifact ⬆️
+      uses: actions/upload-artifact@v3
       with:
-        name: Plugin Loader
-        path: |
-          ./dist/*
+        name: PluginLoader
+        path: ./dist/PluginLoader
+
+  release:
+    name: Release the package
+    if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.release == 'release' }}
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout 🧰
+      uses: actions/checkout@v3
+
+    - name: Fetch package artifact ⬇️
+      uses: actions/download-artifact@v3
+      with:
+        name: PluginLoader
+        path: dist
+
+    - name: Release 📦
+      uses: softprops/action-gh-release@v1
+      with:
+        name: Release ${{ steps.tag_version.outputs.new_tag }}
+        tag_name: ${{ steps.tag_version.outputs.new_tag }}
+        files: ./dist/PluginLoader
+        generate_release_notes: true
+
+  prerelease:
+    name: Release the pre-release version of the package
+    if: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.release == 'prerelease' }}
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout 🧰
+      uses: actions/checkout@v3
+
+    - name: Fetch package artifact ⬇️
+      uses: actions/download-artifact@v3
+      with:
+        name: PluginLoader
+        path: dist
+    
+    - name: Install semver-tool asdf
+      uses: asdf-vm/actions/install@v1
+      with:
+        tool_versions: |
+          semver 3.3.0
+    
+    - name: Get tag 🏷️
+      id: old_tag
+      uses: rafarlopes/get-latest-pre-release-tag-action@v1
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        repository: 'decky-loader'
+
+    - name: Prepare tag ⚙️
+      id: ready_tag
+      run: |
+        export VERSION=${{ steps.old_tag.outputs.tag }}
+        echo "VERS: $VERSION"
+        OUT=$(semver bump prerel "$VERSION")
+        echo "OUT: $OUT"
+        echo ::set-output name=tag_name::v$OUT
+
+    - name: Push tag 📤
+      uses: rickstaa/action-create-tag@v1.3.2
+      if: ${{ steps.ready_tag.outputs.tag_name && github.event_name == 'workflow_dispatch' }}
+      with:
+        tag: ${{ steps.ready_tag.outputs.tag_name }}
+        message: Pre-release ${{ steps.ready_tag.outputs.tag_name }}
+
+    - name: Release 📦
+      uses: softprops/action-gh-release@v1
+      if: ${{ github.event_name == 'workflow_dispatch' }}
+      with:
+        name: Prerelease ${{ steps.ready_tag.outputs.tag_name }}
+        tag_name: ${{ steps.ready_tag.outputs.tag_name }}
+        files: ./dist/PluginLoader
+        prerelease: true
+        generate_release_notes: true
+
+  # nightly:
+  #   name: Release the nightly version of the package
+  #   if: ${{ github.event_name == 'schedule' }}
+  #   needs: build
+  #   runs-on: ubuntu-latest
+
+  #   steps:
+  #   - name: Checkout 🧰
+  #     uses: actions/checkout@v3
+
+  #   - name: Fetch package artifact ⬇️
+  #     uses: actions/download-artifact@v3
+  #     with:
+  #       name: PluginLoader
+  #       path: dist
+    
+  #   - name: Get tag 🏷️
+  #     id: old_tag
+  #     uses: rafarlopes/get-latest-pre-release-tag-action@v1
+  #     env:
+  #       GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+  #     with:
+  #       repository: 'decky-loader'
+    
+  #   - name: Prepare tag ⚙️
+  #     id: ready_tag
+  #     run: |
+  #       export VERSION=${{ steps.old_tag.outputs.tag }}
+  #       export COMMIT=$(git log -1 --pretty=format:%h)
+  #       echo ::set-output name=tag_name::$(sed -r 's/(-.*)?-pre$//' <<< $VERSION)-$COMMIT-nightly
+
+  #   - name: Push tag 📤
+  #     uses: rickstaa/action-create-tag@v1.3.2
+  #     if: ${{ steps.ready_tag.outputs.tag_name && github.event_name == 'workflow_dispatch' }}
+  #     with:
+  #       tag: ${{ steps.ready_tag.outputs.tag_name }}
+  #       message: Nightly ${{ steps.ready_tag.outputs.tag_name }}
+
+  #   - name: Release 📦
+  #     uses: softprops/action-gh-release@v1
+  #     if: ${{ github.event_name == 'workflow_dispatch' }}
+  #     with:
+  #       name: Prerelease ${{ steps.ready_tag.outputs.tag_name }}
+  #       tag_name: ${{ steps.ready_tag.outputs.tag_name }}
+  #       files: ./dist/PluginLoader
+  #       prerelease: true
+  #       generate_release_notes: true
+
+    # - name: Bump prerelease ⏫
+    #   id: bump
+    #   if: ${{ github.event_name == 'schedule' }}
+    #   run: |
+    #     git_hash=$(git rev-parse --short "$GITHUB_SHA")
+    #     echo ::set-output new_tag="nightly-$git_hash"
+
+    # - name: Push tag 📤
+    #   uses: rickstaa/action-create-tag@v1.3.2
+    #   if: ${{ github.event_name == 'schedule' }}
+    #   with:
+    #     tag: ${{ steps.bump.outputs.new_tag }}
+    #     message: Nightly ${{ steps.bump.outputs.new_tag }}
+
+    # - name: Release 📦
+    #   uses: softprops/action-gh-release@v1
+    #   if: ${{ github.event_name == 'schedule' }}
+    #   with:
+    #     name: Nightly ${{ steps.bump.outputs.new_tag }}
+    #     tag_name: ${{ steps.bump.outputs.new_tag }}
+    #     files: ./dist/PluginLoader
+    #     prerelease: true
+    #     generate_release_notes: true

.gitignore

@@ -10,7 +10,6 @@ __pycache__/
 .Python
 build/
 develop-eggs/
-dist/
 downloads/
 eggs/
 .eggs/
@@ -150,4 +149,14 @@ dmypy.json
 .pytype/
 
 # Cython debug symbols
-cython_debug/
+cython_debug/
+
+# static files are built
+backend/static
+
+# ignore settings.json
+# prevents leaking login details
+.vscode/settings.json
+
+# plugins folder for local launches
+plugins/*

.vscode/config.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]:-$0}"; )" &> /dev/null && pwd 2> /dev/null; )";
+# printf "${SCRIPT_DIR}\n"
+# printf "$(dirname $0)\n"
+if ! [[ -e "${SCRIPT_DIR}/settings.json" ]]; then 
+     printf '.vscode/settings.json does not exist. Creating it with default settings. Exiting afterwards. Run your task again.\n\n'
+     cp "${SCRIPT_DIR}/defsettings.json" "${SCRIPT_DIR}/settings.json"
+     exit 1
+else
+    printf '.vscode/settings.json does exist. Congrats.\n'
+    printf 'Make sure to change settings.json to match your deck.\n'
+fi

.vscode/defsettings.json

@@ -0,0 +1,7 @@
+{
+    "deckip"    : "0.0.0.0",
+    "deckport"  : "22",
+    "deckpass"  : "ssap",
+    "deckkey"   : "-i ${env:HOME}/.ssh/id_rsa",
+    "deckdir"   : "/home/deck"
+}

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run (Remote)",
+            "type": "python",
+            "request": "launch",
+            "console": "integratedTerminal",
+            "preLaunchTask": "remoterun",
+            "cwd": "",
+            "program": "",      
+        },
+        {
+            "name": "Run (Local)",
+            "type": "python",
+            "request": "launch",
+            "program": "${workspaceFolder}/backend/main.py",
+            "cwd": "${workspaceFolder}/backend",
+            "console": "integratedTerminal",
+            "env": {
+                "PLUGIN_PATH": "${workspaceFolder}/plugins"
+            },
+            "preLaunchTask": "localrun"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,149 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        // OTHER
+        {
+            "label": "checkforsettings",
+            "type": "shell",
+            "group": "none",
+            "detail": "Check that settings.json has been created",
+            "command": "bash -c ${workspaceFolder}/.vscode/config.sh",
+            "problemMatcher": []
+        },
+        {
+            "label": "localrun",
+            "type": "shell",
+            "group": "none",
+            "dependsOn" : ["buildall"],
+            "detail": "Check for local runs, create a plugins folder",
+            "command": "mkdir -p plugins",
+            "problemMatcher": []
+        },
+        {
+            "label": "remoterun",
+            "type": "shell",
+            "group": "none",
+            "dependsOn": [
+                "updateremote",
+                "runpydeck"
+            ],
+            "detail": "Task for remote run launches",
+            "command": "exit 0",
+            "problemMatcher": []
+        },
+        {
+            "label": "dependencies",
+            "type": "shell",
+            "group": "none",
+            "detail": "Check for local runs, create a plugins folder",
+            "command": "rsync -azp --rsh='ssh -p ${config:deckport} ${config:deckkey}' requirements.txt deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader/requirements.txt && ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'python -m ensurepip && python -m pip install --upgrade pip && python -m pip install --upgrade setuptools && python -m pip install -r ${config:deckdir}/homebrew/dev/pluginloader/requirements.txt'",
+            "problemMatcher": []
+        },
+        // BUILD
+        {
+            "label": "pnpmsetup",
+            "type": "shell",
+            "group": "build",
+            "detail": "Setup pnpm",
+            "command": "cd frontend && pnpm i",
+            "problemMatcher": []
+        },
+        {
+            "label": "buildfrontend",
+            "type": "npm",
+            "group": "build",
+            "detail": "rollup -c",
+            "script": "build",
+            "path": "frontend",
+            "problemMatcher": [],
+            
+        },
+        {
+            "label": "buildall",
+            "group": "build",
+            "detail": "Deploy pluginloader to deck",
+            "dependsOrder": "sequence",
+            "dependsOn": [
+                "pnpmsetup",
+                "buildfrontend"
+            ],
+            "problemMatcher": []
+        },
+        // DEPLOY
+        {
+            "label": "createfolders",
+            "detail": "Create plugins folder in expected directory",
+            "type": "shell",
+            "group": "none",
+            "dependsOn": [
+                "checkforsettings"
+            ],
+            "command": "ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'mkdir -p ${config:deckdir}/homebrew/dev/pluginloader && mkdir -p ${config:deckdir}/homebrew/dev/plugins'",
+            "problemMatcher": []
+        },
+        {
+            "label": "deploy",
+            "detail": "Deploy dev PluginLoader to deck",
+            "type": "shell",
+            "group": "none",
+            "command": "rsync -azp --delete --rsh='ssh -p ${config:deckport} ${config:deckkey}' --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='frontend/' --exclude='dist/' --exclude='contrib/' --exclude='*.log' --exclude='requirements.txt' --exclude='backend/__pycache__/' --exclude='.gitignore' . deck@${config:deckip}:${config:deckdir}/homebrew/dev/pluginloader",
+            "problemMatcher": []
+        },
+        {
+            "label": "deployall",
+            "dependsOrder": "sequence",
+            "group": "none",
+            "dependsOn": [
+                "createfolders",
+                "dependencies",
+                "deploy"
+            ],
+            "problemMatcher": []
+        },
+        // RUN
+        {
+            "label": "runpydeck",
+            "detail": "Run indev PluginLoader on Deck",
+            "type": "shell",
+            "group": "none",
+            "dependsOn" : ["checkforsettings"],
+            "command": "ssh deck@${config:deckip} -p ${config:deckport} ${config:deckkey} 'export PLUGIN_PATH=${config:deckdir}/homebrew/dev/plugins; export CHOWN_PLUGIN_PATH=0; echo '${config:deckpass}' | sudo -SE python3 ${config:deckdir}/homebrew/dev/pluginloader/backend/main.py'",
+            "problemMatcher": []
+        },
+        {
+            "label": "runpylocal",
+            "detail": "Run PluginLoader from python locally",
+            "type": "shell",
+            "group": "none",
+            "command": "export PLUGIN_PATH=${workspaceFolder}/plugins; export CHOWN_PLUGIN_PATH=0; sudo -E python3 ${workspaceFolder}/backend/main.py",
+            "problemMatcher": []
+        },
+        // ALL-IN-ONES
+        {
+            "label": "updateremote",
+            "detail": "Build and deploy",
+            "dependsOrder": "sequence",
+            "group": "none",
+            "dependsOn": [
+                "buildall",
+                "deployall",
+            ],
+            "problemMatcher": []
+        },
+        {
+            "label": "allinone",
+            "detail": "Build, deploy and run",
+            "dependsOrder": "sequence",
+            "group": {
+                "kind": "build",
+                "isDefault": true
+            },
+            "dependsOn": [
+                "buildall",
+                "deployall",
+                "runpydeck"
+            ],
+            "problemMatcher": []
+        }
+    ]
+}

README.md

@@ -2,17 +2,33 @@
 
 ![steamuserimages-a akamaihd](https://user-images.githubusercontent.com/10835354/161068262-ca723dc5-6795-417a-80f6-d8c1f9d03e93.jpg)
 
-## Installation
-- Go into the Steam Deck Settings
-- Under System -> System Settings toggle `Enable Developer Mode`
-- Scroll the sidebar all the way down and click on `Developer`
-- Under Miscellaneous, enable `CEF Remote Debugging`
-- Place the executable under `~/homebrew/services/plugin_loader`. Do not change the name of the file.
-- Place the plugin_manager.service file under `/etc/systemd/system`
-- Open a Terminal and type `systemctl --now --user enable plugin_manager`
+Keep an eye on the [Wiki](https://deckbrew.xyz) for more information about Plugin Loader, documentation + tools for plugin development and more.
 
-### Install Plugins
-- Simply copy the plugin's .py file into `~/homebrew/plugins`
+## Installation
+1. Go into the Steam Deck Settings
+2. Under System -> System Settings toggle `Enable Developer Mode`
+3. Scroll the sidebar all the way down and click on `Developer`
+4. Under Miscellaneous, enable `CEF Remote Debugging`
+5. Click on the `STEAM` button and select `Power` -> `Switch to Desktop`
+6. Make sure you have a password set with the "passwd" command in terminal to install it ([YouTube Guide](https://www.youtube.com/watch?v=1vOMYGj22rQ)).
+7. Open a terminal and paste the following command into it:
+    - For the latest pre-release:
+        - `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/install_prerelease.sh | sh`
+    - For testers/plugin developers:
+        - `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/install_prerelease.sh | sh`
+        - [Wiki Link](https://deckbrew.xyz/en/loader-dev/development)
+    - For the legacy version (unsupported):
+        - `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/legacy/dist/install_release.sh | sh`
+7. Done! Reboot back into Gaming mode and enjoy your plugins!
+
+### Install/Uninstall Plugins
+- Using the shopping bag button in the top right corner, you can go to the offical ["Plugin Store"](https://plugins.deckbrew.xyz/)
+- Simply copy the plugin's folder into `~/homebrew/plugins`
+- Use the settings menu to uninstall plugins, this will not remove any files made in different directories by plugins.
+
+### Uninstall
+- Open a terminal and paste the following command into it:
+  - `curl -L https://github.com/SteamDeckHomebrew/decky-loader/raw/main/dist/uninstall.sh | sh`
 
 ## Features
 - Clean injecting and loading of one or more plugins
@@ -21,9 +37,32 @@
 - Allows plugins to define python functions and run them from javascript.
 - Allows plugins to make fetch calls, bypassing cors completely.
 
-## Caveats
+## Developing plugins
+- There is no complete plugin development documentation yet. However a good starting point is the [Plugin Template](https://github.com/SteamDeckHomebrew/decky-plugin-template) repository.
 
-- You can only interact with the Plugin Menu via touchscreen.
+## [Contribution](https://deckbrew.xyz/en/loader-dev/development)
+- Please consult the [Wiki](https://deckbrew.xyz/en/loader-dev/development) for installing development versions of PluginLoader.
+  - This is also useful for Plugin Developers looking to target new but unreleased versions of PluginLoader.
+- [Here's how to get the Steam Deck UI on your enviroment of choice.](https://youtu.be/1IAbZte8e7E?t=112)
+    - (The video shows Windows usage but unless you're using Arch WSL/cygwin this script is unsupported on Windows.)
+
+### Getting Started
+
+1. Clone the repository using the latest commit to main before starting your PR.
+2. In your clone of the repository run these commands:
+   1. ``pnpm i``
+   2. ``pnpm run build``
+3. If you are modifying the UI, these will need to be run before deploying the changes to your Deck.
+4. Use the vscode tasks or ``deck.sh`` script to deploy your changes to your Deck to test them.
+5. You will be testing your changes with the python script version, so you will need to build, deploy and reload each time.
+
+Note: If you are recieveing build errors due to an out of date library, you should run this command inside of your repository:
+
+```bash
+pnpm update decky-frontend-lib --latest
+```
+
+Source control and deploying plugins are left to each respective contributor for the cloned repos in order to keep depedencies up to date.
 
 ## Credit
 

backend/browser.py

@@ -0,0 +1,126 @@
+# Full imports
+import json
+
+# Partial imports
+from aiohttp import ClientSession, web
+from asyncio import get_event_loop
+from concurrent.futures import ProcessPoolExecutor
+from hashlib import sha256
+from io import BytesIO
+from logging import getLogger
+from os import path, rename, listdir
+from shutil import rmtree
+from subprocess import call
+from time import time
+from zipfile import ZipFile
+
+# Local modules
+from helpers import get_ssl_context, get_user, get_user_group
+from injector import get_tab, inject_to_tab
+
+logger = getLogger("Browser")
+
+class PluginInstallContext:
+    def __init__(self, artifact, name, version, hash) -> None:
+        self.artifact = artifact
+        self.name = name
+        self.version = version
+        self.hash = hash
+
+class PluginBrowser:
+    def __init__(self, plugin_path, server_instance, plugins) -> None:
+        self.plugin_path = plugin_path
+        self.plugins = plugins
+        self.install_requests = {}
+
+        server_instance.add_routes([
+            web.post("/browser/install_plugin", self.install_plugin),
+            web.post("/browser/uninstall_plugin", self.uninstall_plugin)
+        ])
+
+    def _unzip_to_plugin_dir(self, zip, name, hash):
+        zip_hash = sha256(zip.getbuffer()).hexdigest()
+        if hash and (zip_hash != hash):
+            return False
+        zip_file = ZipFile(zip)
+        zip_file.extractall(self.plugin_path)
+        code_chown = call(["chown", "-R", get_user()+":"+get_user_group(), self.plugin_path])
+        code_chmod = call(["chmod", "-R", "555", self.plugin_path])
+        if code_chown != 0 or code_chmod != 0:
+            logger.error(f"chown/chmod exited with a non-zero exit code (chown: {code_chown}, chmod: {code_chmod})")
+            return False
+        return True
+
+    def find_plugin_folder(self, name):
+        for folder in listdir(self.plugin_path):
+            try:
+                with open(path.join(self.plugin_path, folder, 'plugin.json'), 'r') as f:
+                    plugin = json.load(f)
+
+                if plugin['name'] == name:
+                    return path.join(self.plugin_path, folder)
+            except:
+                logger.debug(f"skipping {folder}")
+
+    async def uninstall_plugin(self, name):
+        tab = await get_tab("SP")
+
+        try:
+            if type(name) != str:
+                data = await name.post()
+                name = data.get("name", "undefined")
+            logger.info("uninstalling " + name)
+            logger.info(" at dir " + self.find_plugin_folder(name))
+            await tab.evaluate_js(f"DeckyPluginLoader.unloadPlugin('{name}')")
+            if self.plugins[name]:
+                self.plugins[name].stop()
+                self.plugins.pop(name, None)
+            rmtree(self.find_plugin_folder(name))
+        except FileNotFoundError:
+            logger.warning(f"Plugin {name} not installed, skipping uninstallation")
+
+        return web.Response(text="Requested plugin uninstall")
+
+    async def _install(self, artifact, name, version, hash):
+        try: 
+            await self.uninstall_plugin(name)
+        except:
+            logger.error(f"Plugin {name} not installed, skipping uninstallation")
+        logger.info(f"Installing {name} (Version: {version})")
+        async with ClientSession() as client:
+            logger.debug(f"Fetching {artifact}")
+            res = await client.get(artifact, ssl=get_ssl_context())
+            if res.status == 200:
+                logger.debug("Got 200. Reading...")
+                data = await res.read()
+                logger.debug(f"Read {len(data)} bytes")
+                res_zip = BytesIO(data)
+                with ProcessPoolExecutor() as executor:
+                    logger.debug("Unzipping...")
+                    ret = self._unzip_to_plugin_dir(res_zip, name, hash)
+                    if ret:
+                        logger.info(f"Installed {name} (Version: {version})")
+                        await inject_to_tab("SP", "window.syncDeckyPlugins()")
+                    else:
+                        logger.fatal(f"SHA-256 Mismatch!!!! {name} (Version: {version})")
+            else:
+                logger.fatal(f"Could not fetch from URL. {await res.text()}")
+
+    async def install_plugin(self, request):
+        data = await request.post()
+        get_event_loop().create_task(self.request_plugin_install(data.get("artifact", ""), data.get("name", "No name"), data.get("version", "dev"), data.get("hash", False)))
+        return web.Response(text="Requested plugin install")
+
+    async def request_plugin_install(self, artifact, name, version, hash):
+        request_id = str(time())
+        self.install_requests[request_id] = PluginInstallContext(artifact, name, version, hash)
+        tab = await get_tab("SP")
+        await tab.open_websocket()
+        await tab.evaluate_js(f"DeckyPluginLoader.addPluginInstallPrompt('{name}', '{version}', '{request_id}', '{hash}')")
+    
+    async def confirm_plugin_install(self, request_id):
+        request = self.install_requests.pop(request_id)
+        await self._install(request.artifact, request.name, request.version, request.hash)
+
+    def cancel_plugin_install(self, request_id):
+        self.install_requests.pop(request_id)

backend/helpers.py

@@ -0,0 +1,62 @@
+import certifi
+import ssl
+import uuid
+
+from aiohttp.web import middleware, Response
+from subprocess import check_output
+from time import sleep
+
+# global vars
+csrf_token = str(uuid.uuid4())
+ssl_ctx = ssl.create_default_context(cafile=certifi.where())
+user = None
+group = None
+
+def get_ssl_context():
+    return ssl_ctx
+
+def get_csrf_token():
+    return csrf_token
+
+@middleware
+async def csrf_middleware(request, handler):
+    if str(request.method) == "OPTIONS" or request.headers.get('Authentication') == csrf_token or str(request.rel_url) == "/auth/token" or str(request.rel_url).startswith("/plugins/load_main/") or str(request.rel_url).startswith("/static/") or str(request.rel_url).startswith("/legacy/") or str(request.rel_url).startswith("/steam_resource/"):
+        return await handler(request)
+    return Response(text='Forbidden', status='403')
+
+# Get the user by checking for the first logged in user. As this is run
+# by systemd at startup the process is likely to start before the user
+# logs in, so we will wait here until they are available. Note that
+# other methods such as getenv wont work as there was no $SUDO_USER to
+# start the systemd service.
+def set_user():
+    global user
+    cmd = "who | awk '{print $1}' | sort | head -1"
+    while user == None:
+        name = check_output(cmd, shell=True).decode().strip()
+        if name not in [None, '']:
+            user = name
+        sleep(0.1)
+
+# Get the global user. get_user must be called first.
+def get_user() -> str:
+    global user
+    if user == None:
+        raise ValueError("helpers.get_user method called before user variable was set. Run helpers.set_user first.")
+    return user
+
+# Set the global user group. get_user must be called first
+def set_user_group() -> str:
+    global group
+    global user
+    if user == None:
+        raise ValueError("helpers.set_user_dir method called before user variable was set. Run helpers.set_user first.")
+    if group == None:
+        group = check_output(["id", "-g", "-n", user]).decode().strip()
+
+# Get the group of the global user. set_user_group must be called first.
+def get_user_group() -> str:
+    global group
+    if group == None:
+        raise ValueError("helpers.get_user_group method called before group variable was set. Run helpers.set_user_group first.")
+    return group

backend/injector.py

@@ -0,0 +1,114 @@
+#Injector code from https://github.com/SteamDeckHomebrew/steamdeck-ui-inject. More info on how it works there.
+
+from asyncio import sleep
+from logging import debug, getLogger
+from traceback import format_exc
+
+from aiohttp import ClientSession
+
+BASE_ADDRESS = "http://localhost:8080"
+
+logger = getLogger("Injector")
+
+class Tab:
+    def __init__(self, res) -> None:
+        self.title = res["title"]
+        self.id = res["id"]
+        self.ws_url = res["webSocketDebuggerUrl"]
+
+        self.websocket = None
+        self.client = None
+
+    async def open_websocket(self):
+        self.client = ClientSession()
+        self.websocket = await self.client.ws_connect(self.ws_url)
+
+    async def listen_for_message(self):
+        async for message in self.websocket:
+            yield message
+
+    async def _send_devtools_cmd(self, dc, receive=True):
+        if self.websocket:
+            await self.websocket.send_json(dc)
+            return (await self.websocket.receive_json()) if receive else None
+        raise RuntimeError("Websocket not opened")
+
+    async def evaluate_js(self, js, run_async=False, manage_socket=True, get_result=True):
+        if manage_socket:
+            await self.open_websocket()
+
+        res = await self._send_devtools_cmd({
+            "id": 1,
+            "method": "Runtime.evaluate",
+            "params": {
+                "expression": js,
+                "userGesture": True,
+                "awaitPromise": run_async
+            }
+        }, get_result)
+
+        if manage_socket:
+            await self.client.close()
+        return res
+
+    async def get_steam_resource(self, url):
+        res = await self.evaluate_js(f'(async function test() {{ return await (await fetch("{url}")).text() }})()', True)
+        return res["result"]["result"]["value"]
+
+    def __repr__(self):
+        return self.title
+
+async def get_tabs():
+    async with ClientSession() as web:
+        res = {}
+
+        while True:
+            try:
+                res = await web.get(f"{BASE_ADDRESS}/json")
+                break
+            except:
+                logger.debug("Steam isn't available yet. Wait for a moment...")
+                logger.debug(format_exc())
+                await sleep(5)
+
+        if res.status == 200:
+            r = await res.json()
+            return [Tab(i) for i in r]
+        else:
+            raise Exception(f"/json did not return 200. {await res.text()}")
+
+async def get_tab(tab_name):
+    tabs = await get_tabs()
+    tab = next((i for i in tabs if i.title == tab_name), None)
+    if not tab:
+        raise ValueError(f"Tab {tab_name} not found")
+    return tab
+
+async def inject_to_tab(tab_name, js, run_async=False):
+    tab = await get_tab(tab_name)
+
+    return await tab.evaluate_js(js, run_async)
+
+async def tab_has_global_var(tab_name, var_name):
+    try:
+        tab = await get_tab(tab_name)
+    except ValueError:
+        return False
+    res = await tab.evaluate_js(f"window['{var_name}'] !== null && window['{var_name}'] !== undefined", False)
+
+    if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
+        return False
+
+    return res["result"]["result"]["value"]
+
+async def tab_has_element(tab_name, element_name):
+    try:
+        tab = await get_tab(tab_name)
+    except ValueError:
+        return False
+    res = await tab.evaluate_js(f"document.getElementById('{element_name}') != null", False)
+    
+    if not "result" in res or not "result" in res["result"] or not "value" in res["result"]["result"]:
+        return False
+
+    return res["result"]["result"]["value"]

backend/legacy/library.js

@@ -0,0 +1,84 @@
+class PluginEventTarget extends EventTarget { }
+method_call_ev_target = new PluginEventTarget();
+
+window.addEventListener("message", function(evt) {
+    let ev = new Event(evt.data.call_id);
+    ev.data = evt.data.result;
+    method_call_ev_target.dispatchEvent(ev);
+}, false);
+
+async function call_server_method(method_name, arg_object={}) {
+    const token = await fetch("http://127.0.0.1:1337/auth/token").then(r => r.text());
+    const response = await fetch(`http://127.0.0.1:1337/methods/${method_name}`, {
+      method: 'POST',
+      credentials: "include",
+      headers: {
+        'Content-Type': 'application/json',
+        Authentication: token
+      },
+      body: JSON.stringify(arg_object),
+    });
+
+    const dta = await response.json();
+    if (!dta.success) throw dta.result;
+    return dta.result;
+}
+
+// Source: https://stackoverflow.com/a/2117523 Thanks!
+function uuidv4() {
+    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
+        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+    );
+}
+
+async function fetch_nocors(url, request={}) {
+    let args = { method: "POST", headers: {}, body: "" };
+    request = {...args, ...request};
+    request.url = url;
+    request.data = request.body;
+    delete request.body; //maintain api-compatibility with fetch
+    return await call_server_method("http_request", request);
+}
+
+async function call_plugin_method(method_name, arg_object={}) {
+    if (plugin_name == undefined) 
+        throw new Error("Plugin methods can only be called from inside plugins (duh)");
+    const token = await fetch("http://127.0.0.1:1337/auth/token").then(r => r.text());
+    const response = await fetch(`http://127.0.0.1:1337/plugins/${plugin_name}/methods/${method_name}`, {
+        method: 'POST',
+        credentials: "include",
+        headers: {
+            'Content-Type': 'application/json',
+            Authentication: token
+        },
+        body: JSON.stringify({
+            args: arg_object,
+        }),
+    });
+
+    const dta = await response.json();
+    if (!dta.success) throw dta.result;
+    return dta.result;
+}
+
+async function execute_in_tab(tab, run_async, code) {
+    return await call_server_method("execute_in_tab", {
+        'tab': tab,
+        'run_async': run_async,
+        'code': code
+    });
+}
+
+async function inject_css_into_tab(tab, style) {
+    return await call_server_method("inject_css_into_tab", {
+        'tab': tab,
+        'style': style
+    });
+}
+
+async function remove_css_from_tab(tab, css_id) {
+    return await call_server_method("remove_css_from_tab", {
+        'tab': tab,
+        'css_id': css_id
+    });
+}

backend/loader.py

@@ -0,0 +1,194 @@
+from asyncio import Queue
+from json.decoder import JSONDecodeError
+from logging import getLogger
+from os import listdir, path
+from pathlib import Path
+from traceback import print_exc
+
+from aiohttp import web
+from genericpath import exists
+from watchdog.events import RegexMatchingEventHandler
+from watchdog.utils import UnsupportedLibc
+
+try:
+    from watchdog.observers.inotify import InotifyObserver as Observer
+except UnsupportedLibc:
+    from watchdog.observers.fsevents import FSEventsObserver as Observer
+
+from injector import get_tab, inject_to_tab
+from plugin import PluginWrapper
+
+
+class FileChangeHandler(RegexMatchingEventHandler):
+    def __init__(self, queue, plugin_path) -> None:
+        super().__init__(regexes=[r'^.*?dist\/index\.js$', r'^.*?main\.py$'])
+        self.logger = getLogger("file-watcher")
+        self.plugin_path = plugin_path
+        self.queue = queue
+
+    def maybe_reload(self, src_path):
+        plugin_dir = Path(path.relpath(src_path, self.plugin_path)).parts[0]
+        if exists(path.join(self.plugin_path, plugin_dir, "plugin.json")):
+            self.queue.put_nowait((path.join(self.plugin_path, plugin_dir, "main.py"), plugin_dir, True))
+
+    def on_created(self, event):
+        src_path = event.src_path
+        if "__pycache__" in src_path:
+            return
+
+        # check to make sure this isn't a directory
+        if path.isdir(src_path):
+            return
+
+        # get the directory name of the plugin so that we can find its "main.py" and reload it; the
+        # file that changed is not necessarily the one that needs to be reloaded
+        self.logger.debug(f"file created: {src_path}")
+        self.maybe_reload(src_path)
+
+    def on_modified(self, event):
+        src_path = event.src_path
+        if "__pycache__" in src_path:
+            return
+
+        # check to make sure this isn't a directory
+        if path.isdir(src_path):
+            return
+
+        # get the directory name of the plugin so that we can find its "main.py" and reload it; the
+        # file that changed is not necessarily the one that needs to be reloaded
+        self.logger.debug(f"file modified: {src_path}")
+        self.maybe_reload(src_path)
+
+class Loader:
+    def __init__(self, server_instance, plugin_path, loop, live_reload=False) -> None:
+        self.loop = loop
+        self.logger = getLogger("Loader")
+        self.plugin_path = plugin_path
+        self.logger.info(f"plugin_path: {self.plugin_path}")
+        self.plugins = {}
+
+        if live_reload:
+            self.reload_queue = Queue()
+            self.observer = Observer()
+            self.observer.schedule(FileChangeHandler(self.reload_queue, plugin_path), self.plugin_path, recursive=True)
+            self.observer.start()
+            self.loop.create_task(self.handle_reloads())
+
+        server_instance.add_routes([
+            web.get("/plugins", self.get_plugins),
+            web.get("/plugins/{plugin_name}/frontend_bundle", self.handle_frontend_bundle),
+            web.post("/plugins/{plugin_name}/methods/{method_name}", self.handle_plugin_method_call),
+            web.get("/plugins/{plugin_name}/assets/{path:.*}", self.handle_frontend_assets),
+
+            # The following is legacy plugin code.
+            web.get("/plugins/load_main/{name}", self.load_plugin_main_view),
+            web.get("/plugins/plugin_resource/{name}/{path:.+}", self.handle_sub_route),
+            web.get("/steam_resource/{path:.+}", self.get_steam_resource)
+        ])
+
+    async def get_plugins(self, request):
+        plugins = list(self.plugins.values())
+        return web.json_response([str(i) if not i.legacy else "$LEGACY_"+str(i) for i in plugins])
+
+    def handle_frontend_assets(self, request):
+        plugin = self.plugins[request.match_info["plugin_name"]]
+        file = path.join(self.plugin_path, plugin.plugin_directory, "dist/assets", request.match_info["path"])
+
+        return web.FileResponse(file)
+
+    def handle_frontend_bundle(self, request):
+        plugin = self.plugins[request.match_info["plugin_name"]]
+
+        with open(path.join(self.plugin_path, plugin.plugin_directory, "dist/index.js"), 'r') as bundle:
+            return web.Response(text=bundle.read(), content_type="application/javascript")
+
+    def import_plugin(self, file, plugin_directory, refresh=False):
+        try:
+            plugin = PluginWrapper(file, plugin_directory, self.plugin_path)
+            if plugin.name in self.plugins:
+                    if not "debug" in plugin.flags and refresh:
+                        self.logger.info(f"Plugin {plugin.name} is already loaded and has requested to not be re-loaded")
+                        return
+                    else:
+                        self.plugins[plugin.name].stop()
+                        self.plugins.pop(plugin.name, None)
+            if plugin.passive:
+                self.logger.info(f"Plugin {plugin.name} is passive")
+            self.plugins[plugin.name] = plugin.start()
+            self.logger.info(f"Loaded {plugin.name}")
+            self.loop.create_task(self.dispatch_plugin(plugin.name if not plugin.legacy else "$LEGACY_" + plugin.name))
+        except Exception as e:
+            self.logger.error(f"Could not load {file}. {e}")
+            print_exc()
+
+    async def dispatch_plugin(self, name):
+        await inject_to_tab("SP", f"window.importDeckyPlugin('{name}')")
+
+    def import_plugins(self):
+        self.logger.info(f"import plugins from {self.plugin_path}")
+
+        directories = [i for i in listdir(self.plugin_path) if path.isdir(path.join(self.plugin_path, i)) and path.isfile(path.join(self.plugin_path, i, "plugin.json"))]
+        for directory in directories:
+            self.logger.info(f"found plugin: {directory}")
+            self.import_plugin(path.join(self.plugin_path, directory, "main.py"), directory)
+
+    async def handle_reloads(self):
+        while True:
+            args = await self.reload_queue.get()
+            self.import_plugin(*args)
+
+    async def handle_plugin_method_call(self, request):
+        res = {}
+        plugin = self.plugins[request.match_info["plugin_name"]]
+        method_name = request.match_info["method_name"]
+        try:
+            method_info = await request.json()
+            args = method_info["args"]
+        except JSONDecodeError:
+            args = {}
+        try:
+          if method_name.startswith("_"):
+              raise RuntimeError("Tried to call private method")
+          res["result"] = await plugin.execute_method(method_name, args)
+          res["success"] = True
+        except Exception as e:
+            res["result"] = str(e)
+            res["success"] = False
+        return web.json_response(res)
+
+    """
+    The following methods are used to load legacy plugins, which are considered deprecated.
+    I made the choice to re-add them so that the first iteration/version of the react loader
+    can work as a drop-in replacement for the stable branch of the PluginLoader, so that we
+    can introduce it more smoothly and give people the chance to sample the new features even
+    without plugin support. They will be removed once legacy plugins are no longer relevant.
+    """
+    async def load_plugin_main_view(self, request):
+        plugin = self.plugins[request.match_info["name"]]
+        with open(path.join(self.plugin_path, plugin.plugin_directory, plugin.main_view_html), 'r') as template:
+            template_data = template.read()
+            ret = f"""
+            <script src="/legacy/library.js"></script>
+            <script>window.plugin_name = '{plugin.name}' </script>
+            <base href="http://127.0.0.1:1337/plugins/plugin_resource/{plugin.name}/">
+            {template_data}
+            """
+            return web.Response(text=ret, content_type="text/html")
+
+    async def handle_sub_route(self, request):
+        plugin = self.plugins[request.match_info["name"]]
+        route_path = request.match_info["path"]
+        self.logger.info(path)
+        ret = ""
+        file_path = path.join(self.plugin_path, plugin.plugin_directory, route_path)
+        with open(file_path, 'r') as resource_data:
+            ret = resource_data.read()
+
+        return web.Response(text=ret)
+
+    async def get_steam_resource(self, request):
+        tab = await get_tab("QuickAccess")
+        try:
+            return web.Response(text=await tab.get_steam_resource(f"https://steamloopback.host/{request.match_info['path']}"), content_type="text/html")
+        except Exception as e:
+            return web.Response(text=str(e), status=400)

backend/main.py

@@ -0,0 +1,118 @@
+# Full imports
+import aiohttp_cors
+
+# Partial imports
+from aiohttp import ClientSession
+from aiohttp.web import Application, run_app, static, get, Response
+from aiohttp_jinja2 import setup as jinja_setup
+from asyncio import get_event_loop, sleep
+from json import dumps, loads
+from logging import DEBUG, INFO, basicConfig, getLogger
+from os import getenv, path
+from subprocess import call
+
+# local modules
+from browser import PluginBrowser
+from helpers import csrf_middleware, get_csrf_token, get_user, get_user_group, set_user, set_user_group
+from injector import inject_to_tab, tab_has_global_var
+from loader import Loader
+from updater import Updater
+from utilities import Utilities
+
+# Ensure USER and GROUP vars are set first.
+# TODO: This isn't the best way to do this but supports the current
+# implementation. All the config load and environment setting eventually be
+# moved into init or a config/loader method.
+set_user()
+set_user_group()
+USER = get_user()
+GROUP = get_user_group()
+HOME_PATH = "/home/"+USER
+CONFIG = {
+    "plugin_path": getenv("PLUGIN_PATH", HOME_PATH+"/homebrew/plugins"),
+    "chown_plugin_path": getenv("CHOWN_PLUGIN_PATH", "1") == "1",
+    "server_host": getenv("SERVER_HOST", "127.0.0.1"),
+    "server_port": int(getenv("SERVER_PORT", "1337")),
+    "live_reload": getenv("LIVE_RELOAD", "1") == "1",
+    "log_level": {"CRITICAL": 50, "ERROR": 40, "WARNING":30, "INFO": 20, "DEBUG": 10}[getenv("LOG_LEVEL", "INFO")]
+}
+
+basicConfig(level=CONFIG["log_level"], format="[%(module)s][%(levelname)s]: %(message)s")
+
+logger = getLogger("Main")
+
+async def chown_plugin_dir(_):
+    code_chown = call(["chown", "-R", USER+":"+GROUP, CONFIG["plugin_path"]])
+    code_chmod = call(["chmod", "-R", "555", CONFIG["plugin_path"]])
+    if code_chown != 0 or code_chmod != 0:
+        logger.error(f"chown/chmod exited with a non-zero exit code (chown: {code_chown}, chmod: {code_chmod})")
+
+class PluginManager:
+    def __init__(self) -> None:
+        self.loop = get_event_loop()
+        self.web_app = Application()
+        self.web_app.middlewares.append(csrf_middleware)
+        self.cors = aiohttp_cors.setup(self.web_app, defaults={
+          "https://steamloopback.host": aiohttp_cors.ResourceOptions(expose_headers="*",
+                allow_headers="*", allow_credentials=True)
+        })
+        self.plugin_loader = Loader(self.web_app, CONFIG["plugin_path"], self.loop, CONFIG["live_reload"])
+        self.plugin_browser = PluginBrowser(CONFIG["plugin_path"], self.web_app, self.plugin_loader.plugins)
+        self.utilities = Utilities(self)
+        self.updater = Updater(self)
+
+        jinja_setup(self.web_app)
+        self.web_app.on_startup.append(self.inject_javascript)
+        if CONFIG["chown_plugin_path"] == True:
+            self.web_app.on_startup.append(chown_plugin_dir)
+        self.loop.create_task(self.loader_reinjector())
+        self.loop.create_task(self.load_plugins())
+        self.loop.set_exception_handler(self.exception_handler)
+        self.web_app.add_routes([get("/auth/token", self.get_auth_token)])
+
+        for route in list(self.web_app.router.routes()):
+          self.cors.add(route)
+        self.web_app.add_routes([static("/static", path.join(path.dirname(__file__), 'static'))])
+        self.web_app.add_routes([static("/legacy", path.join(path.dirname(__file__), 'legacy'))])
+
+    def exception_handler(self, loop, context):
+        if context["message"] == "Unclosed connection":
+            return
+        loop.default_exception_handler(context)
+
+    async def get_auth_token(self, request):
+        return Response(text=get_csrf_token())
+
+    async def wait_for_server(self):
+        async with ClientSession() as web:
+            while True:
+                try:
+                    await web.get(f"http://{CONFIG['server_host']}:{CONFIG['server_port']}")
+                    return
+                except Exception as e:
+                    await sleep(0.1)
+
+    async def load_plugins(self):
+        await self.wait_for_server()
+        self.plugin_loader.import_plugins()
+        #await inject_to_tab("SP", "window.syncDeckyPlugins();")
+
+    async def loader_reinjector(self):
+        while True:
+            await sleep(5)
+            if not await tab_has_global_var("SP", "deckyHasLoaded"):
+                logger.info("Plugin loader isn't present in Steam anymore, reinjecting...")
+                await self.inject_javascript()
+
+    async def inject_javascript(self, request=None):
+        try:
+            await inject_to_tab("SP", "try{" + open(path.join(path.dirname(__file__), "./static/plugin-loader.iife.js"), "r").read() + "}catch(e){console.error(e)}", True)
+        except:
+            logger.info("Failed to inject JavaScript into tab")
+            pass
+
+    def run(self):
+        return run_app(self.web_app, host=CONFIG["server_host"], port=CONFIG["server_port"], loop=self.loop, access_log=None)
+
+if __name__ == "__main__":
+    PluginManager().run()

backend/plugin.py

@@ -0,0 +1,120 @@
+import multiprocessing
+from asyncio import (Lock, get_event_loop, new_event_loop,
+                     open_unix_connection, set_event_loop, sleep,
+                     start_unix_server)
+from concurrent.futures import ProcessPoolExecutor
+from importlib.util import module_from_spec, spec_from_file_location
+from json import dumps, load, loads
+from os import path, setuid
+from signal import SIGINT, signal
+from sys import exit
+from time import time
+
+multiprocessing.set_start_method("fork")
+
+class PluginWrapper:
+    def __init__(self, file, plugin_directory, plugin_path) -> None:
+        self.file = file
+        self.plugin_directory = plugin_directory
+        self.reader = None
+        self.writer = None
+        self.socket_addr = f"/tmp/plugin_socket_{time()}"
+        self.method_call_lock = Lock()
+
+        json = load(open(path.join(plugin_path, plugin_directory, "plugin.json"), "r"))
+
+        self.legacy = False
+        self.main_view_html = json["main_view_html"] if "main_view_html" in json else ""
+        self.tile_view_html = json["tile_view_html"] if "tile_view_html" in json else ""
+        self.legacy = self.main_view_html or self.tile_view_html
+
+        self.name = json["name"]
+        self.author = json["author"]
+        self.flags = json["flags"]
+
+        self.passive = not path.isfile(self.file)
+
+    def __str__(self) -> str:
+        return self.name
+
+    def _init(self):
+        signal(SIGINT, lambda s, f: exit(0))
+
+        set_event_loop(new_event_loop())
+        if self.passive:
+            return
+        setuid(0 if "root" in self.flags else 1000)
+        spec = spec_from_file_location("_", self.file)
+        module = module_from_spec(spec)
+        spec.loader.exec_module(module)
+        self.Plugin = module.Plugin
+
+        if hasattr(self.Plugin, "_main"):
+            get_event_loop().create_task(self.Plugin._main(self.Plugin))
+        get_event_loop().create_task(self._setup_socket())
+        get_event_loop().run_forever()
+
+    async def _setup_socket(self):
+        self.socket = await start_unix_server(self._listen_for_method_call, path=self.socket_addr)
+
+    async def _listen_for_method_call(self, reader, writer):
+        while True:
+            data = loads((await reader.readline()).decode("utf-8"))
+            if "stop" in data:
+                get_event_loop().stop()
+                while get_event_loop().is_running():
+                    await sleep(0)
+                get_event_loop().close()
+                return
+            d = {"res": None, "success": True}
+            try:
+                d["res"] = await getattr(self.Plugin, data["method"])(self.Plugin, **data["args"])
+            except Exception as e:
+                d["res"] = str(e)
+                d["success"] = False
+            finally:
+                writer.write((dumps(d)+"\n").encode("utf-8"))
+                await writer.drain()
+
+    async def _open_socket_if_not_exists(self):
+        if not self.reader:
+            retries = 0
+            while retries < 10:
+                try:
+                    self.reader, self.writer = await open_unix_connection(self.socket_addr)
+                    return True
+                except:
+                    await sleep(2)
+                    retries += 1
+            return False
+        else:
+            return True
+
+    def start(self):
+        if self.passive:
+            return self
+        multiprocessing.Process(target=self._init).start()
+        return self
+
+    def stop(self):
+        if self.passive:
+            return
+        async def _(self):
+            if await self._open_socket_if_not_exists():
+                self.writer.write((dumps({"stop": True})+"\n").encode("utf-8"))
+                await self.writer.drain()
+                self.writer.close()
+        get_event_loop().create_task(_(self))
+
+    async def execute_method(self, method_name, kwargs):
+        if self.passive:
+            raise RuntimeError("This plugin is passive (aka does not implement main.py)")
+        async with self.method_call_lock:
+            if await self._open_socket_if_not_exists():
+                self.writer.write(
+                    (dumps({"method": method_name, "args": kwargs})+"\n").encode("utf-8"))
+                await self.writer.drain()
+                res = loads((await self.reader.readline()).decode("utf-8"))
+                if not res["success"]:
+                    raise Exception(res["res"])
+                return res["res"]

backend/updater.py

@@ -0,0 +1,122 @@
+import uuid
+from logging import getLogger
+from json.decoder import JSONDecodeError
+
+from asyncio import sleep
+
+from aiohttp import ClientSession, web
+
+from injector import inject_to_tab, get_tab
+
+from os import getcwd, path, remove
+
+from subprocess import call
+
+import helpers
+
+logger = getLogger("Updater")
+
+class Updater:
+    def __init__(self, context) -> None:
+        self.context = context
+        self.updater_methods = {
+            "get_version": self.get_version,
+            "do_update": self.do_update,
+            "do_restart": self.do_restart,
+            "check_for_updates": self.check_for_updates
+        }
+        self.remoteVer = None
+        try:
+            with open(path.join(getcwd(), ".loader.version"), 'r') as version_file:
+                self.localVer = version_file.readline().replace("\n", "")
+        except:
+            self.localVer = False
+
+        if context:
+            context.web_app.add_routes([
+                web.post("/updater/{method_name}", self._handle_server_method_call)
+            ])
+            context.loop.create_task(self.version_reloader())
+
+    async def _handle_server_method_call(self, request):
+        method_name = request.match_info["method_name"]
+        try:
+            args = await request.json()
+        except JSONDecodeError:
+            args = {}
+        res = {}
+        try:
+            r = await self.updater_methods[method_name](**args)
+            res["result"] = r
+            res["success"] = True
+        except Exception as e:
+            res["result"] = str(e)
+            res["success"] = False
+        return web.json_response(res)
+
+    async def get_version(self):
+        if self.localVer:
+            return {
+                "current": self.localVer,
+                "remote": self.remoteVer,
+                "updatable": self.localVer != None
+            }
+        else:
+            return {"current": "unknown", "remote": self.remoteVer, "updatable": False}
+
+    async def check_for_updates(self):
+        async with ClientSession() as web:
+            async with web.request("GET", "https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases", ssl=helpers.get_ssl_context()) as res:
+                remoteVersions = await res.json()
+                self.remoteVer = next(filter(lambda ver: ver["prerelease"] and ver["tag_name"].startswith("v") and ver["tag_name"].find("-pre"), remoteVersions), None)
+                logger.info("Updated remote version information")
+                tab = await get_tab("SP")
+                await tab.evaluate_js(f"window.DeckyPluginLoader.notifyUpdates()", False, True, False)
+        return await self.get_version()
+
+    async def version_reloader(self):
+        await sleep(30)
+        while True:
+            try:
+                await self.check_for_updates()
+            except:
+                pass
+            await sleep(60 * 60 * 6) # 6 hours
+
+    async def do_update(self):
+        version = self.remoteVer["tag_name"]
+        #TODO don't hardcode this
+        download_url = self.remoteVer["assets"][0]["browser_download_url"]
+
+        tab = await get_tab("SP")
+        await tab.open_websocket()
+        async with ClientSession() as web:
+            async with web.request("GET", download_url, ssl=helpers.get_ssl_context(), allow_redirects=True) as res:
+                total = int(res.headers.get('content-length', 0))
+                try:
+                    remove(path.join(getcwd(), "PluginLoader"))
+                except:
+                    pass
+                with open(path.join(getcwd(), "PluginLoader"), "wb") as out:
+                    progress = 0
+                    raw = 0
+                    async for c in res.content.iter_chunked(512):
+                        out.write(c)
+                        raw += len(c)
+                        new_progress = round((raw / total) * 100)
+                        if progress != new_progress:
+                            self.context.loop.create_task(tab.evaluate_js(f"window.DeckyUpdater.updateProgress({new_progress})", False, False, False))
+                            progress = new_progress
+
+                with open(path.join(getcwd(), ".loader.version"), "w") as out:
+                    out.write(version)
+
+                call(['chmod', '+x', path.join(getcwd(), "PluginLoader")])
+
+                logger.info("Updated loader installation.")
+                await tab.evaluate_js("window.DeckyUpdater.finish()", False, False)
+                await tab.client.close()
+
+    async def do_restart(self):
+        call(["systemctl", "daemon-reload"])
+        call(["systemctl", "restart", "plugin_loader"])

backend/utilities.py

@@ -0,0 +1,135 @@
+import uuid
+from json.decoder import JSONDecodeError
+
+from aiohttp import ClientSession, web
+
+from injector import inject_to_tab
+import helpers
+
+class Utilities:
+    def __init__(self, context) -> None:
+        self.context = context
+        self.util_methods = {
+            "ping": self.ping,
+            "http_request": self.http_request,
+            "cancel_plugin_install": self.cancel_plugin_install,
+            "confirm_plugin_install": self.confirm_plugin_install,
+            "execute_in_tab": self.execute_in_tab,
+            "inject_css_into_tab": self.inject_css_into_tab,
+            "remove_css_from_tab": self.remove_css_from_tab
+        }
+
+        if context:
+            context.web_app.add_routes([
+                web.post("/methods/{method_name}", self._handle_server_method_call)
+            ])
+
+    async def _handle_server_method_call(self, request):
+        method_name = request.match_info["method_name"]
+        try:
+            args = await request.json()
+        except JSONDecodeError:
+            args = {}
+        res = {}
+        try:
+            r = await self.util_methods[method_name](**args)
+            res["result"] = r
+            res["success"] = True
+        except Exception as e:
+            res["result"] = str(e)
+            res["success"] = False
+        return web.json_response(res)
+
+    async def confirm_plugin_install(self, request_id):
+        return await self.context.plugin_browser.confirm_plugin_install(request_id)
+
+    def cancel_plugin_install(self, request_id):
+        return self.context.plugin_browser.cancel_plugin_install(request_id)
+
+    async def http_request(self, method="", url="", **kwargs):
+        async with ClientSession() as web:
+            async with web.request(method, url, ssl=helpers.get_ssl_context(), **kwargs) as res:
+                return {
+                    "status": res.status,
+                    "headers": dict(res.headers),
+                    "body": await res.text()
+                }
+
+    async def ping(self, **kwargs):
+        return "pong"
+
+    async def execute_in_tab(self, tab, run_async, code):
+        try:
+            result = await inject_to_tab(tab, code, run_async)
+            if "exceptionDetails" in result["result"]:
+                return {
+                    "success": False,
+                    "result": result["result"]
+                }
+
+            return {
+                "success": True,
+                "result" : result["result"]["result"].get("value")
+            }
+        except Exception as e:
+            return {
+                "success": False,
+                "result": e
+            }
+
+    async def inject_css_into_tab(self, tab, style):
+        try:
+            css_id = str(uuid.uuid4())
+
+            result = await inject_to_tab(tab,
+                f"""
+                (function() {{
+                    const style = document.createElement('style');
+                    style.id = "{css_id}";
+                    document.head.append(style);
+                    style.textContent = `{style}`;
+                }})()
+                """, False)
+
+            if "exceptionDetails" in result["result"]:
+                return {
+                    "success": False,
+                    "result": result["result"]
+                }
+
+            return {
+                "success": True,
+                "result" : css_id
+            }
+        except Exception as e:
+            return {
+                "success": False,
+                "result": e
+            }
+
+    async def remove_css_from_tab(self, tab, css_id):
+        try:
+            result = await inject_to_tab(tab,
+                f"""
+                (function() {{
+                    let style = document.getElementById("{css_id}");
+
+                    if (style.nodeName.toLowerCase() == 'style')
+                        style.parentNode.removeChild(style);
+                }})()
+                """, False)
+
+            if "exceptionDetails" in result["result"]:
+                return {
+                    "success": False,
+                    "result": result
+                }
+
+            return {
+                "success": True
+            }
+        except Exception as e:
+            return {
+                "success": False,
+                "result": e
+            }

contrib/deck.sh

@@ -0,0 +1,335 @@
+#!/bin/bash
+
+## Before using this script, enable sshd on the deck and setup an sshd key between the deck and your dev in sshd_config.
+## This script defaults to port 22 unless otherwise specified, and cannot run without a sudo password or LAN IP.
+## You will need to specify the path to the ssh key if using key connection exclusively.
+
+## TODO: document latest changes to wiki
+
+## Pre-parse arugments for ease of use
+CLONEFOLDER=${1:-""}
+INSTALLFOLDER=${2:-""}
+DECKIP=${3:-""}
+SSHPORT=${4:-""}
+PASSWORD=${5:-""}
+SSHKEYLOC=${6:-""}
+LOADERBRANCH=${7:-""}
+LIBRARYBRANCH=${8:-""}
+TEMPLATEBRANCH=${9:-""}
+LATEST=${10:-""}
+
+## gather options into an array 
+OPTIONSARRAY=("$CLONEFOLDER" "$INSTALLFOLDER" "$DECKIP" "$SSHPORT" "$PASSWORD" "$SSHKEYLOC" "$LOADERBRANCH" "$LIBRARYBRANCH" "$TEMPLATEBRANCH" "$LATEST")
+
+## iterate through options array to check their presence
+count=0
+for OPTION in ${OPTIONSARRAY[@]}; do
+    ! [[ "$OPTION" == "" ]] && count=$(($count+1))
+    # printf "OPTION=$OPTION\n"
+done
+
+setfolder() {
+    if [[ "$2" == "clone" ]]; then
+        local ACTION="clone"
+        local DEFAULT="git"
+    elif [[ "$2" == "install" ]]; then
+        local ACTION="install"
+        local DEFAULT="dev"
+    fi
+    
+    if [[ "$ACTION" == "clone" ]]; then
+        printf "Enter the directory in /home/user/ to ${ACTION} to.\n"
+        printf "The ${ACTION} directory would be: ${HOME}/${DEFAULT}\n"
+        read -p "Enter your ${ACTION} directory: " CLONEFOLDER
+        if ! [[ "$CLONEFOLDER" =~ ^[[:alnum:]]+$ ]]; then
+            printf "Folder name not provided. Using default, '${DEFAULT}'.\n"
+            CLONEFOLDER="${DEFAULT}"
+        fi
+    elif [[ "$ACTION" == "install" ]]; then
+        printf "Enter the directory in /home/deck/homebrew to ${ACTION} pluginloader to.\n"
+        printf "The ${ACTION} directory would be: /home/deck/homebrew/${DEFAULT}/pluginloader\n"
+        printf "It is highly recommended that you use the default folder path seen above, just press enter at the next prompt.\n"
+        read -p "Enter your ${ACTION} directory: " INSTALLFOLDER
+        if ! [[ "$INSTALLFOLDER" =~ ^[[:alnum:]]+$ ]]; then
+            printf "Folder name not provided. Using default, '${DEFAULT}'.\n"
+            INSTALLFOLDER="${DEFAULT}"
+        fi
+    else
+        printf "Folder type could not be determined, exiting\n"
+        exit 1
+    fi
+}
+
+checkdeckip() {
+    ### check that ip is provided
+    if [[ "$1" == "" ]]; then
+        printf "An ip address must be provided, exiting.\n"
+        exit 1
+    fi
+
+    ### check to make sure it's a potentially valid ipv4 address
+    if ! [[ $1 =~ ^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$ ]]; then
+        printf "A valid ip address must be provided, exiting.\n"
+        exit 1
+    fi
+}
+
+checksshport() {
+    ### check to make sure a port was specified
+    if [[ "$1" == "" ]]; then
+        printf "ssh port not provided. Using default, '22'.\n"
+        SSHPORT="22"
+    fi
+
+    ### check for valid ssh port
+    if [[ $1 -le 0 ]]; then
+        printf "A valid ssh port must be provided, exiting.\n"
+        exit 1
+    fi
+}
+
+checksshkey() {
+    ### check if ssh key is present at location provided
+    if [[ "$1" == "" ]]; then
+        SSHKEYLOC="$HOME/.ssh/id_rsa"
+        printf "ssh key was not provided. Defaulting to $SSHKEYLOC if it exists.\n"
+    fi
+
+    ### check if sshkey is present at location
+    if ! [[ -e "$1" ]]; then
+        SSHKEYLOC=""
+        printf "ssh key does not exist. This script will use password authentication.\n"
+    fi
+}
+
+checkpassword() {
+    ### check to make sure a password for 'deck' was specified
+    if [[ "$1" == "" ]]; then
+        printf "Remote deck user password was not provided, exiting.\n"
+        exit 1
+    fi
+}
+
+clonefromto() {
+    # printf "repo=$1\n"
+    # printf "outdir=$2\n"
+    # printf "branch=$3\n"
+    printf "Repository: $1\n"
+    git clone $1 $2 &> '/dev/null'
+    CODE=$?
+    # printf "CODE=${CODE}"
+    if [[ $CODE -eq 128 ]]; then
+        cd $2
+        git fetch --all &> '/dev/null'
+    fi
+    if [[ -z $3 ]]; then
+        printf "Enter the desired branch for repository "$1" :\n"
+        local OUT="$(git branch -r | sed '/\/HEAD/d')"
+        # $OUT="$($OUT > )"
+        printf "$OUT\nbranch: "
+        read BRANCH
+    else
+        printf "on branch: $3\n"
+        BRANCH="$3"
+    fi
+    if ! [[ -z ${BRANCH} ]]; then
+        git checkout $BRANCH &> '/dev/null'
+    fi
+    if [[ ${LATEST} == "true" ]]; then
+        git pull --all
+    elif [[ ${LATEST} == "true" ]]; then
+        printf "Assuming user not pulling latest commits.\n"
+    else
+        printf "Pull latest commits? (y/N): "
+        read PULL
+        case ${PULL:0:1} in
+            y|Y )
+                printf "Pulling latest commits.\n"
+                git pull --all
+            ;;
+            * )
+                printf "Not pulling latest commits.\n"
+            ;;
+        esac
+        if ! [[ "$PULL" =~ ^[[:alnum:]]+$ ]]; then
+            printf "Assuming user not pulling latest commits.\n"
+        fi
+    fi
+}
+
+pnpmtransbundle() {
+    cd $1
+    if [[ "$2" == "library" ]]; then
+        npm install --quiet &> '/dev/null'
+        npm run build --quiet &> '/dev/null'
+        sudo npm link --quiet &> '/dev/null'
+    elif [[ "$2" == "frontend" ]]; then
+        pnpm i &> '/dev/null'
+        pnpm run build &> '/dev/null'
+    elif [[ "$2" == "template" ]]; then
+        pnpm i &> '/dev/null'
+        pnpm run build &> '/dev/null'
+    fi
+}
+
+if ! [[ $count -gt 9 ]] ; then
+    printf "Installing Steam Deck Plugin Loader contributor/developer (for Steam Deck)...\n"
+
+    printf "THIS SCRIPT ASSUMES YOU ARE RUNNING IT ON A PC, NOT THE DECK!
+    Not planning to contribute to or develop for PluginLoader?
+    If so, you should not be using this script.\n
+    If you have a release/nightly installed this script will disable it.\n"
+
+    printf "This script requires you to have nodejs installed. (If nodejs doesn't bundle npm on your OS/distro, then npm is required as well).\n"
+fi
+
+if ! [[ $count -gt 0 ]] ; then
+    read -p "Press any key to continue"
+fi
+
+printf "\n"
+
+## User chooses preffered clone & install directories
+
+if [[ "$CLONEFOLDER" == "" ]]; then
+    setfolder "$CLONEFOLDER" "clone"
+fi
+
+if [[ "$INSTALLFOLDER" == "" ]]; then
+    setfolder "$INSTALLFOLDER" "install"
+fi
+
+CLONEDIR="$HOME/$CLONEFOLDER"
+INSTALLDIR="/home/deck/homebrew/$INSTALLFOLDER"
+
+## Input ip address, port, password and sshkey
+
+### DECKIP already been parsed?
+if [[ "$DECKIP" == "" ]]; then
+    ### get ip address of deck from user
+    read -p "Enter the ip address of your Steam Deck: " DECKIP
+fi
+
+### validate DECKIP
+checkdeckip "$DECKIP"
+
+### SSHPORT already been parsed?
+if [[ "$SSHPORT" == "" ]]; then
+    ### get ssh port from user
+    read -p "Enter the ssh port of your Steam Deck: " SSHPORT
+fi
+
+### validate SSHPORT
+checksshport "$SSHPORT"
+
+### PASSWORD already been parsed?
+if [[ "$PASSWORD" == "" ]]; then
+    ### prompt the user for their deck's password
+    printf "Enter the password for the Steam Deck user 'deck' : "
+    read -s PASSWORD
+    printf "\n"
+fi
+
+### validate PASSWORD
+checkpassword "$PASSWORD"
+
+### SSHKEYLOC already been parsed?
+if [[ "$SSHKEYLOC" == "" ]]; then
+    ### prompt the user for their ssh key
+    read -p "Enter the directory for your ssh key, for ease of connection : " SSHKEYLOC
+fi
+
+### validate SSHKEYLOC
+checksshkey "$SSHKEYLOC"
+
+if [[ "$SSHKEYLOC" == "" ]]; then
+    IDENINVOC=""
+else
+    IDENINVOC="-i ${SSHKEYLOC}"
+fi
+
+## Create folder structure
+
+printf "Cloning git repositories.\n"
+
+mkdir -p ${CLONEDIR} &> '/dev/null'
+
+### remove folders just in case
+# rm -r ${CLONEDIR}/pluginloader
+# rm -r ${CLONEDIR}/pluginlibrary
+# rm -r ${CLONEDIR}/plugintemplate
+
+clonefromto "https://github.com/SteamDeckHomebrew/PluginLoader" ${CLONEDIR}/pluginloader "$LOADERBRANCH"
+
+clonefromto "https://github.com/SteamDeckHomebrew/decky-frontend-lib" ${CLONEDIR}/pluginlibrary "$LIBRARYBRANCH"
+
+clonefromto "https://github.com/SteamDeckHomebrew/decky-plugin-template" ${CLONEDIR}/plugintemplate "$TEMPLATEBRANCH"
+
+## install python dependencies to deck
+
+printf "\nInstalling python dependencies.\n"
+
+rsync -azp --rsh="ssh -p $SSHPORT $IDENINVOC" ${CLONEDIR}/pluginloader/requirements.txt deck@${DECKIP}:${INSTALLDIR}/pluginloader/requirements.txt &> '/dev/null'
+
+ssh deck@${DECKIP} -p ${SSHPORT} ${IDENINVOC} "python -m ensurepip && python -m pip install --upgrade pip && python -m pip install --upgrade setuptools && python -m pip install -r $INSTALLDIR/pluginloader/requirements.txt" &> '/dev/null'
+
+## Transpile and bundle typescript
+
+[ "$UID" -eq 0 ] || printf "Input password to proceed with install.\n"
+
+sudo npm install -g pnpm &> '/dev/null'
+
+type pnpm &> '/dev/null'
+
+PNPMLIVES=$?
+
+if ! [[ "$PNPMLIVES" -eq 0 ]]; then
+    printf "pnpm does not appear to be installed, exiting.\n"
+    exit 1
+fi
+
+printf "Transpiling and bundling typescript.\n"
+
+pnpmtransbundle ${CLONEDIR}/pluginlibrary/ "library"
+
+pnpmtransbundle ${CLONEDIR}/pluginloader/frontend "frontend"
+
+pnpmtransbundle ${CLONEDIR}/plugintemplate "template"
+
+## Transfer relevant files to deck
+
+printf "Copying relevant files to install directory\n\n"
+
+ssh deck@${DECKIP} -p ${SSHPORT} ${IDENINVOC} "mkdir -p $INSTALLDIR/pluginloader && mkdir -p $INSTALLDIR/plugins" &> '/dev/null'
+
+### copy files for PluginLoader
+rsync -avzp --rsh="ssh -p $SSHPORT $IDENINVOC" --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='frontend/' --exclude='dist/' --exclude='contrib/' --exclude='*.log' --exclude='requirements.txt' --exclude='backend/__pycache__/' --exclude='.gitignore' --delete ${CLONEDIR}/pluginloader/* deck@${DECKIP}:${INSTALLDIR}/pluginloader &> '/dev/null'
+
+if ! [[ $? -eq 0 ]]; then
+    printf "Error occurred when copying $CLONEDIR/pluginloader/ to $INSTALLDIR/pluginloader/\n"
+    printf "Check that your Steam Deck is active, ssh is enabled and running and is accepting connections.\n"
+    exit 1
+fi
+
+### copy files for plugin template
+rsync -avzp --rsh="ssh -p $SSHPORT $IDENINVOC" --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='node_modules/' --exclude='src/' --exclude='*.log' --exclude='.gitignore' --exclude='pnpm-lock.yaml' --exclude='package.json' --exclude='rollup.config.js' --exclude='tsconfig.json' --delete ${CLONEDIR}/plugintemplate deck@${DECKIP}:${INSTALLDIR}/plugins &> '/dev/null'
+if ! [[ $? -eq 0 ]]; then
+    printf "Error occurred when copying $CLONEDIR/plugintemplate to $INSTALLDIR/plugins\n"
+    exit 1
+fi
+
+## TODO: direct contributors to wiki for this info?
+
+printf "Run these commands to deploy your local changes to the deck:\n"
+printf "'rsync -avzp --mkpath --rsh=""\"ssh -p $SSHPORT $IDENINVOC\""" --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='frontend/' --exclude='dist/' --exclude='contrib/' --exclude='*.log' --exclude='requirements.txt' --exclude='backend/__pycache__/' --exclude='.gitignore' --delete $CLONEDIR/pluginloader/* deck@$DECKIP:$INSTALLDIR/pluginloader/'\n"
+printf "'rsync -avzp --mkpath --rsh=""\"ssh -p $SSHPORT $IDENINVOC\""" --exclude='.git/' --exclude='.github/' --exclude='.vscode/' --exclude='node_modules/' --exclude='src/' --exclude='*.log' --exclude='.gitignore' --exclude='package-lock.json' --delete $CLONEDIR/pluginname deck@$DECKIP:$INSTALLDIR/plugins'\n\n"
+
+printf "Run in console or in a script this command to run your development version:\n'ssh deck@$DECKIP -p $SSHPORT $IDENINVOC 'export PLUGIN_PATH=$INSTALLDIR/plugins; export CHOWN_PLUGIN_PATH=0; echo 'steam' | sudo -SE python3 $INSTALLDIR/pluginloader/backend/main.py'\n"
+
+## Disable Releases versions if they exist
+
+### ssh into deck and disable PluginLoader release/nightly service
+printf "Connecting via ssh to disable any PluginLoader release versions.\n"
+printf "Script will exit after this. All done!\n"
+
+ssh deck@${DECKIP} -p ${SSHPORT} ${IDENINVOC} "printf $PASSWORD | sudo -S systemctl disable --now plugin_loader; echo $?" &> '/dev/null'

contrib/nodeck.sh

@@ -0,0 +1,168 @@
+#!/bin/bash
+
+## Pre-parse arugments for ease of use
+CLONEFOLDER=${1:-""}
+LOADERBRANCH=${2:-""}
+LIBRARYBRANCH=${3:-""}
+TEMPLATEBRANCH=${4:-""}
+LATEST=${5:-""}
+
+## gather options into an array 
+OPTIONSARRAY=("$CLONEFOLDER" "$LOADERBRANCH" "$LIBRARYBRANCH" "$TEMPLATEBRANCH" "$LATEST")
+
+## iterate through options array to check their presence
+count=0
+for OPTION in ${OPTIONSARRAY[@]}; do
+    ! [[ "$OPTION" == "" ]] && count=$(($count+1))
+    # printf "OPTION=$OPTION\n"
+done
+
+clonefromto() {
+    # printf "repo=$1\n"
+    # printf "outdir=$2\n"
+    # printf "branch=$3\n"
+    printf "Repository: $1\n"
+    git clone $1 $2 &> '/dev/null'
+    CODE=$?
+    # printf "CODE=${CODE}"
+    if [[ $CODE -eq 128 ]]; then
+        cd $2
+        git fetch --all &> '/dev/null'
+    fi
+    if [[ -z $3 ]]; then
+        printf "Enter the desired branch for repository "$1" :\n"
+        local OUT="$(git branch -r | sed '/\/HEAD/d')"
+        # $OUT="$($OUT > )"
+        printf "$OUT\nbranch: "
+        read BRANCH
+    else
+        printf "on branch: $3\n"
+        BRANCH="$3"
+    fi
+    if ! [[ -z ${BRANCH} ]]; then
+        git checkout $BRANCH &> '/dev/null'
+    fi
+    if [[ ${LATEST} == "true" ]]; then
+        git pull --all
+    elif [[ ${LATEST} == "true" ]]; then
+        printf "Assuming user not pulling latest commits.\n"
+    else
+        printf "Pull latest commits? (y/N): "
+        read PULL
+        case ${PULL:0:1} in
+            y|Y )
+                printf "Pulling latest commits.\n"
+                git pull --all
+            ;;
+            * )
+                printf "Not pulling latest commits.\n"
+            ;;
+        esac
+        if ! [[ "$PULL" =~ ^[[:alnum:]]+$ ]]; then
+            printf "Assuming user not pulling latest commits.\n"
+        fi
+    fi
+}
+
+pnpmtransbundle() {
+    cd $1
+    if [[ "$2" == "library" ]]; then
+        npm install --quiet &> '/dev/null'
+        npm run build --quiet &> '/dev/null'
+        sudo npm link --quiet &> '/dev/null'
+    elif [[ "$2" == "frontend" ]]; then
+        pnpm i &> '/dev/null'
+        pnpm run build &> '/dev/null'
+    elif [[ "$2" == "template" ]]; then
+        pnpm i &> '/dev/null'
+        pnpm run build &> '/dev/null'
+    fi
+}
+
+
+if ! [[ $count -gt 4 ]] ; then
+    printf "Installing Steam Deck Plugin Loader contributor/developer (no Steam Deck)..."
+
+    printf "\nTHIS SCRIPT ASSUMES YOU ARE RUNNING IT ON A PC, NOT THE DECK!
+    Not planning to contribute to or develop for PluginLoader?
+    Then you should not be using this script.\n"
+
+    printf "\nThis script requires you to have nodejs installed. (If nodejs doesn't bundle npm on your OS/distro, then npm is required as well).\n"
+fi
+
+if ! [[ $count -gt 0 ]] ; then
+    read -p "Press any key to continue"
+fi
+
+printf "\n"
+
+if [[ "$CLONEFOLDER" == "" ]]; then
+    printf "Enter the directory in /home/user/ to clone to.\n"
+    printf "The clone directory would be: ${HOME}/git \n"
+    read -p "Enter your clone directory: " CLONEFOLDER
+    if ! [[ "$CLONEFOLDER" =~ ^[[:alnum:]]+$ ]]; then
+        printf "Folder name not provided. Using default, '${DEFAULT}'.\n"
+        CLONEFOLDER="${DEFAULT}"
+    fi
+fi
+
+CLONEDIR="$HOME/$CLONEFOLDER"
+
+## Create folder structure
+
+printf "Cloning git repositories.\n"
+
+mkdir -p ${CLONEDIR} &> '/dev/null'
+
+### remove folders just in case
+# rm -r ${CLONEDIR}/pluginloader
+# rm -r ${CLONEDIR}/pluginlibrary
+# rm -r ${CLONEDIR}/plugintemplate
+
+clonefromto "https://github.com/SteamDeckHomebrew/PluginLoader" ${CLONEDIR}/pluginloader "$LOADERBRANCH"
+
+clonefromto "https://github.com/SteamDeckHomebrew/decky-frontend-lib" ${CLONEDIR}/pluginlibrary "$LIBRARYBRANCH"
+
+clonefromto "https://github.com/SteamDeckHomebrew/decky-plugin-template" ${CLONEDIR}/plugintemplate "$TEMPLATEBRANCH"
+
+## install python dependencies (maybe use venv?)
+
+python -m pip install -r ${CLONEDIR}/pluginloader/requirements.txt &> '/dev/null'
+
+## Transpile and bundle typescript
+
+[ "$UID" -eq 0 ] || printf "Input password to proceed with install.\n"
+
+type npm &> '/dev/null'
+
+NPMLIVES=$?
+
+if ! [[ "$PNPMLIVES" -eq 0 ]]; then
+    printf "npm does not appear to be installed, exiting.\n"
+    exit 1
+fi
+
+sudo npm install -g pnpm &> '/dev/null'
+
+type pnpm &> '/dev/null'
+
+PNPMLIVES=$?
+
+if ! [[ "$PNPMLIVES" -eq 0 ]]; then
+    printf "pnpm does not appear to be installed, exiting.\n"
+    exit 1
+fi
+
+printf "Transpiling and bundling typescript.\n"
+
+pnpmtransbundle ${CLONEDIR}/pluginlibrary/ "library"
+
+pnpmtransbundle ${CLONEDIR}/pluginloader/frontend "frontend"
+
+pnpmtransbundle ${CLONEDIR}/plugintemplate "template"
+
+printf "Plugin Loader is located at '${CLONEDIR}/pluginloader/'.\n"
+
+printf "Run in console or in a script these commands to run your development version:\n'export PLUGIN_PATH=${CLONEDIR}/plugins; export CHOWN_PLUGIN_PATH=0; sudo -E python3 ${CLONEDIR}/pluginloader/backend/main.py'\n"
+
+printf "All done!\n"

dist/install_nightly.sh

@@ -0,0 +1,50 @@
+#!/bin/sh
+
+[ "$UID" -eq 0 ] || exec sudo "$0" "$@"
+
+echo "Installing Steam Deck Plugin Loader nightly..."
+
+USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
+HOMEBREW_FOLDER="${USER_DIR}/homebrew"
+
+# Create folder structure
+rm -rf ${HOMEBREW_FOLDER}/services
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
+
+# Download latest nightly build and install it
+rm -rf /tmp/plugin_loader
+mkdir -p /tmp/plugin_loader
+curl -L https://nightly.link/SteamDeckHomebrew/PluginLoader/workflows/build/main/Plugin%20Loader.zip --output /tmp/plugin_loader/PluginLoader.zip
+unzip /tmp/plugin_loader/PluginLoader.zip -d /tmp/plugin_loader
+cp /tmp/plugin_loader/PluginLoader ${HOMEBREW_FOLDER}/services/PluginLoader
+rm -rf /tmp/plugin_loader
+chmod +x ${HOMEBREW_FOLDER}/services/PluginLoader
+
+systemctl --user stop plugin_loader 2> /dev/null
+systemctl --user disable plugin_loader 2> /dev/null
+rm -f ${USER_DIR}/.config/systemd/user/plugin_loader.service
+
+systemctl stop plugin_loader 2> /dev/null
+systemctl disable plugin_loader 2> /dev/null
+rm -f /etc/systemd/system/plugin_loader.service
+
+cat > /etc/systemd/system/plugin_loader.service <<- EOM
+[Unit]
+Description=SteamDeck Plugin Loader
+
+[Service]
+Type=simple
+User=root
+Restart=always
+
+ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
+WorkingDirectory=${HOMEBREW_FOLDER}/services
+Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+
+[Install]
+WantedBy=multi-user.target
+EOM
+systemctl daemon-reload
+systemctl start plugin_loader
+systemctl enable plugin_loader

dist/install_prerelease.sh

@@ -0,0 +1,46 @@
+#!/bin/sh
+
+[ "$UID" -eq 0 ] || exec sudo "$0" "$@"
+
+echo "Installing Steam Deck Plugin Loader pre-release..."
+
+USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
+HOMEBREW_FOLDER="${USER_DIR}/homebrew"
+
+# # Create folder structure
+rm -rf ${HOMEBREW_FOLDER}/services
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
+
+# Download latest release and install it
+RELEASE=$(curl -s 'https://api.github.com/repos/SteamDeckHomebrew/decky-loader/releases' | jq -r "first(.[] | select(.prerelease == "true"))")
+read VERSION DOWNLOADURL < <(echo $(jq -r '.tag_name, .assets[].browser_download_url' <<< ${RELEASE}))
+
+printf "Installing version %s...\n" "${VERSION}"
+curl -L $DOWNLOADURL --output ${HOMEBREW_FOLDER}/services/PluginLoader
+chmod +x ${HOMEBREW_FOLDER}/services/PluginLoader
+echo $VERSION > ${HOMEBREW_FOLDER}/services/.loader.version
+
+systemctl --user stop plugin_loader 2> /dev/null
+systemctl --user disable plugin_loader 2> /dev/null
+
+systemctl stop plugin_loader 2> /dev/null
+systemctl disable plugin_loader 2> /dev/null
+rm -f /etc/systemd/system/plugin_loader.service
+cat > /etc/systemd/system/plugin_loader.service <<- EOM
+[Unit]
+Description=SteamDeck Plugin Loader
+[Service]
+Type=simple
+User=root
+Restart=always
+ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
+WorkingDirectory=${HOMEBREW_FOLDER}/services
+Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+Environment=LOG_LEVEL=DEBUG
+[Install]
+WantedBy=multi-user.target
+EOM
+systemctl daemon-reload
+systemctl start plugin_loader
+systemctl enable plugin_loader

dist/install_release.sh

@@ -0,0 +1,40 @@
+#!/bin/sh
+
+[ "$UID" -eq 0 ] || exec sudo "$0" "$@"
+
+echo "Installing Steam Deck Plugin Loader release..."
+
+USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
+HOMEBREW_FOLDER="${USER_DIR}/homebrew"
+
+# Create folder structure
+rm -rf "${HOMEBREW_FOLDER}/services"
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/services"
+sudo -u $SUDO_USER mkdir -p "${HOMEBREW_FOLDER}/plugins"
+
+# Download latest release and install it
+curl -L https://github.com/SteamDeckHomebrew/PluginLoader/releases/latest/download/PluginLoader --output "${HOMEBREW_FOLDER}/services/PluginLoader"
+chmod +x "${HOMEBREW_FOLDER}/services/PluginLoader"
+
+systemctl --user stop plugin_loader 2> /dev/null
+systemctl --user disable plugin_loader 2> /dev/null
+
+systemctl stop plugin_loader 2> /dev/null
+systemctl disable plugin_loader 2> /dev/null
+rm -f "/etc/systemd/system/plugin_loader.service"
+cat > "/etc/systemd/system/plugin_loader.service" <<- EOM
+[Unit]
+Description=SteamDeck Plugin Loader
+[Service]
+Type=simple
+User=root
+Restart=always
+ExecStart=${HOMEBREW_FOLDER}/services/PluginLoader
+WorkingDirectory=${HOMEBREW_FOLDER}/services
+Environment=PLUGIN_PATH=${HOMEBREW_FOLDER}/plugins
+[Install]
+WantedBy=multi-user.target
+EOM
+systemctl daemon-reload
+systemctl start plugin_loader
+systemctl enable plugin_loader

dist/uninstall.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+[ "$UID" -eq 0 ] || exec sudo "$0" "$@"
+
+echo "Uninstalling Steam Deck Plugin Loader..."
+
+USER_DIR="$(getent passwd $SUDO_USER | cut -d: -f6)"
+HOMEBREW_FOLDER="${USER_DIR}/homebrew"
+
+# Disable and remove services
+sudo systemctl disable --now plugin_loader.service > /dev/null
+sudo rm -f "${USER_DIR}/.config/systemd/user/plugin_loader.service"
+sudo rm -f "/etc/systemd/system/plugin_loader.service"
+
+# Remove temporary folder if it exists from the install process
+rm -rf "/tmp/plugin_loader"
+
+# Cleanup services folder
+sudo rm "${HOMEBREW_FOLDER}/services/PluginLoader"
+

frontend/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+
+.yalc
+yalc.lock

frontend/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+cd frontend && npm run lint

frontend/.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+  endOfLine: 'auto',
+  plugins: [require('prettier-plugin-import-sort')],
+};

frontend/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "decky_frontend",
+  "version": "0.0.1",
+  "private": true,
+  "license": "GPLV2",
+  "scripts": {
+    "prepare": "cd .. && husky install frontend/.husky",
+    "build": "rollup -c",
+    "watch": "rollup -c -w",
+    "lint": "prettier -c src",
+    "format": "prettier -c src -w"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^21.1.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-typescript": "^8.3.3",
+    "@types/react": "16.14.0",
+    "@types/react-router": "5.1.18",
+    "@types/webpack": "^5.28.0",
+    "husky": "^8.0.1",
+    "import-sort-style-module": "^6.0.0",
+    "inquirer": "^8.2.4",
+    "prettier": "^2.7.1",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "rollup": "^2.76.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.7.4"
+  },
+  "importSort": {
+    ".js, .jsx, .ts, .tsx": {
+      "style": "module",
+      "parser": "typescript"
+    }
+  },
+  "dependencies": {
+    "decky-frontend-lib": "^1.5.1",
+    "react-icons": "^4.4.0"
+  }
+}

frontend/rollup.config.js

@@ -0,0 +1,29 @@
+import commonjs from '@rollup/plugin-commonjs';
+import json from '@rollup/plugin-json';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import typescript from '@rollup/plugin-typescript';
+import { defineConfig } from 'rollup';
+
+export default defineConfig({
+  input: 'src/index.tsx',
+  plugins: [
+    commonjs(),
+    nodeResolve(),
+    typescript(),
+    json(),
+    replace({
+      preventAssignment: false,
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    }),
+  ],
+  external: ["react", "react-dom"],
+  output: {
+    file: '../backend/static/plugin-loader.iife.js',
+    globals: {
+      react: 'SP_REACT',
+      'react-dom': 'SP_REACTDOM',
+    },
+    format: 'iife',
+  },
+});

frontend/src/components/DeckyRouterState.tsx

@@ -0,0 +1,103 @@
+import { ComponentType, FC, createContext, useContext, useEffect, useState } from 'react';
+import type { RouteProps } from 'react-router';
+
+export interface RouterEntry {
+  props: Omit<RouteProps, 'path' | 'children'>;
+  component: ComponentType;
+}
+
+export type RoutePatch = (route: RouteProps) => RouteProps;
+
+interface PublicDeckyRouterState {
+  routes: Map<string, RouterEntry>;
+  routePatches: Map<string, Set<RoutePatch>>;
+}
+
+export class DeckyRouterState {
+  private _routes = new Map<string, RouterEntry>();
+  private _routePatches = new Map<string, Set<RoutePatch>>();
+
+  public eventBus = new EventTarget();
+
+  publicState(): PublicDeckyRouterState {
+    return { routes: this._routes, routePatches: this._routePatches };
+  }
+
+  addRoute(path: string, component: RouterEntry['component'], props: RouterEntry['props'] = {}) {
+    this._routes.set(path, { props, component });
+    this.notifyUpdate();
+  }
+
+  addPatch(path: string, patch: RoutePatch) {
+    let patchList = this._routePatches.get(path);
+    if (!patchList) {
+      patchList = new Set();
+      this._routePatches.set(path, patchList);
+    }
+    patchList.add(patch);
+    this.notifyUpdate();
+    return patch;
+  }
+
+  removePatch(path: string, patch: RoutePatch) {
+    const patchList = this._routePatches.get(path);
+    patchList?.delete(patch);
+    if (patchList?.size == 0) {
+      this._routePatches.delete(path);
+    }
+    this.notifyUpdate();
+  }
+
+  removeRoute(path: string) {
+    this._routes.delete(path);
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyRouterStateContext extends PublicDeckyRouterState {
+  addRoute(path: string, component: RouterEntry['component'], props: RouterEntry['props']): void;
+  addPatch(path: string, patch: RoutePatch): RoutePatch;
+  removePatch(path: string, patch: RoutePatch): void;
+  removeRoute(path: string): void;
+}
+
+const DeckyRouterStateContext = createContext<DeckyRouterStateContext>(null as any);
+
+export const useDeckyRouterState = () => useContext(DeckyRouterStateContext);
+
+interface Props {
+  deckyRouterState: DeckyRouterState;
+}
+
+export const DeckyRouterStateContextProvider: FC<Props> = ({ children, deckyRouterState }) => {
+  const [publicDeckyRouterState, setPublicDeckyRouterState] = useState<PublicDeckyRouterState>({
+    ...deckyRouterState.publicState(),
+  });
+
+  useEffect(() => {
+    function onUpdate() {
+      setPublicDeckyRouterState({ ...deckyRouterState.publicState() });
+    }
+
+    deckyRouterState.eventBus.addEventListener('update', onUpdate);
+
+    return () => deckyRouterState.eventBus.removeEventListener('update', onUpdate);
+  }, []);
+
+  const addRoute = deckyRouterState.addRoute.bind(deckyRouterState);
+  const addPatch = deckyRouterState.addPatch.bind(deckyRouterState);
+  const removePatch = deckyRouterState.removePatch.bind(deckyRouterState);
+  const removeRoute = deckyRouterState.removeRoute.bind(deckyRouterState);
+
+  return (
+    <DeckyRouterStateContext.Provider
+      value={{ ...publicDeckyRouterState, addRoute, addPatch, removePatch, removeRoute }}
+    >
+      {children}
+    </DeckyRouterStateContext.Provider>
+  );
+};

frontend/src/components/DeckyState.tsx

@@ -0,0 +1,74 @@
+import { FC, createContext, useContext, useEffect, useState } from 'react';
+
+import { Plugin } from '../plugin';
+
+interface PublicDeckyState {
+  plugins: Plugin[];
+  activePlugin: Plugin | null;
+}
+
+export class DeckyState {
+  private _plugins: Plugin[] = [];
+  private _activePlugin: Plugin | null = null;
+
+  public eventBus = new EventTarget();
+
+  publicState(): PublicDeckyState {
+    return { plugins: this._plugins, activePlugin: this._activePlugin };
+  }
+
+  setPlugins(plugins: Plugin[]) {
+    this._plugins = plugins;
+    this.notifyUpdate();
+  }
+
+  setActivePlugin(name: string) {
+    this._activePlugin = this._plugins.find((plugin) => plugin.name === name) ?? null;
+    this.notifyUpdate();
+  }
+
+  closeActivePlugin() {
+    this._activePlugin = null;
+    this.notifyUpdate();
+  }
+
+  private notifyUpdate() {
+    this.eventBus.dispatchEvent(new Event('update'));
+  }
+}
+
+interface DeckyStateContext extends PublicDeckyState {
+  setActivePlugin(name: string): void;
+  closeActivePlugin(): void;
+}
+
+const DeckyStateContext = createContext<DeckyStateContext>(null as any);
+
+export const useDeckyState = () => useContext(DeckyStateContext);
+
+interface Props {
+  deckyState: DeckyState;
+}
+
+export const DeckyStateContextProvider: FC<Props> = ({ children, deckyState }) => {
+  const [publicDeckyState, setPublicDeckyState] = useState<PublicDeckyState>({ ...deckyState.publicState() });
+
+  useEffect(() => {
+    function onUpdate() {
+      setPublicDeckyState({ ...deckyState.publicState() });
+    }
+
+    deckyState.eventBus.addEventListener('update', onUpdate);
+
+    return () => deckyState.eventBus.removeEventListener('update', onUpdate);
+  }, []);
+
+  const setActivePlugin = (name: string) => deckyState.setActivePlugin(name);
+  const closeActivePlugin = () => deckyState.closeActivePlugin();
+
+  return (
+    <DeckyStateContext.Provider value={{ ...publicDeckyState, setActivePlugin, closeActivePlugin }}>
+      {children}
+    </DeckyStateContext.Provider>
+  );
+};

frontend/src/components/LegacyPlugin.tsx

@@ -0,0 +1,11 @@
+import { VFC } from 'react';
+
+interface Props {
+  url: string;
+}
+
+const LegacyPlugin: VFC<Props> = ({ url }) => {
+  return <iframe style={{ border: 'none', width: '100%', height: '100%' }} src={url}></iframe>;
+};
+
+export default LegacyPlugin;

frontend/src/components/PluginView.tsx

@@ -0,0 +1,31 @@
+import { ButtonItem, PanelSection, PanelSectionRow } from 'decky-frontend-lib';
+import { VFC } from 'react';
+
+import { useDeckyState } from './DeckyState';
+
+const PluginView: VFC = () => {
+  const { plugins, activePlugin, setActivePlugin } = useDeckyState();
+
+  if (activePlugin) {
+    return <div style={{ height: '100%' }}>{activePlugin.content}</div>;
+  }
+
+  return (
+    <PanelSection>
+      {plugins
+        .filter((p) => p.content)
+        .map(({ name, icon }) => (
+          <PanelSectionRow key={name}>
+            <ButtonItem layout="below" onClick={() => setActivePlugin(name)}>
+              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div>{icon}</div>
+                <div>{name}</div>
+              </div>
+            </ButtonItem>
+          </PanelSectionRow>
+        ))}
+    </PanelSection>
+  );
+};
+
+export default PluginView;

frontend/src/components/TitleView.tsx

@@ -0,0 +1,61 @@
+import { DialogButton, Focusable, Router, staticClasses } from 'decky-frontend-lib';
+import { CSSProperties, VFC } from 'react';
+import { FaArrowLeft, FaCog, FaStore } from 'react-icons/fa';
+
+import { useDeckyState } from './DeckyState';
+
+const titleStyles: CSSProperties = {
+  display: 'flex',
+  paddingTop: '3px',
+  paddingBottom: '14px',
+  paddingRight: '16px',
+  boxShadow: 'unset',
+};
+
+const TitleView: VFC = () => {
+  const { activePlugin, closeActivePlugin } = useDeckyState();
+
+  const onSettingsClick = () => {
+    Router.CloseSideMenus();
+    Router.Navigate('/decky/settings');
+  };
+
+  const onStoreClick = () => {
+    Router.CloseSideMenus();
+    Router.Navigate('/decky/store');
+  };
+
+  if (activePlugin === null) {
+    return (
+      <Focusable style={titleStyles} className={staticClasses.Title}>
+        <DialogButton
+          style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
+          onClick={onSettingsClick}
+        >
+          <FaCog style={{ marginTop: '-4px', display: 'block' }} />
+        </DialogButton>
+        <div style={{ marginRight: 'auto', flex: 0.9 }}>Decky</div>
+        <DialogButton
+          style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
+          onClick={onStoreClick}
+        >
+          <FaStore style={{ marginTop: '-4px', display: 'block' }} />
+        </DialogButton>
+      </Focusable>
+    );
+  }
+
+  return (
+    <div className={staticClasses.Title} style={titleStyles}>
+      <DialogButton
+        style={{ height: '28px', width: '40px', minWidth: 0, padding: '10px 12px' }}
+        onClick={closeActivePlugin}
+      >
+        <FaArrowLeft style={{ marginTop: '-4px', display: 'block' }} />
+      </DialogButton>
+      <div style={{ flex: 0.9 }}>{activePlugin.name}</div>
+    </div>
+  );
+};
+
+export default TitleView;

frontend/src/components/Toast.tsx

@@ -0,0 +1,54 @@
+import { ToastData, findModule, joinClassNames } from 'decky-frontend-lib';
+import { FunctionComponent } from 'react';
+
+interface ToastProps {
+  toast: {
+    data: ToastData;
+    nToastDurationMS: number;
+  };
+}
+
+const toastClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.ToastPlaceholder) {
+    return true;
+  }
+
+  return false;
+});
+
+const templateClasses = findModule((mod) => {
+  if (typeof mod !== 'object') return false;
+
+  if (mod.ShortTemplate) {
+    return true;
+  }
+
+  return false;
+});
+
+const Toast: FunctionComponent<ToastProps> = ({ toast }) => {
+  return (
+    <div
+      style={{ '--toast-duration': `${toast.nToastDurationMS}ms` } as React.CSSProperties}
+      className={joinClassNames(toastClasses.ToastPopup, toastClasses.toastEnter)}
+    >
+      <div
+        onClick={toast.data.onClick}
+        className={joinClassNames(templateClasses.ShortTemplate, toast.data.className || '')}
+      >
+        {toast.data.logo && <div className={templateClasses.StandardLogoDimensions}>{toast.data.logo}</div>}
+        <div className={joinClassNames(templateClasses.Content, toast.data.contentClassName || '')}>
+          <div className={templateClasses.Header}>
+            {toast.data.icon && <div className={templateClasses.Icon}>{toast.data.icon}</div>}
+            <div className={templateClasses.Title}>{toast.data.title}</div>
+          </div>
+          <div className={templateClasses.Body}>{toast.data.body}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Toast;

frontend/src/components/modals/PluginInstallModal.tsx

@@ -0,0 +1,43 @@
+import { ModalRoot, QuickAccessTab, Router, Spinner, sleep, staticClasses } from 'decky-frontend-lib';
+import { FC, useState } from 'react';
+
+interface PluginInstallModalProps {
+  artifact: string;
+  version: string;
+  hash: string;
+  // reinstall: boolean;
+  onOK(): void;
+  onCancel(): void;
+  closeModal?(): void;
+}
+
+const PluginInstallModal: FC<PluginInstallModalProps> = ({ artifact, version, hash, onOK, onCancel, closeModal }) => {
+  const [loading, setLoading] = useState<boolean>(false);
+  return (
+    <ModalRoot
+      bOKDisabled={loading}
+      closeModal={closeModal}
+      onOK={async () => {
+        setLoading(true);
+        await onOK();
+        Router.NavigateBackOrOpenMenu();
+        await sleep(250);
+        setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+      }}
+      onCancel={async () => {
+        await onCancel();
+      }}
+    >
+      <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
+        {hash == 'False' ? <h3 style={{ color: 'red' }}>!!!!NO HASH PROVIDED!!!!</h3> : null}
+        <div style={{ flexDirection: 'row' }}>
+          {loading && <Spinner style={{ width: '20px' }} />} {loading ? 'Installing' : 'Install'} {artifact}
+          {version ? ' version ' + version : null}
+          {!loading && '?'}
+        </div>
+      </div>
+    </ModalRoot>
+  );
+};
+
+export default PluginInstallModal;

frontend/src/components/settings/index.tsx

@@ -0,0 +1,25 @@
+import { SidebarNavigation } from 'decky-frontend-lib';
+
+import GeneralSettings from './pages/general';
+import PluginList from './pages/plugin_list';
+
+export default function SettingsPage() {
+  return (
+    <SidebarNavigation
+      title="Decky Settings"
+      showTitle
+      pages={[
+        {
+          title: 'General',
+          content: <GeneralSettings />,
+          route: '/decky/settings/general',
+        },
+        {
+          title: 'Plugins',
+          content: <PluginList />,
+          route: '/decky/settings/plugins',
+        },
+      ]}
+    />
+  );
+}

frontend/src/components/settings/pages/general/Updater.tsx

@@ -0,0 +1,81 @@
+import { DialogButton, Field, ProgressBarWithInfo, Spinner } from 'decky-frontend-lib';
+import { useEffect, useState } from 'react';
+import { FaArrowDown } from 'react-icons/fa';
+
+import { VerInfo, callUpdaterMethod, finishUpdate } from '../../../../updater';
+
+export default function UpdaterSettings() {
+  const [versionInfo, setVersionInfo] = useState<VerInfo | null>(null);
+  const [updateProgress, setUpdateProgress] = useState<number>(-1);
+  const [reloading, setReloading] = useState<boolean>(false);
+  const [checkingForUpdates, setCheckingForUpdates] = useState<boolean>(false);
+  useEffect(() => {
+    (async () => {
+      const res = (await callUpdaterMethod('get_version')) as { result: VerInfo };
+      setVersionInfo(res.result);
+    })();
+  }, []);
+
+  return (
+    <Field
+      label="Updates"
+      description={
+        versionInfo && (
+          <span style={{ whiteSpace: 'pre-line' }}>{`Current version: ${versionInfo.current}\n${
+            versionInfo.updatable ? `Latest version: ${versionInfo.remote?.tag_name}` : ''
+          }`}</span>
+        )
+      }
+      icon={
+        !versionInfo ? (
+          <Spinner style={{ width: '1em', height: 20, display: 'block' }} />
+        ) : (
+          <FaArrowDown style={{ display: 'block' }} />
+        )
+      }
+    >
+      {updateProgress == -1 ? (
+        <DialogButton
+          disabled={!versionInfo?.updatable || checkingForUpdates}
+          onClick={
+            !versionInfo?.remote || versionInfo?.remote?.tag_name == versionInfo?.current
+              ? async () => {
+                  setCheckingForUpdates(true);
+                  const res = (await callUpdaterMethod('check_for_updates')) as { result: VerInfo };
+                  setVersionInfo(res.result);
+                  setCheckingForUpdates(false);
+                }
+              : async () => {
+                  window.DeckyUpdater = {
+                    updateProgress: (i) => {
+                      setUpdateProgress(i);
+                    },
+                    finish: async () => {
+                      setUpdateProgress(0);
+                      setReloading(true);
+                      await finishUpdate();
+                    },
+                  };
+                  setUpdateProgress(0);
+                  callUpdaterMethod('do_update');
+                }
+          }
+        >
+          {checkingForUpdates
+            ? 'Checking'
+            : !versionInfo?.remote || versionInfo?.remote?.tag_name == versionInfo?.current
+            ? 'Check For Updates'
+            : 'Install Update'}
+        </DialogButton>
+      ) : (
+        <ProgressBarWithInfo
+          layout="inline"
+          bottomSeparator={false}
+          nProgress={updateProgress}
+          indeterminate={reloading}
+          sOperationText={reloading ? 'Reloading' : 'Updating'}
+        />
+      )}
+    </Field>
+  );
+}

frontend/src/components/settings/pages/general/index.tsx

@@ -0,0 +1,34 @@
+import { DialogButton, Field, TextField } from 'decky-frontend-lib';
+import { useState } from 'react';
+import { FaShapes } from 'react-icons/fa';
+
+import { installFromURL } from '../../../store/Store';
+import UpdaterSettings from './Updater';
+
+export default function GeneralSettings() {
+  const [pluginURL, setPluginURL] = useState('');
+  // const [checked, setChecked] = useState(false); // store these in some kind of State instead
+  return (
+    <div>
+      {/* <Field
+        label="A Toggle with an icon"
+        icon={<FaShapes style={{ display: 'block' }} />}
+      >
+        <Toggle
+          value={checked}
+          onChange={(e) => setChecked(e)}
+        />
+      </Field> */}
+      <UpdaterSettings />
+      <Field
+        label="Manual plugin install"
+        description={<TextField label={'URL'} value={pluginURL} onChange={(e) => setPluginURL(e?.target.value)} />}
+        icon={<FaShapes style={{ display: 'block' }} />}
+      >
+        <DialogButton disabled={pluginURL.length == 0} onClick={() => installFromURL(pluginURL)}>
+          Install
+        </DialogButton>
+      </Field>
+    </div>
+  );
+}

frontend/src/components/settings/pages/plugin_list/index.tsx

@@ -0,0 +1,34 @@
+import { DialogButton, staticClasses } from 'decky-frontend-lib';
+import { FaTrash } from 'react-icons/fa';
+
+import { useDeckyState } from '../../../DeckyState';
+
+export default function PluginList() {
+  const { plugins } = useDeckyState();
+
+  if (plugins.length === 0) {
+    return (
+      <div>
+        <p>No plugins installed</p>
+      </div>
+    );
+  }
+
+  return (
+    <ul style={{ listStyleType: 'none' }}>
+      {plugins.map(({ name }) => (
+        <li style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
+          <span>{name}</span>
+          <div className={staticClasses.Title} style={{ marginLeft: 'auto', boxShadow: 'none' }}>
+            <DialogButton
+              style={{ height: '40px', width: '40px', padding: '10px 12px' }}
+              onClick={() => window.DeckyPluginLoader.uninstallPlugin(name)}
+            >
+              <FaTrash />
+            </DialogButton>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

frontend/src/components/store/PluginCard.tsx

@@ -0,0 +1,210 @@
+import {
+  DialogButton,
+  Dropdown,
+  Focusable,
+  QuickAccessTab,
+  Router,
+  SingleDropdownOption,
+  SuspensefulImage,
+  staticClasses,
+} from 'decky-frontend-lib';
+import { FC, useRef, useState } from 'react';
+
+import {
+  LegacyStorePlugin,
+  StorePlugin,
+  StorePluginVersion,
+  requestLegacyPluginInstall,
+  requestPluginInstall,
+} from './Store';
+
+interface PluginCardProps {
+  plugin: StorePlugin | LegacyStorePlugin;
+}
+
+const classNames = (...classes: string[]) => {
+  return classes.join(' ');
+};
+
+function isLegacyPlugin(plugin: LegacyStorePlugin | StorePlugin): plugin is LegacyStorePlugin {
+  return 'artifact' in plugin;
+}
+
+const PluginCard: FC<PluginCardProps> = ({ plugin }) => {
+  const [selectedOption, setSelectedOption] = useState<number>(0);
+  const buttonRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  return (
+    <div
+      style={{
+        padding: '30px',
+        paddingTop: '10px',
+        paddingBottom: '10px',
+      }}
+    >
+      {/* TODO: abstract this messy focus hackiness into a custom component in lib */}
+      <Focusable
+        // className="Panel Focusable"
+        ref={containerRef}
+        onActivate={(_: CustomEvent) => {
+          buttonRef.current!.focus();
+        }}
+        onCancel={(_: CustomEvent) => {
+          if (containerRef.current!.querySelectorAll('* :focus').length === 0) {
+            Router.NavigateBackOrOpenMenu();
+            setTimeout(() => Router.OpenQuickAccessMenu(QuickAccessTab.Decky), 1000);
+          } else {
+            containerRef.current!.focus();
+          }
+        }}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          background: '#ACB2C924',
+          height: 'unset',
+          marginBottom: 'unset',
+          // boxShadow: var(--gpShadow-Medium);
+          scrollSnapAlign: 'start',
+          boxSizing: 'border-box',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <a
+            style={{ fontSize: '18pt', padding: '10px' }}
+            className={classNames(staticClasses.Text)}
+            // onClick={() => Router.NavigateToExternalWeb('https://github.com/' + plugin.artifact)}
+          >
+            {isLegacyPlugin(plugin) ? (
+              <div>
+                <span style={{ color: 'grey' }}>{plugin.artifact.split('/')[0]}/</span>
+                {plugin.artifact.split('/')[1]}
+              </div>
+            ) : (
+              plugin.name
+            )}
+          </a>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <SuspensefulImage
+            suspenseWidth="256px"
+            style={{
+              width: 'auto',
+              height: '160px',
+            }}
+            src={
+              isLegacyPlugin(plugin)
+                ? `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.artifact.replace(
+                    '/',
+                    '_',
+                  )}.png`
+                : `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/artifact_images/${plugin.name.replace(
+                    '/',
+                    '_',
+                  )}.png`
+            }
+          />
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <p className={classNames(staticClasses.PanelSectionRow)}>
+              <span>Author: {plugin.author}</span>
+            </p>
+            <p className={classNames(staticClasses.PanelSectionRow)}>
+              <span>Tags:</span>
+              {plugin.tags.map((tag: string) => (
+                <span
+                  style={{
+                    padding: '5px',
+                    marginRight: '10px',
+                    borderRadius: '5px',
+                    background: tag == 'root' ? '#842029' : '#ACB2C947',
+                  }}
+                >
+                  {tag == 'root' ? 'Requires root' : tag}
+                </span>
+              ))}
+              {isLegacyPlugin(plugin) && (
+                <span
+                  style={{
+                    color: '#232120',
+                    padding: '5px',
+                    marginRight: '10px',
+                    borderRadius: '5px',
+                    background: '#EDE841',
+                  }}
+                >
+                  legacy
+                </span>
+              )}
+            </p>
+          </div>
+        </div>
+        <div
+          style={{
+            width: '100%',
+            alignSelf: 'flex-end',
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <Focusable
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              width: '100%',
+            }}
+          >
+            <div
+              style={{
+                flex: '1',
+              }}
+            >
+              <DialogButton
+                ref={buttonRef}
+                onClick={() =>
+                  isLegacyPlugin(plugin)
+                    ? requestLegacyPluginInstall(plugin, Object.keys(plugin.versions)[selectedOption])
+                    : requestPluginInstall(plugin, plugin.versions[selectedOption])
+                }
+              >
+                Install
+              </DialogButton>
+            </div>
+            <div
+              style={{
+                flex: '0.2',
+              }}
+            >
+              <Dropdown
+                rgOptions={
+                  (isLegacyPlugin(plugin)
+                    ? Object.keys(plugin.versions).map((v, k) => ({
+                        data: k,
+                        label: v,
+                      }))
+                    : plugin.versions.map((version: StorePluginVersion, index) => ({
+                        data: index,
+                        label: version.name,
+                      }))) as SingleDropdownOption[]
+                }
+                strDefaultLabel={'Select a version'}
+                selectedOption={selectedOption}
+                onChange={({ data }) => setSelectedOption(data)}
+              />
+            </div>
+          </Focusable>
+        </div>
+      </Focusable>
+    </div>
+  );
+};
+
+export default PluginCard;

frontend/src/components/store/Store.tsx

@@ -0,0 +1,151 @@
+import { ModalRoot, SteamSpinner, showModal, staticClasses } from 'decky-frontend-lib';
+import { FC, useEffect, useState } from 'react';
+
+import PluginCard from './PluginCard';
+
+export interface StorePluginVersion {
+  name: string;
+  hash: string;
+}
+
+export interface StorePlugin {
+  id: number;
+  name: string;
+  versions: StorePluginVersion[];
+  author: string;
+  description: string;
+  tags: string[];
+}
+
+export interface LegacyStorePlugin {
+  artifact: string;
+  versions: {
+    [version: string]: string;
+  };
+  author: string;
+  description: string;
+  tags: string[];
+}
+
+export async function installFromURL(url: string) {
+  const formData = new FormData();
+  const splitURL = url.split('/');
+  formData.append('name', splitURL[splitURL.length - 1].replace('.zip', ''));
+  formData.append('artifact', url);
+  await fetch('http://localhost:1337/browser/install_plugin', {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+    headers: {
+      Authentication: window.deckyAuthToken,
+    },
+  });
+}
+
+export function requestLegacyPluginInstall(plugin: LegacyStorePlugin, selectedVer: string) {
+  showModal(
+    <ModalRoot
+      onOK={() => {
+        const formData = new FormData();
+        formData.append('name', plugin.artifact);
+        formData.append('artifact', `https://github.com/${plugin.artifact}/archive/refs/tags/${selectedVer}.zip`);
+        formData.append('version', selectedVer);
+        formData.append('hash', plugin.versions[selectedVer]);
+        fetch('http://localhost:1337/browser/install_plugin', {
+          method: 'POST',
+          body: formData,
+          credentials: 'include',
+          headers: {
+            Authentication: window.deckyAuthToken,
+          },
+        });
+      }}
+      onCancel={() => {
+        // do nothing
+      }}
+    >
+      <div className={staticClasses.Title} style={{ flexDirection: 'column', boxShadow: 'unset' }}>
+        Using legacy plugins
+      </div>
+      You are currently installing a <b>legacy</b> plugin. Legacy plugins are no longer supported and may have issues.
+      Legacy plugins do not support gamepad input. To interact with a legacy plugin, you will need to use the
+      touchscreen.
+    </ModalRoot>,
+  );
+}
+
+export async function requestPluginInstall(plugin: StorePlugin, selectedVer: StorePluginVersion) {
+  const formData = new FormData();
+  formData.append('name', plugin.name);
+  formData.append('artifact', `https://cdn.tzatzikiweeb.moe/file/steam-deck-homebrew/versions/${selectedVer.hash}.zip`);
+  formData.append('version', selectedVer.name);
+  formData.append('hash', selectedVer.hash);
+  await fetch('http://localhost:1337/browser/install_plugin', {
+    method: 'POST',
+    body: formData,
+    credentials: 'include',
+    headers: {
+      Authentication: window.deckyAuthToken,
+    },
+  });
+}
+
+const StorePage: FC<{}> = () => {
+  const [data, setData] = useState<StorePlugin[] | null>(null);
+  const [legacyData, setLegacyData] = useState<LegacyStorePlugin[] | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const res = await fetch('https://beta.deckbrew.xyz/plugins', {
+        method: 'GET',
+      }).then((r) => r.json());
+      console.log(res);
+      setData(res.filter((x: StorePlugin) => x.name !== 'Example Plugin'));
+    })();
+    (async () => {
+      const res = await fetch('https://plugins.deckbrew.xyz/get_plugins', {
+        method: 'GET',
+      }).then((r) => r.json());
+      console.log(res);
+      setLegacyData(res);
+    })();
+  }, []);
+
+  return (
+    <div
+      style={{
+        marginTop: '40px',
+        height: 'calc( 100% - 40px )',
+        overflowY: 'scroll',
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexWrap: 'nowrap',
+          flexDirection: 'column',
+          height: '100%',
+        }}
+      >
+        {!data ? (
+          <div style={{ height: '100%' }}>
+            <SteamSpinner />
+          </div>
+        ) : (
+          <div>
+            {data.map((plugin: StorePlugin) => (
+              <PluginCard plugin={plugin} />
+            ))}
+            {!legacyData ? (
+              <SteamSpinner />
+            ) : (
+              legacyData.map((plugin: LegacyStorePlugin) => <PluginCard plugin={plugin} />)
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default StorePage;

frontend/src/index.tsx

@@ -0,0 +1,43 @@
+import { sleep } from 'decky-frontend-lib';
+
+import PluginLoader from './plugin-loader';
+import { DeckyUpdater } from './updater';
+
+declare global {
+  interface Window {
+    DeckyPluginLoader: PluginLoader;
+    DeckyUpdater?: DeckyUpdater;
+    importDeckyPlugin: Function;
+    syncDeckyPlugins: Function;
+    deckyHasLoaded: boolean;
+    deckyAuthToken: string;
+  }
+}
+(async () => {
+  await sleep(1000);
+  window.deckyAuthToken = await fetch('http://127.0.0.1:1337/auth/token').then((r) => r.text());
+
+  window.DeckyPluginLoader?.dismountAll();
+  window.DeckyPluginLoader?.deinit();
+
+  window.DeckyPluginLoader = new PluginLoader();
+  window.importDeckyPlugin = function (name: string) {
+    window.DeckyPluginLoader?.importPlugin(name);
+  };
+
+  window.syncDeckyPlugins = async function () {
+    const plugins = await (
+      await fetch('http://127.0.0.1:1337/plugins', {
+        credentials: 'include',
+        headers: { Authentication: window.deckyAuthToken },
+      })
+    ).json();
+    for (const plugin of plugins) {
+      if (!window.DeckyPluginLoader.hasPlugin(plugin)) window.DeckyPluginLoader?.importPlugin(plugin);
+    }
+  };
+
+  setTimeout(() => window.syncDeckyPlugins(), 5000);
+
+  window.deckyHasLoaded = true;
+})();

frontend/src/logger.ts

@@ -0,0 +1,45 @@
+export const log = (name: string, ...args: any[]) => {
+  console.log(
+    `%c Decky %c ${name} %c`,
+    'background: #16a085; color: black;',
+    'background: #1abc9c; color: black;',
+    'background: transparent;',
+    ...args,
+  );
+};
+
+export const debug = (name: string, ...args: any[]) => {
+  console.debug(
+    `%c Decky %c ${name} %c`,
+    'background: #16a085; color: black;',
+    'background: #1abc9c; color: black;',
+    'color: blue;',
+    ...args,
+  );
+};
+
+export const error = (name: string, ...args: any[]) => {
+  console.log(
+    `%c Decky %c ${name} %c`,
+    'background: #16a085; color: black;',
+    'background: #FF0000;',
+    'background: transparent;',
+    ...args,
+  );
+};
+
+class Logger {
+  constructor(private name: string) {
+    this.name = name;
+  }
+
+  log(...args: any[]) {
+    log(this.name, ...args);
+  }
+
+  debug(...args: any[]) {
+    debug(this.name, ...args);
+  }
+}
+
+export default Logger;

frontend/src/plugin-loader.tsx

@@ -0,0 +1,250 @@
+import { ModalRoot, QuickAccessTab, showModal, staticClasses } from 'decky-frontend-lib';
+import { FaPlug } from 'react-icons/fa';
+
+import { DeckyState, DeckyStateContextProvider } from './components/DeckyState';
+import LegacyPlugin from './components/LegacyPlugin';
+import PluginInstallModal from './components/modals/PluginInstallModal';
+import PluginView from './components/PluginView';
+import SettingsPage from './components/settings';
+import StorePage from './components/store/Store';
+import TitleView from './components/TitleView';
+import Logger from './logger';
+import { Plugin } from './plugin';
+import RouterHook from './router-hook';
+import TabsHook from './tabs-hook';
+import Toaster from './toaster';
+import { VerInfo, callUpdaterMethod } from './updater';
+
+declare global {
+  interface Window {}
+}
+
+class PluginLoader extends Logger {
+  private plugins: Plugin[] = [];
+  private tabsHook: TabsHook = new TabsHook();
+  // private windowHook: WindowHook = new WindowHook();
+  private routerHook: RouterHook = new RouterHook();
+  private toaster: Toaster = new Toaster();
+  private deckyState: DeckyState = new DeckyState();
+
+  private reloadLock: boolean = false;
+  // stores a list of plugin names which requested to be reloaded
+  private pluginReloadQueue: string[] = [];
+
+  constructor() {
+    super(PluginLoader.name);
+    this.log('Initialized');
+
+    this.tabsHook.add({
+      id: QuickAccessTab.Decky,
+      title: null,
+      content: (
+        <DeckyStateContextProvider deckyState={this.deckyState}>
+          <TitleView />
+          <PluginView />
+        </DeckyStateContextProvider>
+      ),
+      icon: <FaPlug />,
+    });
+
+    this.routerHook.addRoute('/decky/store', () => <StorePage />);
+    this.routerHook.addRoute('/decky/settings', () => {
+      return (
+        <DeckyStateContextProvider deckyState={this.deckyState}>
+          <SettingsPage />
+        </DeckyStateContextProvider>
+      );
+    });
+  }
+
+  public async notifyUpdates() {
+    const versionInfo = (await callUpdaterMethod('get_version')).result as VerInfo;
+    if (versionInfo?.remote && versionInfo?.remote?.tag_name != versionInfo?.current) {
+      this.toaster.toast({
+        title: 'Decky',
+        body: `Update to ${versionInfo?.remote?.tag_name} availiable!`,
+      });
+    }
+  }
+
+  public addPluginInstallPrompt(artifact: string, version: string, request_id: string, hash: string) {
+    showModal(
+      <PluginInstallModal
+        artifact={artifact}
+        version={version}
+        hash={hash}
+        onOK={() => this.callServerMethod('confirm_plugin_install', { request_id })}
+        onCancel={() => this.callServerMethod('cancel_plugin_install', { request_id })}
+      />,
+    );
+  }
+
+  public uninstallPlugin(name: string) {
+    showModal(
+      <ModalRoot
+        onOK={async () => {
+          const formData = new FormData();
+          formData.append('name', name);
+          await fetch('http://localhost:1337/browser/uninstall_plugin', {
+            method: 'POST',
+            body: formData,
+            credentials: 'include',
+            headers: {
+              Authentication: window.deckyAuthToken,
+            },
+          });
+        }}
+        onCancel={() => {
+          // do nothing
+        }}
+      >
+        <div className={staticClasses.Title} style={{ flexDirection: 'column' }}>
+          Uninstall {name}?
+        </div>
+      </ModalRoot>,
+    );
+  }
+
+  public hasPlugin(name: string) {
+    return Boolean(this.plugins.find((plugin) => plugin.name == name));
+  }
+
+  public dismountAll() {
+    for (const plugin of this.plugins) {
+      this.log(`Dismounting ${plugin.name}`);
+      plugin.onDismount?.();
+    }
+  }
+
+  public deinit() {
+    this.routerHook.removeRoute('/decky/store');
+    this.routerHook.removeRoute('/decky/settings');
+  }
+
+  public unloadPlugin(name: string) {
+    const plugin = this.plugins.find((plugin) => plugin.name === name || plugin.name === name.replace('$LEGACY_', ''));
+    plugin?.onDismount?.();
+    this.plugins = this.plugins.filter((p) => p !== plugin);
+    this.deckyState.setPlugins(this.plugins);
+  }
+
+  public async importPlugin(name: string) {
+    if (this.reloadLock) {
+      this.log('Reload currently in progress, adding to queue', name);
+      this.pluginReloadQueue.push(name);
+      return;
+    }
+
+    try {
+      this.reloadLock = true;
+      this.log(`Trying to load ${name}`);
+
+      this.unloadPlugin(name);
+
+      if (name.startsWith('$LEGACY_')) {
+        await this.importLegacyPlugin(name.replace('$LEGACY_', ''));
+      } else {
+        await this.importReactPlugin(name);
+      }
+
+      this.deckyState.setPlugins(this.plugins);
+      this.log(`Loaded ${name}`);
+    } catch (e) {
+      throw e;
+    } finally {
+      this.reloadLock = false;
+      const nextPlugin = this.pluginReloadQueue.shift();
+      if (nextPlugin) {
+        this.importPlugin(nextPlugin);
+      }
+    }
+  }
+
+  private async importReactPlugin(name: string) {
+    let res = await fetch(`http://127.0.0.1:1337/plugins/${name}/frontend_bundle`, {
+      credentials: 'include',
+      headers: {
+        Authentication: window.deckyAuthToken,
+      },
+    });
+    if (res.ok) {
+      let plugin = await eval(await res.text())(this.createPluginAPI(name));
+      this.plugins.push({
+        ...plugin,
+        name: name,
+      });
+    } else throw new Error(`${name} frontend_bundle not OK`);
+  }
+
+  private async importLegacyPlugin(name: string) {
+    const url = `http://127.0.0.1:1337/plugins/load_main/${name}`;
+    this.plugins.push({
+      name: name,
+      icon: <FaPlug />,
+      content: <LegacyPlugin url={url} />,
+    });
+  }
+
+  async callServerMethod(methodName: string, args = {}) {
+    const response = await fetch(`http://127.0.0.1:1337/methods/${methodName}`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        Authentication: window.deckyAuthToken,
+      },
+      body: JSON.stringify(args),
+    });
+
+    return response.json();
+  }
+
+  createPluginAPI(pluginName: string) {
+    return {
+      routerHook: this.routerHook,
+      toaster: this.toaster,
+      callServerMethod: this.callServerMethod,
+      async callPluginMethod(methodName: string, args = {}) {
+        const response = await fetch(`http://127.0.0.1:1337/plugins/${pluginName}/methods/${methodName}`, {
+          method: 'POST',
+          credentials: 'include',
+          headers: {
+            'Content-Type': 'application/json',
+            Authentication: window.deckyAuthToken,
+          },
+          body: JSON.stringify({
+            args,
+          }),
+        });
+
+        return response.json();
+      },
+      fetchNoCors(url: string, request: any = {}) {
+        let args = { method: 'POST', headers: {} };
+        const req = { ...args, ...request, url, data: request.body };
+        return this.callServerMethod('http_request', req);
+      },
+      executeInTab(tab: string, runAsync: boolean, code: string) {
+        return this.callServerMethod('execute_in_tab', {
+          tab,
+          run_async: runAsync,
+          code,
+        });
+      },
+      injectCssIntoTab(tab: string, style: string) {
+        return this.callServerMethod('inject_css_into_tab', {
+          tab,
+          style,
+        });
+      },
+      removeCssFromTab(tab: string, cssId: any) {
+        return this.callServerMethod('remove_css_from_tab', {
+          tab,
+          css_id: cssId,
+        });
+      },
+    };
+  }
+}
+
+export default PluginLoader;

frontend/src/plugin.ts

@@ -0,0 +1,6 @@
+export interface Plugin {
+  name: string;
+  icon: JSX.Element;
+  content?: JSX.Element;
+  onDismount?(): void;
+}

frontend/src/router-hook.tsx

@@ -0,0 +1,141 @@
+import { afterPatch, findModuleChild, unpatch } from 'decky-frontend-lib';
+import React, { ReactElement, cloneElement, createElement, memo } from 'react';
+import type { Route, RouteProps } from 'react-router';
+
+import {
+  DeckyRouterState,
+  DeckyRouterStateContextProvider,
+  RoutePatch,
+  RouterEntry,
+  useDeckyRouterState,
+} from './components/DeckyRouterState';
+import Logger from './logger';
+
+declare global {
+  interface Window {
+    __ROUTER_HOOK_INSTANCE: any;
+  }
+}
+
+class RouterHook extends Logger {
+  private router: any;
+  private memoizedRouter: any;
+  private gamepadWrapper: any;
+  private routerState: DeckyRouterState = new DeckyRouterState();
+
+  constructor() {
+    super('RouterHook');
+
+    this.log('Initialized');
+    window.__ROUTER_HOOK_INSTANCE?.deinit?.();
+    window.__ROUTER_HOOK_INSTANCE = this;
+
+    this.gamepadWrapper = findModuleChild((m) => {
+      if (typeof m !== 'object') return undefined;
+      for (let prop in m) {
+        if (m[prop]?.render?.toString()?.includes('["flow-children","onActivate","onCancel","focusClassName",'))
+          return m[prop];
+      }
+    });
+
+    let Route: new () => Route;
+    // Used to store the new replicated routes we create to allow routes to be unpatched.
+    let toReplace = new Map<string, ReactNode>();
+    const DeckyWrapper = ({ children }: { children: ReactElement }) => {
+      const { routes, routePatches } = useDeckyRouterState();
+
+      const routeList = children.props.children[0].props.children;
+
+      let routerIndex = routeList.length;
+      if (!routeList[routerIndex - 1]?.length || routeList[routerIndex - 1]?.length !== routes.size) {
+        if (routeList[routerIndex - 1]?.length && routeList[routerIndex - 1].length !== routes.size) routerIndex--;
+        const newRouterArray: ReactElement[] = [];
+        routes.forEach(({ component, props }, path) => {
+          newRouterArray.push(
+            <Route path={path} {...props}>
+              {createElement(component)}
+            </Route>,
+          );
+        });
+        routeList[routerIndex] = newRouterArray;
+      }
+      routeList.forEach((route: Route, index: number) => {
+        const replaced = toReplace.get(route?.props?.path as string);
+        if (replaced) {
+          routeList[index].props.children = replaced;
+          toReplace.delete(route?.props?.path as string);
+        }
+        if (route?.props?.path && routePatches.has(route.props.path as string)) {
+          toReplace.set(
+            route?.props?.path as string,
+            // @ts-ignore
+            routeList[index].props.children,
+          );
+          routePatches.get(route.props.path as string)?.forEach((patch) => {
+            const oType = routeList[index].props.children.type;
+            routeList[index].props.children = patch({
+              ...routeList[index].props,
+              children: {
+                ...cloneElement(routeList[index].props.children),
+                type: (props) => createElement(oType, props),
+              },
+            }).children;
+          });
+        }
+      });
+      this.debug('Rerendered routes list');
+      return children;
+    };
+
+    afterPatch(this.gamepadWrapper, 'render', (_: any, ret: any) => {
+      if (ret?.props?.children?.props?.children?.length == 5) {
+        if (
+          ret.props.children.props.children[2]?.props?.children?.[0]?.type?.type
+            ?.toString()
+            ?.includes('GamepadUI.Settings.Root()')
+        ) {
+          if (!this.router) {
+            this.router = ret.props.children.props.children[2]?.props?.children?.[0]?.type;
+            afterPatch(this.router, 'type', (_: any, ret: any) => {
+              if (!Route)
+                Route = ret.props.children[0].props.children.find((x: any) => x.props.path == '/createaccount').type;
+              const returnVal = (
+                <DeckyRouterStateContextProvider deckyRouterState={this.routerState}>
+                  <DeckyWrapper>{ret}</DeckyWrapper>
+                </DeckyRouterStateContextProvider>
+              );
+              return returnVal;
+            });
+            this.memoizedRouter = memo(this.router.type);
+            this.memoizedRouter.isDeckyRouter = true;
+          }
+          ret.props.children.props.children[2].props.children[0].type = this.memoizedRouter;
+        }
+      }
+      return ret;
+    });
+  }
+
+  addRoute(path: string, component: RouterEntry['component'], props: RouterEntry['props'] = {}) {
+    this.routerState.addRoute(path, component, props);
+  }
+
+  addPatch(path: string, patch: RoutePatch) {
+    return this.routerState.addPatch(path, patch);
+  }
+
+  removePatch(path: string, patch: RoutePatch) {
+    this.routerState.removePatch(path, patch);
+  }
+
+  removeRoute(path: string) {
+    this.routerState.removeRoute(path);
+  }
+
+  deinit() {
+    unpatch(this.gamepadWrapper, 'render');
+    this.router && unpatch(this.router, 'type');
+  }
+}
+
+export default RouterHook;

frontend/src/tabs-hook.ts

@@ -0,0 +1,134 @@
+import { QuickAccessTab, afterPatch, sleep, unpatch } from 'decky-frontend-lib';
+import { memo } from 'react';
+
+import Logger from './logger';
+
+declare global {
+  interface Window {
+    __TABS_HOOK_INSTANCE: any;
+  }
+  interface Array<T> {
+    __filter: any;
+  }
+}
+
+const isTabsArray = (tabs: any) => {
+  const length = tabs.length;
+  return length >= 7 && tabs[length - 1]?.tab;
+};
+
+interface Tab {
+  id: QuickAccessTab | number;
+  title: any;
+  content: any;
+  icon: any;
+}
+
+class TabsHook extends Logger {
+  // private keys = 7;
+  tabs: Tab[] = [];
+  private quickAccess: any;
+  private tabRenderer: any;
+  private memoizedQuickAccess: any;
+  private cNode: any;
+
+  private qAPTree: any;
+  private rendererTree: any;
+
+  constructor() {
+    super('TabsHook');
+
+    this.log('Initialized');
+    window.__TABS_HOOK_INSTANCE?.deinit?.();
+    window.__TABS_HOOK_INSTANCE = this;
+
+    const self = this;
+    const tree = (document.getElementById('root') as any)._reactRootContainer._internalRoot.current;
+    let scrollRoot: any;
+    let currentNode = tree;
+    (async () => {
+      let iters = 0;
+      while (!scrollRoot) {
+        iters++;
+        currentNode = currentNode?.child;
+        if (iters >= 30 || !currentNode) {
+          iters = 0;
+          currentNode = tree;
+          await sleep(5000);
+        }
+        if (currentNode?.type?.prototype?.RemoveSmartScrollContainer) scrollRoot = currentNode;
+      }
+      let newQA: any;
+      let newQATabRenderer: any;
+      afterPatch(scrollRoot.stateNode, 'render', (_: any, ret: any) => {
+        if (!this.quickAccess && ret.props.children.props.children[4]) {
+          this.quickAccess = ret?.props?.children?.props?.children[4].type;
+          newQA = (...args: any) => {
+            const ret = this.quickAccess.type(...args);
+            if (ret) {
+              if (!newQATabRenderer) {
+                this.tabRenderer = ret.props.children[1].children.type;
+                newQATabRenderer = (...args: any) => {
+                  const oFilter = Array.prototype.filter;
+                  Array.prototype.filter = function (...args: any[]) {
+                    if (isTabsArray(this)) {
+                      self.render(this);
+                    }
+                    // @ts-ignore
+                    return oFilter.call(this, ...args);
+                  };
+                  // TODO remove array hack entirely and use this instead const tabs = ret.props.children.props.children[0].props.children[1].props.children[0].props.children[0].props.tabs
+                  const ret = this.tabRenderer(...args);
+                  Array.prototype.filter = oFilter;
+                  return ret;
+                };
+              }
+              this.rendererTree = ret.props.children[1].children;
+              ret.props.children[1].children.type = newQATabRenderer;
+            }
+            return ret;
+          };
+          this.memoizedQuickAccess = memo(newQA);
+          this.memoizedQuickAccess.isDeckyQuickAccess = true;
+        }
+        if (ret.props.children.props.children[4]) {
+          this.qAPTree = ret.props.children.props.children[4];
+          ret.props.children.props.children[4].type = this.memoizedQuickAccess;
+        }
+        return ret;
+      });
+      this.cNode = scrollRoot;
+      this.cNode.stateNode.forceUpdate();
+    })();
+  }
+
+  deinit() {
+    if (this.cNode) unpatch(this.cNode.stateNode, 'render');
+    if (this.qAPTree) this.qAPTree.type = this.quickAccess;
+    if (this.rendererTree) this.rendererTree.type = this.tabRenderer;
+    if (this.cNode) this.cNode.stateNode.forceUpdate();
+  }
+
+  add(tab: Tab) {
+    this.debug('Adding tab', tab.id, 'to render array');
+    this.tabs.push(tab);
+  }
+
+  removeById(id: number) {
+    this.debug('Removing tab', id);
+    this.tabs = this.tabs.filter((tab) => tab.id !== id);
+  }
+
+  render(existingTabs: any[]) {
+    for (const { title, icon, content, id } of this.tabs) {
+      existingTabs.push({
+        key: id,
+        title,
+        tab: icon,
+        panel: content,
+      });
+    }
+  }
+}
+
+export default TabsHook;

frontend/src/toaster.tsx

@@ -0,0 +1,93 @@
+import { ToastData, afterPatch, findInReactTree, findModuleChild, sleep, unpatch } from 'decky-frontend-lib';
+
+import Toast from './components/Toast';
+import Logger from './logger';
+
+declare global {
+  interface Window {
+    __TOASTER_INSTANCE: any;
+    NotificationStore: any;
+  }
+}
+
+class Toaster extends Logger {
+  private instanceRet: any;
+  private node: any;
+  private settingsModule: any;
+
+  constructor() {
+    super('Toaster');
+
+    window.__TOASTER_INSTANCE?.deinit?.();
+    window.__TOASTER_INSTANCE = this;
+    this.init();
+  }
+
+  async init() {
+    this.settingsModule = findModuleChild((m) => {
+      if (typeof m !== 'object') return undefined;
+      for (let prop in m) {
+        if (typeof m[prop]?.settings?.bDisableToastsInGame !== 'undefined') return m[prop];
+      }
+    });
+
+    let instance: any;
+    while (true) {
+      instance = findInReactTree(
+        (document.getElementById('root') as any)._reactRootContainer._internalRoot.current,
+        (x) => x?.memoizedProps?.className?.startsWith('toastmanager_ToastPlaceholder'),
+      );
+      if (instance) break;
+      this.debug('finding instance');
+      await sleep(2000);
+    }
+
+    this.node = instance.return.return;
+    this.node.stateNode.render = (...args: any[]) => {
+      const ret = this.node.stateNode.__proto__.render.call(this.node.stateNode, ...args);
+      if (ret) {
+        this.instanceRet = ret;
+        afterPatch(ret, 'type', (_: any, ret: any) => {
+          if (ret?.props?.children[1]?.children?.props?.notification?.decky) {
+            const toast = ret.props.children[1].children.props.notification;
+            ret.props.children[1].children.type = () => <Toast toast={toast} />;
+          }
+          return ret;
+        });
+      }
+      return ret;
+    };
+    this.node.stateNode.forceUpdate();
+    this.log('Initialized');
+  }
+
+  toast(toast: ToastData) {
+    const settings = this.settingsModule.settings;
+    let toastData = {
+      nNotificationID: window.NotificationStore.m_nNextTestNotificationID++,
+      rtCreated: Date.now(),
+      eType: 15,
+      nToastDurationMS: toast.duration || 5e3,
+      data: toast,
+      decky: true,
+    };
+    // @ts-ignore
+    toastData.data.appid = () => 0;
+    if (
+      (settings.bDisableAllToasts && !toast.critical) ||
+      (settings.bDisableToastsInGame && !toast.critical && window.NotificationStore.BIsUserInGame())
+    )
+      return;
+    window.NotificationStore.m_rgNotificationToasts.push(toastData);
+    window.NotificationStore.DispatchNextToast();
+    window.NotificationStore.m_rgNotificationToasts.pop();
+  }
+
+  deinit() {
+    this.instanceRet && unpatch(this.instanceRet, 'type');
+    this.node && delete this.node.stateNode.render;
+    this.node && this.node.stateNode.forceUpdate();
+  }
+}
+
+export default Toaster;

frontend/src/updater.ts

@@ -0,0 +1,48 @@
+import { sleep } from 'decky-frontend-lib';
+
+export enum Branches {
+  Release,
+  Prerelease,
+  Nightly,
+}
+
+export interface DeckyUpdater {
+  updateProgress: (val: number) => void;
+  finish: () => void;
+}
+
+export interface VerInfo {
+  current: string;
+  remote: {
+    assets: {
+      browser_download_url: string;
+      created_at: string;
+    }[];
+    name: string;
+    body: string;
+    prerelease: boolean;
+    published_at: string;
+    tag_name: string;
+  } | null;
+  updatable: boolean;
+}
+
+export async function callUpdaterMethod(methodName: string, args = {}) {
+  const response = await fetch(`http://127.0.0.1:1337/updater/${methodName}`, {
+    method: 'POST',
+    credentials: 'include',
+    headers: {
+      'Content-Type': 'application/json',
+      Authentication: window.deckyAuthToken,
+    },
+    body: JSON.stringify(args),
+  });
+
+  return response.json();
+}
+
+export async function finishUpdate() {
+  callUpdaterMethod('do_restart');
+  await sleep(3000);
+  location.reload();
+}

frontend/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "ESNext",
+    "target": "ES2020",
+    "jsx": "react",
+    "jsxFactory": "window.SP_REACT.createElement",
+    "jsxFragmentFactory": "window.SP_REACT.Fragment",
+    "declaration": false,
+    "moduleResolution": "node",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "esModuleInterop": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strict": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

install.sh

@@ -1,37 +0,0 @@
-#!/bin/sh
-
-if [ "$EUID" -ne 0 ]; then
-    echo "Please run this script as root"
-    exit
-fi
-
-HOMEBREW_FOLDER=/home/deck/homebrew
-LOADER_FOLDER=$(realpath $(dirname "$0"))
-
-# Create folder structure
-rm -rf ${HOMEBREW_FOLDER}/services/plugin_loader
-mkdir -p ${HOMEBREW_FOLDER}/services/plugin_loader
-mkdir -p ${HOMEBREW_FOLDER}/plugins
-chown -R deck ${HOMEBREW_FOLDER}
-
-# Install our files
-cp -a ${LOADER_FOLDER}/plugin_loader/. /home/deck/homebrew/services/plugin_loader/
-
-# Install pip if it's not installed yet
-python -m pip &> /dev/null
-if [ $? -ne 0 ]; then
-    curl https://bootstrap.pypa.io/get-pip.py --output /tmp/get-pip.py
-    python /tmp/get-pip.py
-fi
-
-# Install dependencies
-python -m pip install -r requirements.txt
-
-# Create a service
-systemctl stop plugin_loader
-
-cp ./plugin_loader.service /etc/systemd/system/plugin_loader.service
-
-systemctl daemon-reload
-systemctl enable plugin_loader
-systemctl start plugin_loader

plugin_loader.service

@@ -1,13 +0,0 @@
-[Unit]
-Description=SteamDeck Plugin Manager
-
-[Service]
-Type=simple
-
-ExecStart=/usr/bin/python3 /home/deck/homebrew/services/plugin_loader/main.py
-WorkingDirectory=/home/deck/homebrew/services/plugin_loader
-
-Environment=PLUGIN_PATH=/home/deck/homebrew/plugins
-
-[Install]
-WantedBy=default.target

plugin_loader/injector.py

@@ -1,85 +0,0 @@
-#Injector code from https://github.com/SteamDeckHomebrew/steamdeck-ui-inject. More info on how it works there.
-
-from aiohttp import ClientSession
-from logging import info
-from asyncio import sleep
-
-BASE_ADDRESS = "http://localhost:8080"
-
-class Tab:
-    def __init__(self, res) -> None:
-        self.title = res["title"]
-        self.id = res["id"]
-        self.ws_url = res["webSocketDebuggerUrl"]
-
-        self.websocket = None
-        self.client = None
-
-    async def open_websocket(self):
-        self.client = ClientSession()
-        self.websocket = await self.client.ws_connect(self.ws_url)
-    
-    async def listen_for_message(self):
-        async for message in self.websocket:
-            yield message
-
-    async def _send_devtools_cmd(self, dc, receive=True):
-        if self.websocket:
-            await self.websocket.send_json(dc)
-            return (await self.websocket.receive_json()) if receive else None
-        raise RuntimeError("Websocket not opened")
-
-    async def evaluate_js(self, js):
-        await self.open_websocket()
-        res = await self._send_devtools_cmd({
-            "id": 1,
-            "method": "Runtime.evaluate",
-            "params": {
-                "expression": js,
-                "userGesture": True
-            }
-        })
-        await self.client.close()
-        return res
-        
-    async def get_steam_resource(self, url):
-        await self.open_websocket()
-        res = await self._send_devtools_cmd({
-            "id": 1,
-            "method": "Runtime.evaluate",
-            "params": {
-                "expression": f'(async function test() {{ return await (await fetch("{url}")).text() }})()',
-                "userGesture": True,
-                "awaitPromise": True
-            }
-        })
-        await self.client.close()
-        return res["result"]["result"]["value"]
-    
-    def __repr__(self):
-        return self.title
-
-async def get_tabs():
-    async with ClientSession() as web:
-        res = {}
-
-        while True:
-            try:
-                res = await web.get("{}/json".format(BASE_ADDRESS))
-                break
-            except:
-                print("Steam isn't available yet. Wait for a moment...")
-                await sleep(5)
-
-        if res.status == 200:
-            res = await res.json()
-            return [Tab(i) for i in res]
-        else:
-            raise Exception("/json did not return 200. {}".format(await res.text()))
-
-async def inject_to_tab(tab_name, js):
-    tabs = await get_tabs()
-    tab = next((i for i in tabs if i.title == tab_name), None)
-    if not tab:
-        raise ValueError("Tab {} not found in running tabs".format(tab_name))
-    info(await tab.evaluate_js(js))

plugin_loader/loader.py

@@ -1,105 +0,0 @@
-from aiohttp import web
-from aiohttp_jinja2 import template
-from watchdog.observers.polling import PollingObserver as Observer
-from watchdog.events import FileSystemEventHandler
-
-from os import path, listdir
-from importlib.util import spec_from_file_location, module_from_spec
-from logging import getLogger
-
-from injector import get_tabs
-
-class FileChangeHandler(FileSystemEventHandler):
-    def __init__(self, loader) -> None:
-        super().__init__()
-        self.loader : Loader = loader
-
-    def on_created(self, event):
-        src_path = event.src_path
-        if "__pycache__" in src_path:
-            return
-        self.loader.import_plugin(src_path)
-    
-    def on_modified(self, event):
-        src_path = event.src_path
-        if "__pycache__" in src_path:
-            return
-        self.loader.import_plugin(src_path)
-
-class Loader:
-    def __init__(self, server_instance, plugin_path, loop, live_reload=False) -> None:
-        self.loop = loop
-        self.logger = getLogger("Loader")
-        self.plugin_path = plugin_path
-        self.plugins = {}
-        self.import_plugins()
-
-        if live_reload:
-            self.observer = Observer()
-            self.observer.schedule(FileChangeHandler(self), self.plugin_path)
-            self.observer.start()
-
-        server_instance.add_routes([
-            web.get("/plugins/iframe", self.plugin_iframe_route),
-            web.get("/plugins/reload", self.reload_plugins),
-            web.post("/plugins/method_call", self.handle_plugin_method_call),
-            web.get("/plugins/load/{name}", self.load_plugin),
-            web.get("/steam_resource/{path:.+}", self.get_steam_resource)
-        ])
-
-    def import_plugin(self, file):
-        try:
-            spec = spec_from_file_location("_", file)
-            module = module_from_spec(spec)
-            spec.loader.exec_module(module)
-            if not hasattr(module.Plugin, "name"):
-                raise KeyError("Plugin {} has not defined a name".format(file))
-            if module.Plugin.name in self.plugins:
-                    if hasattr(module.Plugin, "hot_reload") and not module.Plugin.hot_reload:
-                        self.logger.info("Plugin {} is already loaded and has requested to not be re-loaded"
-                        .format(module.Plugin.name))
-                    else:
-                        if hasattr(self.plugins[module.Plugin.name], "task"):
-                            self.plugins[module.Plugin.name].task.cancel()
-                        self.plugins.pop(module.Plugin.name, None)
-            self.plugins[module.Plugin.name] = module.Plugin()
-            if hasattr(module.Plugin, "__main"):
-                setattr(self.plugins[module.Plugin.name], "task",
-                self.loop.create_task(self.plugins[module.Plugin.name].__main()))
-            self.logger.info("Loaded {}".format(module.Plugin.name))
-        except Exception as e:
-            self.logger.error("Could not load {}. {}".format(file, e))
-
-    def import_plugins(self):
-        files = [i for i in listdir(self.plugin_path) if i.endswith(".py")]
-        for file in files:
-            self.import_plugin(path.join(self.plugin_path, file))
-    
-    async def watch_for_file_change(self):
-        pass
-
-    async def reload_plugins(self, request=None):
-        self.logger.info("Re-importing plugins.")
-        self.import_plugins()
-
-    async def handle_plugin_method_call(self, plugin_name, method_name, **kwargs):
-        if method_name.startswith("__"):
-            raise RuntimeError("Tried to call private method")
-        return await getattr(self.plugins[plugin_name], method_name)(**kwargs)
-
-    async def get_steam_resource(self, request):
-        tab = (await get_tabs())[0]
-        return web.Response(text=await tab.get_steam_resource(f"https://steamloopback.host/{request.match_info['path']}"), content_type="text/html")
-
-    async def load_plugin(self, request):
-        plugin = self.plugins[request.match_info["name"]]
-        ret = """
-        <script src="/static/library.js"></script>
-        <script>const plugin_name = '{}' </script>
-        {}
-        """.format(plugin.name, plugin.main_view_html)
-        return web.Response(text=ret, content_type="text/html")
-
-    @template('plugin_view.html')
-    async def plugin_iframe_route(self, request):
-        return {"plugins": self.plugins.values()}

plugin_loader/main.py

@@ -1,78 +0,0 @@
-from aiohttp.web import Application, run_app, static
-from aiohttp_jinja2 import setup as jinja_setup
-from jinja2 import FileSystemLoader
-from os import getenv, path
-from asyncio import get_event_loop
-from json import loads, dumps
-
-from loader import Loader
-from injector import inject_to_tab, get_tabs
-from utilities import util_methods
-
-CONFIG = {
-    "plugin_path": getenv("PLUGIN_PATH", "/home/deck/homebrew/plugins"),
-    "server_host": getenv("SERVER_HOST", "127.0.0.1"),
-    "server_port": int(getenv("SERVER_PORT", "1337")),
-    "live_reload": getenv("LIVE_RELOAD", "1") == "1"
-}
-
-class PluginManager:
-    def __init__(self) -> None:
-        self.loop = get_event_loop()
-        self.web_app = Application()
-        self.plugin_loader = Loader(self.web_app, CONFIG["plugin_path"], self.loop, CONFIG["live_reload"])
-
-        jinja_setup(self.web_app, loader=FileSystemLoader(path.join(path.dirname(__file__), 'templates')))
-        self.web_app.on_startup.append(self.inject_javascript)
-        self.web_app.add_routes([static("/static", path.join(path.dirname(__file__), 'static'))])
-        self.loop.create_task(self.method_call_listener())
-
-    async def resolve_method_call(self, tab, call_id, response):
-        await tab._send_devtools_cmd({
-            "id": 1,
-            "method": "Runtime.evaluate",
-            "params": {
-                "expression": "resolveMethodCall({}, {})".format(call_id, dumps(response)),
-                "userGesture": True
-            }
-        }, receive=False)
-
-    async def handle_method_call(self, method, tab):
-        res = {}
-        try:
-            if method["method"] == "plugin_method":
-                res["result"] = await self.plugin_loader.handle_plugin_method_call(
-                    method["args"]["plugin_name"],
-                    method["args"]["method_name"],
-                    **method["args"]["args"]
-                )
-                res["success"] = True
-            else:
-                r = await util_methods[method["method"]](**method["args"])
-                res["result"] = r
-                res["success"] = True
-        except Exception as e:
-            res["result"] = str(e)
-            res["success"] = False
-        finally:
-            await self.resolve_method_call(tab, method["id"], res)
-
-    async def method_call_listener(self):
-        tab = next((i for i in await get_tabs() if i.title == "QuickAccess"), None)
-        await tab.open_websocket()
-        await tab._send_devtools_cmd({"id": 1, "method": "Runtime.discardConsoleEntries"})
-        await tab._send_devtools_cmd({"id": 1, "method": "Runtime.enable"})
-        async for message in tab.listen_for_message():
-            data = message.json()
-            if not "id" in data and data["method"] == "Runtime.consoleAPICalled" and data["params"]["type"] == "debug":
-                method = loads(data["params"]["args"][0]["value"])
-                self.loop.create_task(self.handle_method_call(method, tab))
-                
-    async def inject_javascript(self, request=None):
-        await inject_to_tab("QuickAccess", open(path.join(path.dirname(__file__), "static/plugin_page.js"), "r").read())
-
-    def run(self):
-        return run_app(self.web_app, host=CONFIG["server_host"], port=CONFIG["server_port"], loop=self.loop)
-
-if __name__ == "__main__":
-    PluginManager().run()

plugin_loader/static/library.js

@@ -1,41 +0,0 @@
-class PluginEventTarget extends EventTarget { }
-method_call_ev_target = new PluginEventTarget();
-
-window.addEventListener("message", function(evt) {
-    console.log(evt);
-    let ev = new Event(evt.data.call_id);
-    ev.data = evt.data.result;
-    method_call_ev_target.dispatchEvent(ev);
-}, false);
-
-async function call_server_method(method_name, arg_object={}) {
-    let id = `${new Date().getTime()}`;
-    console.debug(JSON.stringify({
-        "id": id,
-        "method": method_name,
-        "args": arg_object
-    }));
-    return new Promise((resolve, reject) => {
-        method_call_ev_target.addEventListener(`${id}`, function (event) {
-            if (event.data.success) resolve(event.data.result);
-            else reject(event.data.result);
-        });
-    });
-}
-
-async function fetch_nocors(url, request={}) {
-    let args = { method: "POST", headers: {}, body: "" };
-    request = {...args, ...request};
-    request.url = url;
-    return await call_server_method("http_request", request);
-}
-
-async function call_plugin_method(method_name, arg_object={}) {
-    if (plugin_name == undefined) 
-        throw new Error("Plugin methods can only be called from inside plugins (duh)");
-    return await call_server_method("plugin_method", {
-        'plugin_name': plugin_name,
-        'method_name': method_name,
-        'args': arg_object
-    });
-}

plugin_loader/static/plugin_page.js

@@ -1,44 +0,0 @@
-(function () {
-    const PLUGIN_ICON = `
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plugin" viewBox="0 0 16 16">
-          <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 
-              4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414
-              1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328
-              4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
-        </svg>
-    `;
-
-    function createTitle(text) {
-        return `<div id="plugin_title" class="quickaccessmenu_Title_34nl5">${text}</div>`;
-    }
-
-    function createPluginList() {
-        let pages = document.getElementsByClassName("quickaccessmenu_AllTabContents_2yKG4 quickaccessmenu_Down_3rR0o")[0];
-        let pluginPage = pages.children[pages.children.length - 1];
-        pluginPage.innerHTML = createTitle("Plugins");
-
-        pluginPage.innerHTML += `<iframe id="plugin_iframe" style="border: none; width: 100%; height: 100%;" src="http://127.0.0.1:1337/plugins/iframe"></iframe>`;
-    }
-
-    function inject() {
-        let tabs = document.getElementsByClassName("quickaccessmenu_TabContentColumn_2z5NL Panel Focusable")[0];
-        tabs.children[tabs.children.length - 1].innerHTML = PLUGIN_ICON;
-
-        createPluginList();
-    }
-
-    let injector = setInterval(function () {
-        if (document.hasFocus()) {
-            inject();
-            document.getElementById("plugin_title").onclick = function() {
-                document.getElementById("plugin_iframe").contentWindow.location.href = "http://127.0.0.1:1337/plugins/iframe";
-            }
-            clearInterval(injector);
-        }
-    }, 100);
-})();
-
-function resolveMethodCall(call_id, result) {
-    let iframe = document.getElementById("plugin_iframe").contentWindow;
-    iframe.postMessage({'call_id': call_id, 'result': result}, "http://127.0.0.1:1337");
-}

plugin_loader/templates/plugin_view.html

@@ -1,32 +0,0 @@
-<link rel="stylesheet" href="/steam_resource/css/2.css">
-<link rel="stylesheet" href="/steam_resource/css/39.css">
-<link rel="stylesheet" href="/steam_resource/css/library.css">
-<script src="/static/library.js"></script>
-
-{% if not plugins|length %}
-<div class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable" style="--indent-level:0;">
-    <div class="basicdialog_FieldChildren_279n8" style="color: white; font-size: large; padding-top: 10px;">
-        No plugins installed :(
-    </div>    
-</div>
-{% endif %}
-
-<div class="quickaccessmenu_TabGroupPanel_1QO7b Panel Focusable">
-    <div class="quickaccesscontrols_PanelSectionRow_26R5w">
-        {% for plugin in plugins %}
-        {% if plugin.tile_view_html|length %}
-        <div onclick="location.href = '/plugins/load/{{ plugin.name }}'" class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable" style="--indent-level:0;">
-            {{ plugin.tile_view_html|safe }}
-        </div>
-        {% else %}
-        <div class="quickaccesscontrols_PanelSectionRow_26R5w">
-            <div onclick="location.href = '/plugins/load/{{ plugin.name }}'" class="basicdialog_Field_ugL9c basicdialog_WithChildrenBelow_1RjOd basicdialog_InlineWrapShiftsChildrenBelow_3a6QZ basicdialog_ExtraPaddingOnChildrenBelow_2-owv basicdialog_StandardPadding_1HrfN basicdialog_HighlightOnFocus_1xh2W Panel Focusable" style="--indent-level:0;">
-                <div class="basicdialog_FieldChildren_279n8">
-                    <button type="button" tabindex="0" class="DialogButton _DialogLayout Secondary basicdialog_Button_1Ievp Focusable">{{ plugin.name }}</button>
-                </div>    
-            </div>
-        </div>
-        {% endif %}
-        {% endfor %}
-    </div>
-</div>

plugin_loader/utilities.py

@@ -1,18 +0,0 @@
-from aiohttp import ClientSession
-
-async def http_request(method="", url="", **kwargs):
-    async with ClientSession() as web:
-        res = await web.request(method, url, **kwargs)
-        return {
-            "status": res.status,
-            "headers": dict(res.headers),
-            "body": await res.text()
-        }
-
-async def ping(**kwargs):
-    return "pong"
-
-util_methods = {
-    "ping": ping,
-    "http_request": http_request
-}

plugin_template.py

@@ -1,19 +0,0 @@
-class Plugin:
-    name = "Template Plugin"
-
-    author = "SteamDeckHomebrew"
-
-    main_view_html = "<html><body><h3>Template Plugin</h3></body></html>"
-
-    tile_view_html = ""
-
-    hot_reload = False
-
-    async def __main(self):
-        pass
-
-    async def method_1(self, **kwargs):
-        pass
-
-    async def method_2(self, **kwargs):
-        pass

requirements.txt

@@ -1,3 +1,5 @@
 aiohttp==3.8.1
 aiohttp-jinja2==1.5.0
-watchdog==2.1.7
+aiohttp_cors==0.7.0
+watchdog==2.1.7
+certifi==2022.6.15