Skip to content

Instantly share code, notes, and snippets.

@0xdevalias

0xdevalias/beeper-custom-theme-styles.md

Last active October 23, 2025 03:53
Show Gist options
  • Save 0xdevalias/3d2f5a861335cc1277b21a29d1285cfe to your computer and use it in GitHub Desktop.
Save 0xdevalias/3d2f5a861335cc1277b21a29d1285cfe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. 0xdevalias revised this gist Sep 24, 2025. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -99,6 +99,14 @@ The following are my notes/exploration into discovering what Beeper Desktop v4 d

    ---

    **Edit (2025-09-24):**

    Also, the 'official' (ish?) response in Beeper Devs community (Beeper Desktop → Settings → Developers → Community chat, or Matrix: [\#beeper-developers:beeper.com](https://matrix.to/#/#beeper-developers:beeper.com)).

    >\[24/09/2025, 16:59:54\] Kishan Bagaria: this is great. we'll document the deep link behavior once we finalize it across the clients.
    ---

    I suspect there may be actual deeplinks available as well; but I know that the new Beeper Desktop v4 API and MCP support has an API option for opening a chat at the very least:

    - https://www.beeper.com/desktop-api
  2. 0xdevalias revised this gist Sep 24, 2025. 1 changed file with 148 additions and 0 deletions.
    148 changes: 148 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,7 @@
    - [devalias' Beeper CSS Hacks](#devalias-beeper-css-hacks)
    - [See Also](#see-also)
    - [My Other Related Deepdive Gist's and Projects](#my-other-related-deepdive-gists-and-projects)
    - [Beeper Desktop Deep Links (`beeper://`)](#beeper-desktop-deep-links-beeper)
    - [Bonus Section](#bonus-section)
    - [Beeper DevTools Hacks](#beeper-devtools-hacks)
    - [Beeper Desktop v4 Hacks](#beeper-desktop-v4-hacks)
    @@ -90,6 +91,153 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)
    - [Reverse Engineering on macOS (0xdevalias' gist)](https://gist.github.com/0xdevalias/256a8018473839695e8684e37da92c25#reverse-engineering-on-macos)

    ## Beeper Desktop Deep Links (`beeper://`)

    The following are my notes/exploration into discovering what Beeper Desktop v4 deeplinks were available (as of 2025-09-24, Beeper Desktop v4.1.186) that I wrote up for the following reddit comment:

    - https://www.reddit.com/r/beeper/comments/1hnjphq/comment/nfwke8h/

    ---

    I suspect there may be actual deeplinks available as well; but I know that the new Beeper Desktop v4 API and MCP support has an API option for opening a chat at the very least:

    - https://www.beeper.com/desktop-api
    - https://developers.beeper.com/desktop-api/
    - https://developers.beeper.com/desktop-api-reference/resources/app/methods/open

    ---

    But as I have been wondering this too, this thread inspired me to look a little deeper. I noticed that launching a `beeper://foo` link that's invalid shows a 'invalid deep link' toast.

    We can open the Electron devtools (`Command+Option+I` on macOS; or you could use the `Command+J` menu and start typing 'console' (triggers on 'con'; hidden otherwise)).

    We can then use the devtools 'search' tab (`Command+Shift+P` -> Show Search), and then search for: `deep link`, which gives us a few code matches. Skimming through those, `deep-link` would also be a good search term. So in the `.*` regex search mode, we could use: `deep link|deep-link`

    One thing I immediately noticed while skimming through these search results is that there is a 'Developer' section of the `Command+J` menu which has (among other things) a 'Copy chat deep link' option (that seemingly only shows when I actually have a chat loaded currently):

    ```
    {
    title: "Copy chat deep link",
    category: "Developer",
    action: () => {
    kn(`${Hg}select-thread/${l.platformName}/${l.id}?accountID=${l.accountID}`)
    }
    }
    ```

    Using that on a facebook messenger chat, I can get the following URL:

    ```
    beeper://select-thread/bridge-facebookgo/!REDACTED:beeper.local?accountID=facebookgo
    ```

    Where `!REDACTED` is the unique ID of that chat.

    For some other networks:

    ```
    beeper://select-thread/bridge-instagramgo/!REDACTED:beeper.local?accountID=instagramgo
    beeper://select-thread/bridge-twitter/!REDACTED:beeper.local?accountID=twitter
    beeper://select-thread/bridge-linkedin/!REDACTED:beeper.local?accountID=linkedin
    beeper://select-thread/bridge-discordgo/!REDACTED:beeper.local?accountID=discordgo
    beeper://select-thread/bridge-whatsapp/!REDACTED:beeper.local?accountID=whatsapp
    beeper://select-thread/bridge-telegram/!REDACTED:beeper.local?accountID=telegram
    beeper://select-thread/bridge-signal/!REDACTED:beeper.local?accountID=signal
    beeper://select-thread/bridge-hungryserv/!REDACTED:beeper.com?accountID=hungryserv (this is for 'Beeper' network)
    etc
    ```

    ---

    Some other interesting hidden `Command+J` hidden by prefix 'Developer' menu items I noticed (though less relevant to this immediate exploration):

    ```
    (u.includes("db e") || u.includes("data e")) && {
    title: "Open Data Explorer",
    category: "Developer",
    keywords: ["db explorer", "devtools"],
    action: () => x.windowsStore.openDataExplorerInNewWindow(e)
    }, u.includes("custom e") && {
    title: "Send custom event",
    category: "Developer",
    keywords: ["custom event", "devtools"],
    action: () => x.windowsStore.openCustomEventInNewWindow(e)
    }])
    ```

    ---

    Anyways, getting back to the deep links, and the other bits of code we found related to them; to discover what other deep links are supported; instead of trying to manually follow the code and decipher each of them, we can just grab the relevant sections and feed it into ChatGPT (GPT-5) to decipher for us.

    After a few iterations and cleanup to make sure it was all consistent, here's what I ended up with:

    > This document summarizes the supported `beeper://` deep links in the Beeper desktop client. The main handler function (`dA`) dispatches on the first path segment of the URI, and from this we can map out the supported actions.
    >
    > ## Global structure
    >
    > - Deep links are matched against a scheme prefix `Hg` (which is effectively `beeper://`).
    > - They are parsed into:
    > - `parts` (split path segments)
    > - `query` parameters (`text`, `attachmentPath`, `accountID`, `windowID`, …)
    >
    > ## Window, Input & Messaging
    >
    > These links focus on controlling the app window or pre-filling the input field:
    >
    > - `beeper://focus?windowID=<id>` — Focus a Beeper window.
    > - Notes: defaults to `main` when `windowID` is absent; grabs app focus first.
    > - `beeper://fill-textarea?text=<string>` — Fill the active chat’s input and focus it.
    > - Notes: text is inserted using the thread’s formatting rules (JSON typed text).
    >
    > These links require resolving a platform (`bridge-<platform>`), with the app checking `platformStore` and `accountsStore` to find the right account and thread:
    >
    > - `beeper://compose/<platform>/<...>?text=<t>&attachmentPath=<path>&accountID=<acct>` — Open compose for a platform.
    > - Notes: platform resolves via `bridge-<platform>`; if `accountID` is provided, it targets that specific account; optional text prefill/file attach.
    > - `beeper://select-thread/<platform>/<threadID>/<sortKey>?accountID=<acct>&text=<t>&attachmentPath=<path>` — Select a thread (and optionally prefill/attach).
    > - Notes: finds thread via the specified account (if `accountID`) or among platform accounts; selects and can set typed text/attach file.
    > - `beeper://highlight-message/<platform>/<threadID>/<messageID>?accountID=<acct>` — Open a thread and highlight a message.
    > - Notes: same account/thread resolution rules as above.
    >
    > This form hands control over to the specific account, letting its bridge define custom deep-link behavior:
    >
    > - `beeper://platform-callback/<accountID>/<...>` — Delegate to a specific account’s deep-link handler.
    > - Notes: calls `getAccount(<accountID>).api.handleDeepLink(<fullURI>)`.
    >
    > There is also a Matrix-specific deep link:
    >
    > - `beeper://join-matrix-room/<roomID>` — Join a Matrix room.
    > - Notes: `<roomID>` is `decodeURIComponent`’ed; errors toast if missing/invalid.
    >
    > ## Settings, Billing & Subscriptions
    >
    > - `beeper://connect` — Open *Beeper Connect* prefs and enable if needed.
    > - Notes: opens the Connect settings view; may toggle enablement based on flags.
    >
    > (under `beeper://subscriptions/...` — delegated to the subscription store (`subscriptionStore.handleDeepLink`))
    >
    > - `beeper://subscriptions/.../openCustomerPortal` — Open Stripe customer portal.
    > - `beeper://subscriptions/.../openPaymentMethodUpdate` — Open payment-method update flow.
    > - `beeper://subscriptions/.../openSubscriptionInfo` — Show subscription info modal.
    > - `beeper://subscriptions/.../dismissSubscriptionInfo` — Dismiss the subscription modal.
    >
    > ## Authentication & Session
    >
    > - `beeper://auth?token=<JWT>` — Log in with a JWT.
    > - Notes: token is taken from `?token=...` (decoded).
    > - `beeper://login/<platform>/<...>` — Initiate platform login.
    > - Notes: calls `vAt("bridge-<platform>", "<...>")` (the remaining path is forwarded).
    > - `beeper://otp/<code>` — Set one-time password.
    > - `beeper://refresh-user` — Refresh user data (profile, session state).
    >
    > ## Error handling
    >
    > If a platform/account/thread isn’t found, the client shows a toast (UI notification) like:
    >
    > - *Invalid deep link*
    > - *Could not find account*
    > - *Could not find \[Platform] thread*
    > - *Unrecognized deep link: …*
    ## Bonus Section

    ### Beeper DevTools Hacks
  3. 0xdevalias revised this gist Jul 9, 2025. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -52,6 +52,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - ...some comments and things that I haven't linked here specifically...
    - [Beeper Desktop v4 Beta CSS Hack, making the pinned/favourites section height limited, scrollable, and with smaller avatar bubbles](https://github.com/beeper/themes/issues/6#issuecomment-2692091954)
    - [Beeper Desktop V4 CSS Hack to make pinned/favourite threads respect the 'unread' filter](https://github.com/beeper/themes/issues/6#issuecomment-2829377649)
    - [Beeper Desktop v4.0.821(+?) CSS Hack, making the pinned/favourites section height limited, scrollable, and with smaller avatar bubbles](https://github.com/beeper/themes/issues/6#issuecomment-3050989931)
    - etc

    ## See Also
  4. 0xdevalias revised this gist Jul 9, 2025. 1 changed file with 27 additions and 5 deletions.
    32 changes: 27 additions & 5 deletions devalias-beeper-css-hacks-v4.css
    View file
    Original file line number Diff line number Diff line change
    @@ -57,16 +57,38 @@ To open dev tools, open the command bar and type "open console"
    /* There also seems to be a tiny bit of spacing that makes it scroll on the X axis.. so just hide that.. */
    overflow-x: hidden;

    .pinned-threads .sidebar-thread {
    /* Override to the equivalent of the cols-5 class */
    width: 20%;
    /* Overrides to fit 1 extra column in since the avatars are smaller */
    .pinned-threads:not(.compact) {
    &.cols-2 {
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    }

    &.cols-3 {
    grid-template-columns: repeat(4, minmax(60px, 1fr));
    }

    &.isPinned > section[data-sentry-component="PinnedThreadListItem"] {
    &.cols-4 {
    grid-template-columns: repeat(5, minmax(60px, 1fr));
    }

    &.cols-5 {
    grid-template-columns: repeat(6, minmax(60px, 1fr));
    }

    &.cols-6 {
    grid-template-columns: repeat(7, minmax(60px, 1fr));
    }
    }

    .pinned-threads .sidebar-thread {
    &.isPinned > .PinnedThreadListItem-module__wrapper {
    /* Set the avatar size */
    --avatar-size: 30px;

    padding: 5px;

    /* Override a hardcoded size in GroupAvatar to use the --avatar-size properly */
    .participant-avatar > div[data-sentry-component="GroupAvatar"] {
    .participant-avatar > .GroupAvatar-module__wrapper {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
    }
  5. 0xdevalias revised this gist Apr 25, 2025. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,9 @@

    ## devalias' Beeper CSS Hacks

    For Beeper Desktop v3, see [`devalias-beeper-css-hacks.css`](#file-devalias-beeper-css-hacks-css) for the customisations I was using myself.
    For the modern Beeper Desktop v4, see [`devalias-beeper-css-hacks-v4.css`](#file-devalias-beeper-css-hacks-v4-css) for the customisations I am using myself.

    For the legacy Beeper Desktop v3, see [`devalias-beeper-css-hacks.css`](#file-devalias-beeper-css-hacks-css) for the customisations I was using myself.

    You'll also find a number of hacks/techniques on my theme issue:

  6. 0xdevalias revised this gist Apr 25, 2025. 2 changed files with 2 additions and 0 deletions.
    0 _v4-devalias-beeper-css-hacks.css → devalias-beeper-css-hacks-v4.css
    View file
    File renamed without changes.
    2 changes: 2 additions & 0 deletions devalias-beeper-css-hacks.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    /* Note: These styles are for the legacy Beeper Desktop v3; check the other file on this gist for the modern Beeper Desktop v4 styles I am using. */

    /* Will this work with https://developer.mozilla.org/en-US/docs/Web/CSS/@import ? I don't think so.. but maybe I was using it wrong..? */

    /***************************************************************/
  7. 0xdevalias revised this gist Apr 25, 2025. 2 changed files with 79 additions and 1 deletion.
    75 changes: 75 additions & 0 deletions _v4-devalias-beeper-css-hacks.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    /*
    # Custom Beeper.app style
    This file will be injected as a <style> tag
    After making your changes, type "Reload custom CSS" in the command bar
    To open dev tools, open the command bar and type "open console"
    */

    :root {
    /*
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    */
    }

    @media (prefers-color-scheme: dark) {
    :root {}
    }

    /*
    Random CSS Hacks Notes
    'Pinned / Favourites' Avatars
    $$('#root .left .threads-list-container .threads .virtual-list .participant-wrapper .participant-avatar .participant-img')
    Command Bar
    Command + J
    $$('.command-bar-modal .command-bar')
    Command + K / Command + F
    $$('.command-bar-modal .command-bar.command-bar-general-search')
    .command-bar.command-bar-general-search {
    width: 80%; // Override the width?
    }
    .command-bar, .forward-message-preview {
    width: 60vw; // Override the width?
    max-width: 700px; // Override the max-width?
    }
    */

    /**********************************************/
    /* Inbox - Favourites - Support Unread Filter */
    /**********************************************/

    .left .threads-list-container .threads:has(.AccountFilters button[data-text="Unread"][class*="AccountFilters-module__selected"]) .pinned-threads .sidebar-thread:not(.isUnread) {
    display: none;
    }

    /**********************/
    /* Inbox - Favourites */
    /**********************/

    .left .threads-list-container .threads .virtual-list > div > div:first-child {
    /* Ensure the favourites section is limited in height and scrollable */
    overflow-y: auto;
    max-height: 30vh;

    /* There also seems to be a tiny bit of spacing that makes it scroll on the X axis.. so just hide that.. */
    overflow-x: hidden;

    .pinned-threads .sidebar-thread {
    /* Override to the equivalent of the cols-5 class */
    width: 20%;

    &.isPinned > section[data-sentry-component="PinnedThreadListItem"] {
    /* Set the avatar size */
    --avatar-size: 30px;

    /* Override a hardcoded size in GroupAvatar to use the --avatar-size properly */
    .participant-avatar > div[data-sentry-component="GroupAvatar"] {
    width: var(--avatar-size) !important;
    height: var(--avatar-size) !important;
    }
    }
    }
    }
    5 changes: 4 additions & 1 deletion beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@

    ## devalias' Beeper CSS Hacks

    See [`devalias-beeper-css-hacks.css`](#file-devalias-beeper-css-hacks-css) for the customisations I am using myself.
    For Beeper Desktop v3, see [`devalias-beeper-css-hacks.css`](#file-devalias-beeper-css-hacks-css) for the customisations I was using myself.

    You'll also find a number of hacks/techniques on my theme issue:

    @@ -47,6 +47,9 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Hide the timestamp on messages](https://github.com/beeper/themes/issues/6#issuecomment-1641107348) <sup>`Community Request`</sup>
    - [Hide certain chats, chats by network, or entire networks from the unified inbox (while still showing in their specific network view)](https://github.com/beeper/themes/issues/6#issuecomment-1641275289) <sup>`Community Request`</sup>
    - [Ensure 'Report a Problem' dialog doesn't take over the entire screen](https://github.com/beeper/themes/issues/6#issuecomment-1643052185)
    - ...some comments and things that I haven't linked here specifically...
    - [Beeper Desktop v4 Beta CSS Hack, making the pinned/favourites section height limited, scrollable, and with smaller avatar bubbles](https://github.com/beeper/themes/issues/6#issuecomment-2692091954)
    - [Beeper Desktop V4 CSS Hack to make pinned/favourite threads respect the 'unread' filter](https://github.com/beeper/themes/issues/6#issuecomment-2829377649)
    - etc

    ## See Also
  8. 0xdevalias revised this gist Mar 29, 2025. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -88,14 +88,14 @@ You'll also find a number of hacks/techniques on my theme issue:

    ### Beeper DevTools Hacks

    Open devtools with `Command + Shift + I`, then run the following:
    Open devtools with `Command + Shift + I` (on windows) / `Command + Option + I` (on macOS), then run the following (if `Command + Shift + I` doesn't work, then you may need to disable/rebind the Beeper -> Settings -> Keyboard Shortcuts -> 'Toggle Chat Info' shortcut first):

    - Set your beeper update channel from `STABLE` to `INTERNAL` to enable various hidden features/settings:
    - `rs.beeperClientStore.loggedInUser.channel = "INTERNAL"`

    ### Beeper Desktop v4 Hacks

    - While there doesn't seem to be a menu item for the Electron / Chrome DevTools, we can access it with `Command + Shift + I`.
    - While there doesn't seem to be a menu item for the Electron / Chrome DevTools, we can access it with `Command + Shift + I` (on windows) / `Command + Option + I` (on macOS). If `Command + Shift + I` doesn't work, then you may need to disable/rebind the Beeper -> Settings -> Keyboard Shortcuts -> 'Toggle Chat Info' shortcut first.
    - Non-standard globals:
    - ```js
    [
  9. 0xdevalias revised this gist Mar 28, 2025. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -9,6 +9,7 @@
    - [Bonus Section](#bonus-section)
    - [Beeper DevTools Hacks](#beeper-devtools-hacks)
    - [Beeper Desktop v4 Hacks](#beeper-desktop-v4-hacks)
    - [Beeper Update Check URL](#beeper-update-check-url)
    - [Accessing the Matrix client from within Beeper / Electron's DevTools](#accessing-the-matrix-client-from-within-beeper--electrons-devtools)
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools](#accessing-the-react-internals-for-the-beeper-rooms-component-using-beeper--electrons-devtools)
    @@ -276,6 +277,12 @@ Open devtools with `Command + Shift + I`, then run the following:
    > - **Code Splitting & Optimization:** When Vite builds your project, it processes imports to optimize module resolution. `__vite__mapDeps` is part of the mechanism that rewrites dynamic imports to ensure correct execution at runtime.
    > - **Preload Handling:** It might be used to preload certain dependencies to improve loading performance.
    ### Beeper Update Check URL
    - eg.
    - https://api.beeper.com/desktop/update-feed.json?bundleID=com.automattic.beeper.desktop&version=4.0.551&platform=linux&arch=x64&channel=stable
    - https://api.beeper.com/desktop/update-feed.json?bundleID=com.automattic.beeper.desktop&platform=<PLATFORM>&arch=<ARCH>&channel=nightly
    ### Accessing the Matrix client from within Beeper / Electron's DevTools

    ```js
  10. 0xdevalias revised this gist Mar 4, 2025. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -69,13 +69,15 @@ You'll also find a number of hacks/techniques on my theme issue:

    ### My Other Related Deepdive Gist's and Projects

    - https://gist.github.com/0xdevalias
    - https://github.com/0xdevalias/chatgpt-source-watch : Analyzing the evolution of ChatGPT's codebase through time with curated archives and scripts.
    - [Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias' gist)](https://gist.github.com/0xdevalias/4ac297ee3f794c17d0997b4673a2f160#reverse-engineering-chatgpts-frontend-web-app--deep-dive-explorations-of-the-code)
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias' gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Reverse Engineering Webpack Apps (0xdevalias' gist)](https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#reverse-engineering-webpack-apps)
    - [Reverse Engineered Webpack Tailwind-Styled-Component (0xdevalias' gist)](https://gist.github.com/0xdevalias/916e4ababd3cb5e3470b07a024cf3125#reverse-engineered-webpack-tailwind-styled-component)
    - [React Server Components, Next.js v13+, and Webpack: Notes on Streaming Wire Format (`__next_f`, etc) (0xdevalias' gist))](https://gist.github.com/0xdevalias/ac465fb2f7e6fded183c2a4273d21e61#react-server-components-nextjs-v13-and-webpack-notes-on-streaming-wire-format-__next_f-etc)
    - [Fingerprinting Minified JavaScript Libraries / AST Fingerprinting / Source Code Similarity / Etc (0xdevalias' gist)](https://gist.github.com/0xdevalias/31c6574891db3e36f15069b859065267#fingerprinting-minified-javascript-libraries--ast-fingerprinting--source-code-similarity--etc)
    - [JavaScript Web App Reverse Engineering - Module Identification (0xdevalias' gist)](https://gist.github.com/0xdevalias/28c18edfc17606f09cf413f97e404a60#javascript-web-app-reverse-engineering---module-identification)
    - [Reverse Engineered Webpack Tailwind-Styled-Component (0xdevalias' gist)](https://gist.github.com/0xdevalias/916e4ababd3cb5e3470b07a024cf3125#reverse-engineered-webpack-tailwind-styled-component)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias' gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Debugging Electron Apps (and related memory issues) (0xdevalias gist)](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba#debugging-electron-apps-and-related-memory-issues)
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)
  11. 0xdevalias revised this gist Mar 1, 2025. 1 changed file with 199 additions and 6 deletions.
    205 changes: 199 additions & 6 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,18 +2,20 @@

    ## Table of Contents

    <!-- TOC start (generated with https://derlin.github.io/bitdowntoc/) -->
    <!-- TOC start (generated with https://bitdowntoc.derlin.ch/) -->
    - [devalias' Beeper CSS Hacks](#devalias-beeper-css-hacks)
    - [See Also](#see-also)
    - [My Other Related Deepdive Gist's and Projects](#my-other-related-deepdive-gists-and-projects)
    - [My Other Related Deepdive Gist's and Projects](#my-other-related-deepdive-gists-and-projects)
    - [Bonus Section](#bonus-section)
    - [Accessing the Matrix client from within Beeper / Electron's DevTools](#accessing-the-matrix-client-from-within-beeper--electrons-devtools)
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Beeper DevTools Hacks](#beeper-devtools-hacks)
    - [Beeper Desktop v4 Hacks](#beeper-desktop-v4-hacks)
    - [Accessing the Matrix client from within Beeper / Electron's DevTools](#accessing-the-matrix-client-from-within-beeper--electrons-devtools)
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools](#accessing-the-react-internals-for-the-beeper-rooms-component-using-beeper--electrons-devtools)
    - [Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)](#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone)
    - [Implement plugin manager implementation (like BetterDiscord / GooseMod / etc have)](#implement-plugin-manager-implementation-like-betterdiscord--goosemod--etc-have)
    - [Implement plugin manager implementation (like BetterDiscord / GooseMod / etc have)](#implement-plugin-manager-implementation-like-betterdiscord--goosemod--etc-have)
    - [Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)](#various-beeper-inbox-selectors-favourite-pinned-not-pinned-unread-etc)
    - [Counting chats that match the above](#counting-chats-that-match-the-above)
    - [Counting chats that match the above](#counting-chats-that-match-the-above)
    <!-- TOC end -->

    ## devalias' Beeper CSS Hacks
    @@ -81,6 +83,197 @@ You'll also find a number of hacks/techniques on my theme issue:

    ## Bonus Section

    ### Beeper DevTools Hacks

    Open devtools with `Command + Shift + I`, then run the following:

    - Set your beeper update channel from `STABLE` to `INTERNAL` to enable various hidden features/settings:
    - `rs.beeperClientStore.loggedInUser.channel = "INTERNAL"`

    ### Beeper Desktop v4 Hacks

    - While there doesn't seem to be a menu item for the Electron / Chrome DevTools, we can access it with `Command + Shift + I`.
    - Non-standard globals:
    - ```js
    [
    "desktopAPI",
    "PAGE_BOOT_TIME",
    "handleFatalError",
    "_sentryDebugIds",
    "_sentryDebugIdIdentifier",
    "SENTRY_RELEASE",
    "INITIAL_STATE",
    "MACHINE_ID",
    "LOG_LEVEL",
    "__SENTRY__",
    "Sentry",
    "logger",
    "setImmediate",
    "texts",
    "__mobxInstanceCount",
    "__mobxGlobals",
    "rt",
    "totalTimes",
    "Mousetrap",
    "handleDeepLink",
    "google",
    "__googleMapsCallback__",
    "gm_authFailure",
    "rs",
    "litHtmlVersions",
    "litElementVersions",
    "reactiveElementVersions",
    "module$contents$mapsapi$overlay$overlayView_OverlayView",
    "RudderStackGlobals",
    "rudderanalytics",
    "sentryUser",
    "__federation_shared__",
    "__isReactDndBackendSetUp"
    ]
    ```
    - `INITIAL_STATE.userConfPath`: `/Users/REDACTED/Library/Application Support/BeeperTexts/config.json`
    - This file doesn't seem to exist by default.
    - The electron app source no longer seems to be packed within a `*.asar` file, making it easier to explore/customize:
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-dev.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-staging.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build/app-manifest-fallback-production.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-dev.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-staging.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/app-manifest-fallback-production.json`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build/main/constants-DaB6VrEL.mjs`
    - ```js
    const r = process.platform === 'win32',
    _ = process.platform === 'linux',
    t = process.platform === 'darwin',
    E = 'config.json',
    // ..snip..
    f = '.texts-conf.json';
    // ..snip..
    function i() {
    const e = process.env.BEEPER_PROFILE || void 0,
    o = 'BeeperTexts' + (e ? `-${e}` : '');
    return t
    ? s.join(n.homedir(), 'Library', 'Application Support', o)
    : r
    ? process.env.APPDATA
    ? s.join(process.env.APPDATA, o)
    : s.join(n.homedir(), o)
    : s.join(
    process.env.XDG_CONFIG_HOME ?? s.join(n.homedir(), '.config'),
    o
    );
    }
    function A() {
    const e = i();
    return r && !process.env.APPDATA ? s.join(i(), '..', f) : s.join(e, E);
    }
    const U = globalThis.INITIAL_STATE?.userConfPath ?? A(),
    ```
    - `/Users/REDACTED/Library/Application Support/BeeperTexts/custom.css`
    - CSS Customization is still possible
    - `/Users/REDACTED/Library/Application Support/BeeperTexts/account.db`
    - The `store` table looks interesting
    - Keys generally seem to map to JSON object values
    - `ad:com.beeper.desktop.prefs`
    - Has entries in the JSON object including:
    - `"ai_language": "en"`
    - `"ai_engine": "gpt-3.5-turbo"`
    - `"ui_experiments:decrease_sidebar_density": true`
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build/renderer/PrefsPanes-DLpM0stC.js`
    - ```js
    D.show_hidden_features &&
    e.jsxs(e.Fragment, {
    children: [
    e.jsx('h4', { children: 'UI Experiments' }),
    e.jsxs('div', {
    className: 'prefs-group',
    children: [
    e.jsx(g, {
    id: `ui_experiments:${re.DECREASE_SIDEBAR_DENSITY}`,
    displayName: 'Decrease sidebar density',
    }),
    e.jsx(g, {
    id: `ui_experiments:${re.DISTINCT_BUBBLE_COLORS_IN_GROUPS}`,
    displayName:
    'Distinct bubble color for each participant in groups',
    }),
    e.jsx(g, {
    id: `ui_experiments:${re.VIBRANT_RIGHT_PANE}`,
    displayName: 'Vibrant right pane',
    }),
    ],
    }),
    ],
    }),
    ```
    - ```js
    return e.jsxs('div', {
    className: 'subview-prefs subview-prefs-general styled-inputs',
    children: [
    e.jsxs('div', {
    className: 'prefs-group',
    children: [
    e.jsx(g, {
    id: p.GPT3_SLASH_COMMAND,
    displayName: 'Show reply suggestions with /a slash command',
    featureFlag: r.features[j.AI_COMPOSER_AUTOCOMPLETE],
    footer: e.jsxs('span', {
    className: 'description-text',
    children: [
    'Privacy: this will send your last ',
    e.jsx('code', { children: 'n' }),
    ' messages in a conversation to OpenAI via our servers.',
    ],
    }),
    }),
    e.jsx(g, {
    id: p.TRANSCRIBE_WITH_OPENAI,
    displayName:
    "Use OpenAI's Whisper model for Talk to Type and transcribing voice messages",
    featureFlag: r.features[j.TALK_TO_TYPE],
    footer: e.jsx('span', {
    className: 'description-text',
    children:
    'Privacy: this will send audio clips to OpenAI via our servers.',
    }),
    }),
    e.jsx(w, {
    id: p.AI_ENGINE,
    displayName: 'Engine for text-based AI features',
    featureFlag: r.features[j.AI_LLM],
    options: An,
    }),
    e.jsx(w, {
    id: p.AI_LANGUAGE,
    displayName: 'Language for AI responses and translations',
    featureFlag: r.features[j.AI_LLM],
    options: ws,
    footer: e.jsx('span', {
    className: 'description-text',
    children:
    "ChatGPT's response quality may vary for less commonly spoken languages.",
    }),
    }),
    ],
    }),
    ```
    - `/Applications/Beeper Desktop.app/Contents/Resources/app/build-browser/index-DJ-7DtqJ.js`
    - ```js
    return D.remoteStore.llmEnabled && D.prefsStore.prefs[Re.GPT3_SLASH_COMMAND]
    ? { ...f, ...i }
    : f;
    ```
    - There seem to be a bunch of references to `__vite__mapDeps` in the `*.js` files
    - From ChatGPT 4o:
    - > `__vite__mapDeps` is an internal construct used by Vite for module resolution and dependency mapping in bundled web applications. It appears in Vite-processed JavaScript when using **dynamic imports** (e.g., `import()`), and it helps Vite efficiently manage dependencies in optimized builds.
    >
    > ### Purpose of `__vite__mapDeps`
    >
    > - **Dependency Mapping:** It is used to keep track of dependencies that are dynamically imported.
    > - **Code Splitting & Optimization:** When Vite builds your project, it processes imports to optimize module resolution. `__vite__mapDeps` is part of the mechanism that rewrites dynamic imports to ensure correct execution at runtime.
    > - **Preload Handling:** It might be used to preload certain dependencies to improve loading performance.
    ### Accessing the Matrix client from within Beeper / Electron's DevTools

    ```js
  12. 0xdevalias revised this gist Jan 31, 2025. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -112,6 +112,12 @@ Then go to your Beeper Settings -> Labs -> and look at all the new features you

    ## Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools

    See also:

    - https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#react-internals
    - > Reverse Engineering Webpack Apps
    - > React Internals
    ```js
    const el = $('#matrixchat > .mx_MatrixChat_wrapper > .mx_MatrixChat > .bp_LeftPanel > .bp_LeftPanel_contentWrapper > .bp_LeftPanel_content > .rooms')

  13. 0xdevalias revised this gist May 3, 2024. 1 changed file with 7 additions and 5 deletions.
    12 changes: 7 additions & 5 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -68,12 +68,14 @@ You'll also find a number of hacks/techniques on my theme issue:
    ### My Other Related Deepdive Gist's and Projects

    - https://github.com/0xdevalias/chatgpt-source-watch : Analyzing the evolution of ChatGPT's codebase through time with curated archives and scripts.
    - [Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias' gist)](https://gist.github.com/0xdevalias/4ac297ee3f794c17d0997b4673a2f160#reverse-engineering-chatgpts-frontend-web-app--deep-dive-explorations-of-the-code)
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias' gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Reverse Engineering Webpack Apps (0xdevalias' gist)](https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#reverse-engineering-webpack-apps)
    - [Reverse Engineered Webpack Tailwind-Styled-Component (0xdevalias' gist)](https://gist.github.com/0xdevalias/916e4ababd3cb5e3470b07a024cf3125#reverse-engineered-webpack-tailwind-styled-component)
    - [React Server Components, Next.js v13+, and Webpack: Notes on Streaming Wire Format (`__next_f`, etc) (0xdevalias' gist))](https://gist.github.com/0xdevalias/ac465fb2f7e6fded183c2a4273d21e61#react-server-components-nextjs-v13-and-webpack-notes-on-streaming-wire-format-__next_f-etc)
    - [Fingerprinting Minified JavaScript Libraries / AST Fingerprinting / Source Code Similarity / Etc (0xdevalias' gist)](https://gist.github.com/0xdevalias/31c6574891db3e36f15069b859065267#fingerprinting-minified-javascript-libraries--ast-fingerprinting--source-code-similarity--etc)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias' gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Debugging Electron Apps (and related memory issues) (0xdevalias gist)](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba#debugging-electron-apps-and-related-memory-issues)
    - [Reverse Engineering Webpack Apps (0xdevalias gist)](https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#reverse-engineering-webpack-apps)
    - [Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias gist)](https://gist.github.com/0xdevalias/4ac297ee3f794c17d0997b4673a2f160#reverse-engineering-chatgpts-frontend-web-app--deep-dive-explorations-of-the-code)
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Fingerprinting Minified JavaScript Libraries / AST Fingerprinting / Source Code Similarity / Etc (0xdevalias gist)](https://gist.github.com/0xdevalias/31c6574891db3e36f15069b859065267#fingerprinting-minified-javascript-libraries--ast-fingerprinting--source-code-similarity--etc)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)
    - [Reverse Engineering on macOS (0xdevalias' gist)](https://gist.github.com/0xdevalias/256a8018473839695e8684e37da92c25#reverse-engineering-on-macos)

  14. 0xdevalias revised this gist Apr 30, 2024. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -72,6 +72,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Reverse Engineering Webpack Apps (0xdevalias gist)](https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#reverse-engineering-webpack-apps)
    - [Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias gist)](https://gist.github.com/0xdevalias/4ac297ee3f794c17d0997b4673a2f160#reverse-engineering-chatgpts-frontend-web-app--deep-dive-explorations-of-the-code)
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Fingerprinting Minified JavaScript Libraries / AST Fingerprinting / Source Code Similarity / Etc (0xdevalias gist)](https://gist.github.com/0xdevalias/31c6574891db3e36f15069b859065267#fingerprinting-minified-javascript-libraries--ast-fingerprinting--source-code-similarity--etc)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)
    - [Reverse Engineering on macOS (0xdevalias' gist)](https://gist.github.com/0xdevalias/256a8018473839695e8684e37da92c25#reverse-engineering-on-macos)
  15. 0xdevalias revised this gist Jan 13, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools](#accessing-the-react-internals-for-the-beeper-rooms-component-using-beeper--electrons-devtools)
    - [Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)](#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone)
    - [Implement plugin manager implementation like BetterDiscord has](#implement-plugin-manager-implementation-like-betterdiscord-has)
    - [Implement plugin manager implementation (like BetterDiscord / GooseMod / etc have)](#implement-plugin-manager-implementation-like-betterdiscord--goosemod--etc-have)
    - [Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)](#various-beeper-inbox-selectors-favourite-pinned-not-pinned-unread-etc)
    - [Counting chats that match the above](#counting-chats-that-match-the-above)
    <!-- TOC end -->
    @@ -311,7 +311,7 @@ These notes originally come from my [Debugging Electron Apps (and related memory
    >
    > ![image](https://user-images.githubusercontent.com/753891/253461820-04ccd788-bc26-4f8c-96be-1c54eb868c0b.png)
    ### Implement plugin manager implementation like BetterDiscord has
    ### Implement plugin manager implementation (like BetterDiscord / GooseMod / etc have)
    _ponders_ 🤔
  16. 0xdevalias revised this gist Jan 13, 2024. 1 changed file with 41 additions and 2 deletions.
    43 changes: 41 additions & 2 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -322,8 +322,46 @@ Anyone feel like figuring out/hacking out the plugin implementation from BetterD
    - https://betterdiscord.app/plugins
    - https://github.com/BetterDiscord/BetterDiscord
    - https://github.com/search?q=repo%3ABetterDiscord%2FBetterDiscord%20plugin&type=code
    - https://github.com/BetterDiscord/BetterDiscord/blob/1dc24222ca9fd318f1ffcc7aa65ef3940527ffaf/renderer/src/modules/pluginmanager.js#L28
    - https://github.com/BetterDiscord/BetterDiscord/tree/1dc24222ca9fd318f1ffcc7aa65ef3940527ffaf/injector/src
    - https://github.com/BetterDiscord/BetterDiscord/blob/main/renderer/src/modules/pluginmanager.js#L28
    - https://github.com/BetterDiscord/BetterDiscord/tree/main/injector/src
    - https://github.com/BetterDiscord/BetterDiscord/tree/main/injector/src/modules
    - https://github.com/BetterDiscord/BetterDiscord/blob/main/injector/src/modules/csp.js
    - Strips content-security-policy headers from requests (in a rather 'blunt' way)
    - https://github.com/BetterDiscord/BetterDiscord/blob/main/injector/src/modules/reactdevtools.js
    - Finds/loads a local copy of ReactDevTools
    - https://github.com/BetterDiscord/BetterDiscord/blob/main/injector/src/modules/ipc.js
    Another user from the 'Unofficial Beeper Hackers' community suggested the following as a better example for injection/etc concepts:
    > `@emma:conduit.rory.gay`: GooseMod may be more interesting to look at (though dead), came with an in-app plugin/theme store
    >
    > do note that most of the UI leans on pre-existing react modules (that no longer exist)
    - https://github.com/GooseMod/GooseMod
    - https://github.com/GooseMod/GooseMod/blob/master/src/moduleManager.js
    - https://github.com/GooseMod/GooseMod/blob/master/src/index.js#L170
    - https://github.com/GooseMod/GooseMod/blob/master/src/util/discord/webpackModules.js
    - This module in particular looks interesting; it seems to be a bunch of helpers for injecting into webpack modules at runtime
    > `@emma:conduit.rory.gay`: betterdiscord's injectors is litterally just `const BetterDiscord = require("./modules/betterdiscord").default;`
    >
    > oh, also intercepting all web requests to unset content-security-policy header
    > devalias: The other method I was pondering at one point was basically hijacking just enough to load a chrome browser extension, then implement the rest of it via those API's; but didn't explore too deeply into how limited they are within electron
    - https://www.electronjs.org/docs/latest/api/extensions
    - > Electron supports a subset of the Chrome Extensions API, primarily to support DevTools extensions and Chromium-internal extensions, but it also happens to support some other extension capabilities.
    - https://www.electronjs.org/docs/latest/api/extensions#supported-extensions-apis
    - A bunch, including the below
    - https://www.electronjs.org/docs/latest/api/extensions#chromemanagement
    - https://developer.chrome.com/docs/extensions/reference/api/management
    - > The `chrome.management` API provides ways to manage the list of extensions/apps that are installed and running.
    - https://www.electronjs.org/docs/latest/api/extensions#chromescripting
    - > All features of this API are supported.
    - https://developer.chrome.com/docs/extensions/reference/api/scripting
    - > Use the `chrome.scripting` API to execute script in different contexts.
    - > Electron only supports loading unpacked extensions (i.e., .crx files do not work). Extensions are installed per-session. To load an extension, call `ses.loadExtension`
    - https://www.electronjs.org/docs/latest/api/session#sesloadextensionpath-options
    Some of my notes in gists might be useful too:
    @@ -333,6 +371,7 @@ Most likely these:
    - https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba#debugging-electron-apps-and-related-memory-issues
    - https://gist.github.com/0xdevalias/3d2f5a861335cc1277b21a29d1285cfe#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone
    - > Me: you could inject/hijack/patch webpack/etc modules directly at runtime: https://gist.github.com/0xdevalias/8c621c5d09d780b1d321bfdb86d67cdd#reverse-engineering-webpack-apps
    ## Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)
  17. 0xdevalias revised this gist Jan 13, 2024. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,7 @@
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools](#accessing-the-react-internals-for-the-beeper-rooms-component-using-beeper--electrons-devtools)
    - [Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)](#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone)
    - [Implement plugin manager implementation like BetterDiscord has](#implement-plugin-manager-implementation-like-betterdiscord-has)
    - [Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)](#various-beeper-inbox-selectors-favourite-pinned-not-pinned-unread-etc)
    - [Counting chats that match the above](#counting-chats-that-match-the-above)
    <!-- TOC end -->
    @@ -310,6 +311,29 @@ These notes originally come from my [Debugging Electron Apps (and related memory
    >
    > ![image](https://user-images.githubusercontent.com/753891/253461820-04ccd788-bc26-4f8c-96be-1c54eb868c0b.png)
    ### Implement plugin manager implementation like BetterDiscord has
    _ponders_ 🤔
    Anyone feel like figuring out/hacking out the plugin implementation from BetterDiscord and making it work as a Beeper customisation?
    - https://betterdiscord.app/
    - > BetterDiscord comes with a builtin plugin loader and plugin API. Plugins can increase the functionality and user experience of the app through JavaScript. Write your own or download plugins made by the community.
    - https://betterdiscord.app/plugins
    - https://github.com/BetterDiscord/BetterDiscord
    - https://github.com/search?q=repo%3ABetterDiscord%2FBetterDiscord%20plugin&type=code
    - https://github.com/BetterDiscord/BetterDiscord/blob/1dc24222ca9fd318f1ffcc7aa65ef3940527ffaf/renderer/src/modules/pluginmanager.js#L28
    - https://github.com/BetterDiscord/BetterDiscord/tree/1dc24222ca9fd318f1ffcc7aa65ef3940527ffaf/injector/src
    Some of my notes in gists might be useful too:
    - https://gist.github.com/search?q=user:0xdevalias+electron
    Most likely these:
    - https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba#debugging-electron-apps-and-related-memory-issues
    - https://gist.github.com/0xdevalias/3d2f5a861335cc1277b21a29d1285cfe#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone
    ## Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)
    ```js
  18. 0xdevalias revised this gist Dec 10, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -73,6 +73,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)
    - [Reverse Engineering on macOS (0xdevalias' gist)](https://gist.github.com/0xdevalias/256a8018473839695e8684e37da92c25#reverse-engineering-on-macos)

    ## Bonus Section

  19. 0xdevalias revised this gist Nov 27, 2023. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,20 @@
    # Beeper Custom Theme Styles

    ## Table of Contents

    <!-- TOC start (generated with https://derlin.github.io/bitdowntoc/) -->
    - [devalias' Beeper CSS Hacks](#devalias-beeper-css-hacks)
    - [See Also](#see-also)
    - [My Other Related Deepdive Gist's and Projects](#my-other-related-deepdive-gists-and-projects)
    - [Bonus Section](#bonus-section)
    - [Accessing the Matrix client from within Beeper / Electron's DevTools](#accessing-the-matrix-client-from-within-beeper--electrons-devtools)
    - [Enabling 'internal' mode to see extra labs features/etc](#enabling-internal-mode-to-see-extra-labs-featuresetc)
    - [Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools](#accessing-the-react-internals-for-the-beeper-rooms-component-using-beeper--electrons-devtools)
    - [Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)](#some-notes-on-how-to-achieve-custom-beeper--electron-js-hackscustomisations-eg-more-customizability-than-css-hacks-alone)
    - [Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)](#various-beeper-inbox-selectors-favourite-pinned-not-pinned-unread-etc)
    - [Counting chats that match the above](#counting-chats-that-match-the-above)
    <!-- TOC end -->

    ## devalias' Beeper CSS Hacks

    See [`devalias-beeper-css-hacks.css`](#file-devalias-beeper-css-hacks-css) for the customisations I am using myself.
    @@ -57,6 +72,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Reverse engineering ChatGPT's frontend web app + deep dive explorations of the code (0xdevalias gist)](https://gist.github.com/0xdevalias/4ac297ee3f794c17d0997b4673a2f160#reverse-engineering-chatgpts-frontend-web-app--deep-dive-explorations-of-the-code)
    - [Deobfuscating / Unminifying Obfuscated Web App Code (0xdevalias gist)](https://gist.github.com/0xdevalias/d8b743efb82c0e9406fc69da0d6c6581#deobfuscating--unminifying-obfuscated-web-app-code)
    - [Bypassing Cloudflare, Akamai, etc (0xdevalias gist)](https://gist.github.com/0xdevalias/b34feb567bd50b37161293694066dd53#bypassing-cloudflare-akamai-etc)
    - [Reverse Engineering Golang (0xdevalias' gist)](https://gist.github.com/0xdevalias/4e430914124c3fd2c51cb7ac2801acba#reverse-engineering-golang)

    ## Bonus Section

  20. 0xdevalias revised this gist Aug 23, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -77,7 +77,7 @@ mxMatrixClientPeg.matrixClient.sendMessage(roomId, {
    })
    ```

    ## Enabling 'internal' mode to see extra labs features/etc
    ### Enabling 'internal' mode to see extra labs features/etc

    _(The following tip comes via [`@cameronaaron`](https://github.com/cameronaaron) from the Beeper Community)_

  21. 0xdevalias revised this gist Aug 23, 2023. 1 changed file with 12 additions and 0 deletions.
    12 changes: 12 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -77,6 +77,18 @@ mxMatrixClientPeg.matrixClient.sendMessage(roomId, {
    })
    ```

    ## Enabling 'internal' mode to see extra labs features/etc

    _(The following tip comes via [`@cameronaaron`](https://github.com/cameronaaron) from the Beeper Community)_

    Open DevTools console, and enter the following:

    ```js
    bpWhoamiMonitor.whoami.userInfo.channel = "INTERNAL"
    ```

    Then go to your Beeper Settings -> Labs -> and look at all the new features you can flip (note that you can also probably flip all of these directly via `/devtools` -> Settings Explorer as well)

    ## Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevTools

    ```js
  22. 0xdevalias revised this gist Jul 20, 2023. 2 changed files with 18 additions and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -27,6 +27,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Kinda hacky beeper "compact room list" css theme](https://github.com/beeper/themes/issues/6#issuecomment-1633467603) <sup>`Community Contribution`</sup>
    - [Hide the timestamp on messages](https://github.com/beeper/themes/issues/6#issuecomment-1641107348) <sup>`Community Request`</sup>
    - [Hide certain chats, chats by network, or entire networks from the unified inbox (while still showing in their specific network view)](https://github.com/beeper/themes/issues/6#issuecomment-1641275289) <sup>`Community Request`</sup>
    - [Ensure 'Report a Problem' dialog doesn't take over the entire screen](https://github.com/beeper/themes/issues/6#issuecomment-1643052185)
    - etc

    ## See Also
    17 changes: 17 additions & 0 deletions devalias-beeper-css-hacks.css
    View file
    Original file line number Diff line number Diff line change
    @@ -96,6 +96,23 @@
    background-color: dimgrey;
    }

    /******************************************************************/
    /* Ensure 'report bug' dialog doesn't take over the entire screen */
    /******************************************************************/
    #mx_Dialog_Container div[aria-describedby="report_bug"] {
    /* Don't take up the entire screen */
    width: fit-content;
    height: fit-content;
    padding: 20px;
    border-radius: 20px;

    /* Center the dialog */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    /**********************/
    /* Main Settings Menu */
    /**********************/
  23. 0xdevalias revised this gist Jul 20, 2023. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion devalias-beeper-css-hacks.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,18 @@
    /* Will this work with https://developer.mozilla.org/en-US/docs/Web/CSS/@import ? */
    /* Will this work with https://developer.mozilla.org/en-US/docs/Web/CSS/@import ? I don't think so.. but maybe I was using it wrong..? */

    /***************************************************************/
    /* De-emphasise distracting chats - *Beeper* Community/Hackers */
    /***************************************************************/
    .bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]):has(div[title*="Community"i], div[title*="Hackers"i]) {
    opacity: 0.5;
    }

    /*******************************************************/
    /* De-emphasise distracting chats - UC Outdoors Club */
    /*******************************************************/
    .bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_facebook, svg[data-src="img/beeper/color-facebook16.a8cac84.svg"]):has(div[title*="UC Outdoors Club"]) {
    opacity: 0.5;
    }

    /**********************************************/
    /* Hide Left Panel/Sidebar While Chat Is Open */
    @@ -127,6 +141,11 @@
    height: 500px !important;
    }

    .mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea textarea {
    font-family: Menlo, monospace;
    font-size: 13px !important;
    }

    /**********************/
    /* Inbox - Favourites */
    /**********************/
  24. 0xdevalias revised this gist Jul 19, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -26,6 +26,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Hiding the white border to the right of the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1633452879) <sup>`Community Contribution`</sup>
    - [Kinda hacky beeper "compact room list" css theme](https://github.com/beeper/themes/issues/6#issuecomment-1633467603) <sup>`Community Contribution`</sup>
    - [Hide the timestamp on messages](https://github.com/beeper/themes/issues/6#issuecomment-1641107348) <sup>`Community Request`</sup>
    - [Hide certain chats, chats by network, or entire networks from the unified inbox (while still showing in their specific network view)](https://github.com/beeper/themes/issues/6#issuecomment-1641275289) <sup>`Community Request`</sup>
    - etc

    ## See Also
  25. 0xdevalias revised this gist Jul 18, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Hide the help question mark above the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1631946537) <sup>`Community Request`</sup>
    - [Hiding the white border to the right of the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1633452879) <sup>`Community Contribution`</sup>
    - [Kinda hacky beeper "compact room list" css theme](https://github.com/beeper/themes/issues/6#issuecomment-1633467603) <sup>`Community Contribution`</sup>
    - [Hide the timestamp on messages](https://github.com/beeper/themes/issues/6#issuecomment-1641107348) <sup>`Community Request`</sup>
    - etc

    ## See Also
  26. 0xdevalias revised this gist Jul 14, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -41,6 +41,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - > A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc)
    - https://github.com/beeper/themes/pull/7
    - https://github.com/beeper/themes/pull/7/files
    - https://github.com/beeper/themes/tree/main/themes/utility
    - > Reusable css that could be added onto other themes for additional functionality
    - Announcement Tweet: https://twitter.com/_devalias/status/1651766148046921728
    - Reddit Thread: https://www.reddit.com/r/beeper/comments/13cezdc/beeper_ui_ux_hacksimprovements_via_custom_themes/
  27. 0xdevalias revised this gist Jul 14, 2023. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -104,7 +104,7 @@ console.log('Archived Chats', ReadList.props.rooms)

    **Warning:** This section is way more advanced than CSS hacks, and comes with much higher risks if you run arbitrary untrusted code, as using malicious JS code might steal your beeper auth tokens, any of your private messages, etc, etc. You've been warned.

    These notes originally come from my [Debugging Electron Apps (and related memory issues) (0xdevalias gist)](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#debugging-electron-apps-and-related-memory-issues) gist ([Ref](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#gistcomment-4628816)).
    These notes originally come from my [Debugging Electron Apps (and related memory issues) (0xdevalias gist)](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#debugging-electron-apps-and-related-memory-issues) gist ([Ref](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#gistcomment-4628816)):

    > On macOS you can get to the Beeper `*.asar` files by:
    >
  28. 0xdevalias revised this gist Jul 14, 2023. 1 changed file with 177 additions and 0 deletions.
    177 changes: 177 additions & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -100,6 +100,183 @@ console.log('Archived Chats', ReadList.props.rooms)
    // (1633) [Room, Room, ...]
    ```

    ## Some notes on how to achieve custom Beeper / Electron JS hacks/customisations (eg. more customizability than CSS hacks alone)

    **Warning:** This section is way more advanced than CSS hacks, and comes with much higher risks if you run arbitrary untrusted code, as using malicious JS code might steal your beeper auth tokens, any of your private messages, etc, etc. You've been warned.

    These notes originally come from my [Debugging Electron Apps (and related memory issues) (0xdevalias gist)](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#debugging-electron-apps-and-related-memory-issues) gist ([Ref](https://gist.github.com/0xdevalias/428e56a146e3c09ec129ee58584583ba?permalink_comment_id=4628816#gistcomment-4628816)).

    > On macOS you can get to the Beeper `*.asar` files by:
    >
    > ```shell
    > ⇒ cd /Applications/Beeper.app/Contents/Resources
    >
    > ⇒ ls
    > af.lproj/ cs.lproj/ fa.lproj/ icon.icns ml.lproj/ ru.lproj/ todesktop-runtime-config.json
    > am.lproj/ da.lproj/ fi.lproj/ icons/ mr.lproj/ sk.lproj/ tr.lproj/
    > app-update.yml de.lproj/ fil.lproj/ id.lproj/ ms.lproj/ sl.lproj/ uk.lproj/
    > app.asar el.lproj/ fr.lproj/ it.lproj/ nb.lproj/ sr.lproj/ ur.lproj/
    > app.asar.unpacked/ en.lproj/ gu.lproj/ ja.lproj/ nl.lproj/ sv.lproj/ vi.lproj/
    > ar.lproj/ en_GB.lproj/ he.lproj/ kn.lproj/ pl.lproj/ sw.lproj/ webapp.asar
    > bg.lproj/ es.lproj/ hi.lproj/ ko.lproj/ pt_BR.lproj/ ta.lproj/ zh_CN.lproj/
    > bn.lproj/ es_419.lproj/ hr.lproj/ lt.lproj/ pt_PT.lproj/ te.lproj/ zh_TW.lproj/
    > ca.lproj/ et.lproj/ hu.lproj/ lv.lproj/ ro.lproj/ th.lproj/
    > ```
    >
    > Where the most relevant files/folders there are:
    >
    > - `app.asar`
    > - `app.asar.unpacked/`
    > - `webapp.asar`
    >
    > From memory, I believe `app.asar` is more related to the core electron/element type features, and `webapp.asar` was more related to the more custom Beeper features; but I didn't look super deeply into that side of things.
    >
    > We can then use the node `asar` package via `npx` to inspect the contents of the `*.asar` files:
    >
    > ```shell
    > ⇒ npx asar list --is-pack app.asar | grep -v node_modules
    >
    > ⇒ npx asar list --is-pack webapp.asar | grep -v node_modules
    > ```
    >
    > We can then run Beeper passing the node remote debugging `--inspect-brk` command to set a breakpoint at the entrypoint of the code:
    >
    > ```shell
    > ⇒ open /Applications/Beeper.app --args --inspect-brk=1337
    > ```
    >
    > Which we can then connect to by opening a Chrome browser, navigating to `chrome://inspect/#devices`, and under 'Remote Target' looking for something like the following:
    >
    > ![image](https://user-images.githubusercontent.com/753891/253458502-8048308f-50f6-48ee-8025-51576e8a41a9.png)
    >
    > ```
    > electron/js2c/browser_init file:///
    > ```
    >
    > Then clicking on 'inspect', which will open the Chrome DevTools 'Sources' tab and show the entrypoint line where the debugger has stopped execution, in this case, in the `file:///Applications/Beeper.app/Contents/Resources/app.asar/lib/electron-main.js` file:
    >
    > ![image](https://user-images.githubusercontent.com/753891/253458803-6383bea3-23b1-4ae0-91fe-c3026f54fddf.png)
    >
    > We can then skim around the code in this file to understand what it does, and what other options are available.
    >
    > For example, here are some command line arguments documentation; of which `--devtools` sounds interesting:
    >
    > ```js
    > if (argv["help"]) {
    > console.log("Options:");
    > console.log(" --profile-dir {path}: Path to where to store the profile.");
    > console.log(" --profile {name}: Name of alternate profile to use, allows for running multiple accounts.");
    > console.log(" --devtools: Install and use react-devtools and react-perf.");
    > console.log(" --no-update: Disable automatic updating.");
    > console.log(" --default-frame: Use OS-default window decorations.");
    > console.log(" --hidden: Start the application hidden in the system tray.");
    > console.log(" --help: Displays this help message.");
    > console.log("And more such as --proxy, see:" +
    > "https://electronjs.org/docs/api/command-line-switches");
    > electron_1.app.exit();
    > }
    > ```
    >
    > We can also see some path loading aspects of where the app looks for `webapp.asar`:
    >
    > ```js
    > // Find the webapp resources and set up things that require them
    > async function setupGlobals() {
    > // find the webapp asar.
    > asarPath = await tryPaths("webapp", __dirname, [
    > // If run from the source checkout, this will be in the directory above
    > '../webapp.asar',
    > // but if run from a packaged application, electron-main.js will be in
    > // a different asar file so it will be two levels above
    > '../../webapp.asar',
    > // also try without the 'asar' suffix to allow symlinking in a directory
    > '../webapp',
    > // from a packaged application
    > '../../webapp',
    > // Workaround for developing beeper on windows, where symlinks are poorly supported.
    > "../../nova-web/webapp",
    > ]);
    > console.log("Web App Path is", asarPath);
    > iconsPath = await tryPaths("icons", __dirname, [
    > '../res/icons',
    > '../../icons'
    > ]);
    > console.log("iconsPath path is", iconsPath);
    > // eslint-disable-next-line @typescript-eslint/no-var-requires
    > vectorConfig = require(asarPath + 'config.json');
    > console.log("Loading vector config for brand", vectorConfig.brand);
    > try {
    > // Load local config and use it to override values from the one baked with the build
    > // eslint-disable-next-line @typescript-eslint/no-var-requires
    > const localConfig = require(path_1.default.join(electron_1.app.getPath('userData'), 'config.json'));
    > ```
    >
    > There are also some hidden/undocumented CLI arguments, `localdev` / `localapi`:
    >
    > ```js
    > const localdev = Array.isArray(argv._) && argv._.includes("localdev");
    > const localapi = Array.isArray(argv._) && argv._.includes("localapi");
    > ```
    >
    > We find the code that processes the `--devtools` arg here:
    >
    > ```js
    > if (argv['devtools']) {
    > try {
    > const { default: installExt, REACT_DEVELOPER_TOOLS, REACT_PERF, } = require("electron-devtools-installer");
    > await installExt([REACT_DEVELOPER_TOOLS, REACT_PERF], { loadExtensionOptions: { allowFileAccess: true } });
    > }
    > catch (e) {
    > console.log(e);
    > }
    > }
    > ```
    >
    > A little further down we see how `localdev` / `localapi` are handled:
    >
    > ```js
    > if (localdev) {
    > // Open dev tools at startup if in dev mode
    > mainWindow.webContents.openDevTools();
    > electron_1.app.on("certificate-error", (event, webContents, url, error, certificate, callback) => {
    > // On certificate error we disable default behaviour (stop loading the page)
    > // and we then say "it is all fine - true" to the callback
    > event.preventDefault();
    > callback(true);
    > });
    > }
    > if (localapi) {
    > vectorConfig.novaApiUrl = `https://localhost:4001`;
    > }
    > mainWindow.loadURL(localdev ? "http://localhost:8080" : 'nova://nova-web/webapp/');
    > ```
    >
    > Then beyond that, you're sort of getting deeper into the internals of Electron apps and how Beeper / Element is built on top of Electron; so really depends what you're wanting to achieve at that point.
    >
    > ---
    >
    > While at the initial 'entrypoint' debugger breakpoint (from `--inspect-brk`), we could also choose to manually load/inject some custom code of our own. For example:
    >
    > With a code file like:
    >
    > ```js
    > // /Users/devalias/Desktop/beeperInjectionHax.js
    > console.log("Hello World, is this custom JS in Beeper?");
    > ```
    >
    > We could run the following in the Chrome Devtools console while at the initial app loading debug breakpoint:
    >
    > ```js
    > require('/Users/devalias/Desktop/beeperInjectionHax.js')
    > ```
    >
    > Which would show an output message such as:
    > ```
    > beeperInjectionHax.js:1 Hello World, is this custom JS in Beeper?
    > ```
    >
    > ![image](https://user-images.githubusercontent.com/753891/253461820-04ccd788-bc26-4f8c-96be-1c54eb868c0b.png)
    ## Various Beeper Inbox Selectors (Favourite, Pinned, Not Pinned, Unread, Etc)
    ```js
  29. 0xdevalias revised this gist Jul 13, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -24,6 +24,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Hide the Pin/Unpin and/or 'Archive' buttons that appear on hover of each chat room in inbox](https://github.com/beeper/themes/issues/6#issuecomment-1617368101) <sup>`Community Request`</sup>
    - [Hide the help question mark above the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1631946537) <sup>`Community Request`</sup>
    - [Hiding the white border to the right of the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1633452879) <sup>`Community Contribution`</sup>
    - [Kinda hacky beeper "compact room list" css theme](https://github.com/beeper/themes/issues/6#issuecomment-1633467603) <sup>`Community Contribution`</sup>
    - etc

    ## See Also
  30. 0xdevalias revised this gist Jul 13, 2023. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions beeper-custom-theme-styles.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,6 +23,7 @@ You'll also find a number of hacks/techniques on my theme issue:
    - [Beeper Spacebar Icon Modifications](https://github.com/beeper/themes/issues/6#issuecomment-1586076070) <sup>`Community Contribution`</sup>
    - [Hide the Pin/Unpin and/or 'Archive' buttons that appear on hover of each chat room in inbox](https://github.com/beeper/themes/issues/6#issuecomment-1617368101) <sup>`Community Request`</sup>
    - [Hide the help question mark above the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1631946537) <sup>`Community Request`</sup>
    - [Hiding the white border to the right of the left hand sidebar](https://github.com/beeper/themes/issues/6#issuecomment-1633452879) <sup>`Community Contribution`</sup>
    - etc

    ## See Also