Skip to content

Commit

Permalink
Refactoring: Project Structure & Tooling
Browse files Browse the repository at this point in the history
- Switched from npm to pnpm.
- Modularized the build for each component.
- Improved the bundling, all required artifacts for the extension are
  now being collected in the `dist` directory after `build-prod`.
- Fanned out the modules in `frontend` to make it easier to identify
  what is a Node shim, an Electron shim etc. This is still ongoing.
- Applied the BetterDiscord ESLint rules to BdBrowser and fixed most
  of the issues ESLint reported.
- Added GitHub Actions workflow to automatically generate build artifacts.
- Removed the `dist` folder from the repository, please download a release
  from the GitHub releases page instead or build BdBrowser yourself.
- Added `dist` directory to .gitignore to reinforce the previous point.
- Changed the location of local BetterDiscord renderer overrides.
  Instead of putting the betterdiscord.asar or renderer.js into the `dist`
  directory, please put them into `dist/bd/` instead.
  Note: BD's renderer.js is now expected as `renderer.js` instead of
  the previous name `betterdiscord.js`.
- Corrected some minor spelling errors.
- Early shim for BetterDiscord's upcoming nativeFetch.
  • Loading branch information
tsukasa committed Oct 2, 2023
1 parent 8a8b9b5 commit ba478e0
Show file tree
Hide file tree
Showing 67 changed files with 3,186 additions and 7,288 deletions.
91 changes: 91 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
{
"extends": "eslint:recommended",
"env": {
"webextensions": true,
"browser": true,
"node": true,
"es2020": true
},
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"accessor-pairs": "error",
"block-spacing": ["error", "never"],
"brace-style": ["error", "stroustrup", {"allowSingleLine": true}],
"curly": ["error", "multi-line", "consistent"],
"dot-location": ["error", "property"],
"dot-notation": "error",
"func-call-spacing": "error",
"handle-callback-err": "error",
"key-spacing": "error",
"keyword-spacing": "error",
"new-cap": ["error", {"newIsCap": true}],
"no-array-constructor": "error",
"no-caller": "error",
"no-console": "error",
"no-duplicate-imports": "error",
"no-else-return": "error",
"no-eval": "error",
"no-floating-decimal": "error",
"no-implied-eval": "error",
"no-iterator": "error",
"no-label-var": "error",
"no-labels": "error",
"no-lone-blocks": "error",
"no-mixed-spaces-and-tabs": "error",
"no-multi-spaces": "error",
"no-multi-str": "error",
"no-new": "error",
"no-new-func": "error",
"no-new-object": "error",
"no-new-wrappers": "error",
"no-octal-escape": "error",
"no-path-concat": "error",
"no-proto": "error",
"no-prototype-builtins": "off",
"no-redeclare": ["error", {"builtinGlobals": true}],
"no-self-compare": "error",
"no-sequences": "error",
"no-shadow": ["warn", {"builtinGlobals": false, "hoist": "functions"}],
"no-tabs": "error",
"no-template-curly-in-string": "error",
"no-throw-literal": "error",
"no-undef": "error",
"no-undef-init": "error",
"no-unmodified-loop-condition": "error",
"no-unneeded-ternary": "error",
"no-useless-call": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"no-whitespace-before-property": "error",
"object-curly-spacing": ["error", "never", {"objectsInObjects": false}],
"object-property-newline": ["error", {"allowAllPropertiesOnSameLine": true}],
"operator-linebreak": ["error", "none", {"overrides": {"?": "before", ":": "before"}}],
"prefer-const": "error",
"quote-props": ["error", "consistent-as-needed", {"keywords": true}],
"quotes": ["error", "double", {"allowTemplateLiterals": true}],
"rest-spread-spacing": "error",
"semi": "error",
"semi-spacing": "error",
"space-before-blocks": "error",
"space-in-parens": "error",
"space-infix-ops": "error",
"space-unary-ops": ["error", {"words": true, "nonwords": false, "overrides": {"typeof": false}}],
"spaced-comment": ["error", "always", {"exceptions": ["-", "*"]}],
"template-curly-spacing": "error",
"wrap-iife": ["error", "inside"],
"yield-star-spacing": "error",
"yoda": "error"
},
"globals": {
"DiscordNative": "readonly",
"__non_webpack_require__": "readonly"
}
}
44 changes: 44 additions & 0 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: BdBrowser CI Build

on:
push:
branches: [ "master" ]
tags: [ "**" ]

pull_request:
branches: [ "master" ]

jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout source-code
uses: actions/checkout@v3

- name: Use pnpm
uses: pnpm/action-setup@v2
with:
version: 8.x

- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 19.x
cache: pnpm

- name: Install dependencies
run: pnpm install --frozen-lockfile

- name: Build BdBrowser
run: pnpm run build-prod

- name: Upload artifacts
uses: actions/upload-artifact@v3
with:
name: bdbrowser-extension
path: dist/
retention-days: 30
if-no-files-found: error
4 changes: 2 additions & 2 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
/betterdiscord
/dist
/node_modules
/.idea
/.idea
39 changes: 25 additions & 14 deletions readme.md → README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ BdBrowser is a Chrome extension that loads [BetterDiscord](https://github.com/Be
- [Features](#-features)
- [Installation](#-installation)
- [Installing Prebuilt Version](#installing-prebuilt-version)
- [Building It Youself](#building-it-yourself)
- [Building It Yourself](#building-it-yourself)
- [Using BdBrowser](#-using-bdbrowser)
- [First Launch](#first-launch)
- [Installing Plugins and Themes](#installing-plugins-and-themes)
Expand Down Expand Up @@ -51,18 +51,20 @@ The latter is useful if you want to audit the code or make changes to it.

### Installing Prebuilt Version

Installation is done by downloading this repository as a zip archive, extracting the contents of the archive and loading the resulting folder as an unpacked Chrome extension while developer mode is enabled:
Since the extension is intentionally not available on the Chrome Web Store, you have to download and install it
manually by downloading a prebuilt release from the GitHub releases page, extracting the archive and loading the
resulting folder as an unpacked Chrome extension while developer mode is enabled:

1. Download the [current code as a zip archive](../../archive/refs/heads/master.zip).
2. Extract the zip archive, you should end up with a folder named `BdBrowser-master`.
1. Download the [latest prebuilt extension release as a zip archive](../../releases/latest/).
2. Extract the contents of the zip archive into an empty folder.
3. Open your Chrome extensions page.
4. Make sure the "Developer mode" toggle on the extension page is enabled.
This enables you to load unpacked extensions from a local folder.
5. Click the <kbd>Load unpacked</kbd> button in the toolbar:

![Load unpacked extension](assets/gh-readme/chrome-load-unpacked.png)

Now select the `BdBrowser-master` folder from step 2.
Now select the folder from step 2 you extracted the archive contents into.
6. Congratulations, you should see the extension loaded and working!
Once you reload your [Discord](https://discord.com/channels/@me) tab, BetterDiscord should load and show the changelog.

Expand All @@ -73,7 +75,8 @@ Installation is done by downloading this repository as a zip archive, extracting
Building BdBrowser yourself comes with a few prerequisites:

- [Git](https://git-scm.com)
- [Node.js](https://nodejs.org) with npm (included with Node.js, required for BdBrowser)
- [Node.js](https://nodejs.org)
- [pnpm](https://pnpm.io)
- A terminal or command prompt

&nbsp;
Expand All @@ -87,15 +90,23 @@ git clone https://github.com/tsukasa/BdBrowser.git BdBrowser
**Step 2: Install BdBrowser's dependencies**
```sh
cd BdBrowser
npm install
pnpm install
```

**Step 3: Build BdBrowser**
```sh
npm run prod
pnpm run build-prod
```

**Step 4: [Load the extension](#installing-prebuilt-version)**
**Step 4: Load the Extension**
1. Open your Chrome extensions page.
2. Make sure the "Developer mode" toggle on the extension page is enabled.
This enables you to load unpacked extensions from a local folder.
3. Click the <kbd>Load unpacked</kbd> button in the toolbar:

![Load unpacked extension](assets/gh-readme/chrome-load-unpacked.png)

Now select the `dist` folder in the BdBrowser repository.

&nbsp;

Expand Down Expand Up @@ -123,7 +134,7 @@ Instead of opening the folder containing your plugins/themes, a file picker will
Choose one or multiple files of the same type (plugins or themes).

The files will get installed into the virtual filesystem and will be available through their
respective category immediatly afterwards.
respective category immediately afterwards.

&nbsp;

Expand Down Expand Up @@ -265,7 +276,7 @@ manually trigger this via the console:
require("fs").formatVfs(true);
```

Entering this command will immediatly wipe the virtual filesystem.
Entering this command will immediately wipe the virtual filesystem.

Please reload the page after using the command.

Expand All @@ -289,7 +300,7 @@ Reload the Discord tab afterwards.
&nbsp;

### Restricting Extension Site Access
By default BdBrowser is allowed to read and change all your data on all sites through
By default, BdBrowser is allowed to read and change all your data on all sites through
the extension's "Site access" setting (accessible through Chrome's extension page and
clicking the Details button for an extension).

Expand All @@ -307,7 +318,7 @@ you can harden the configuration by changing the Site Access setting from
BdBrowser comes with the `VfsTool.ps1` Powershell script that allows you to create and
extract virtual filesystem files.

The script is located under `assets/scripts/VfsTool.ps1` in the repository.
The script is located under `assets/scripts/VfsTool.ps1` in the extension directory.

&nbsp;

Expand Down Expand Up @@ -338,7 +349,7 @@ Using the VfsTool you can easily create a backup that contains your current Bett
(themes, plugins and BetterDiscord settings) for use in BdBrowser.

```powershell
.\VfsTool.ps1 -Operation Create -Path "$($env:APPDATA)/betterdiscord" -OutputPath C:\temp\bdbrowser_backup_MyRealBdConfig.json
.\VfsTool.ps1 -Operation Create -Path "$($env:APPDATA)\betterdiscord" -OutputPath C:\temp\bdbrowser_backup_MyRealBdConfig.json
```

&nbsp;
Expand Down
File renamed without changes.
File renamed without changes.
14 changes: 7 additions & 7 deletions manifest.json → assets/chrome/manifest.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "__MSG_extName__",
"version": "1.9.3.20230829",
"version": "1.9.3.20231002",
"description": "__MSG_extDesc__",
"homepage_url": "https://github.com/tsukasa/BdBrowser",
"icons": {
Expand All @@ -22,7 +22,7 @@
"open_in_tab": false
},
"background": {
"service_worker": "dist/service.js"
"service_worker": "js/service.js"
},
"content_scripts": [{
"matches": [
Expand All @@ -32,16 +32,16 @@
],
"run_at": "document_start",
"js": [
"dist/backend.js"
"js/backend.js"
]
}],
"web_accessible_resources": [{
"resources": [
"assets/spinner.webm",
"dist/betterdiscord.asar",
"dist/betterdiscord.js",
"dist/frontend.js",
"dist/preload.js"
"bd/betterdiscord.asar",
"bd/renderer.js",
"js/frontend.js",
"js/preload.js"
],
"matches": [
"*://*.discord.com/*"
Expand Down
12 changes: 12 additions & 0 deletions backend/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "@bdbrowser/backend",
"description": "BDBrowser Backend",
"version": "0.0.0",
"main": "src/index.js",
"private": true,
"scripts": {
"build": "webpack --progress --color",
"build-prod": "webpack --stats minimal --mode production",
"lint": "eslint --ext .js src/"
}
}
Loading

0 comments on commit ba478e0

Please sign in to comment.