diff --git a/CHANGELOG.md b/CHANGELOG.md
index ab0d76d..a604007 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
## 1.4.6
- Fix context menu showing up on all pages instead of only Rumble video pages
+- Add About page
## 1.4.5
diff --git a/README.md b/README.md
index 06fbb92..3aede0c 100644
--- a/README.md
+++ b/README.md
@@ -191,5 +191,5 @@ If you want to support me:
- [PayPal](https://www.paypal.me/stevencrader)
- [$craders](https://www.cash.app/$craders)
- [Venmo](https://venmo.com/code?user_id=467277291978752568&created=1654152122)
-- [Twitter (Rant Stats)](https://twitter.com/stevencrader)
-- [Twitter (Me)](https://twitter.com/rantstats_com)
+- [X (Rant Stats)](https://x.com/stevencrader)
+- [X (Me)](https://x.com/rantstats_com)
diff --git a/package.json b/package.json
index a86573d..4405982 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"scripts": {
"build": "run-p -cln 'build:*'",
"build:webpack": "webpack --mode=development",
- "build:sass": "sass src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css",
+ "build:sass": "sass src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/pages/about/about.scss:output/pages/about/about.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css",
"watch": "run-p -cln 'watch:*'",
"watch:webpack:": "yarn build:webpack --watch",
"watch:sass": "yarn build:sass --watch",
@@ -21,7 +21,7 @@
"build-release": "run-p -cln 'build-release:*'",
"build-release:lint": "yarn lint",
"build-release:js": "yarn build --mode=production",
- "build-release:sass": "sass --style=compressed src/styles.scss output/styles.css"
+ "build-release:sass": "sass --style=compressed src/styles.scss:output/styles.css src/pages/rants/rants.scss:output/pages/rants/rants.css src/pages/pages.scss:output/pages/pages.css src/pages/options/options.scss:output/pages/options/options.css src/pages/about/about.scss:output/pages/about/about.css src/components/rants/rants.scss:output/components/rants/rants.css src/components/rants/rant.scss:output/components/rants/rant.css src/components/open-chat/open-chat.scss:output/components/open-chat/open-chat.css"
},
"repository": {
"type": "git",
diff --git a/src/background.ts b/src/background.ts
index 2bf002b..4b5a99e 100644
--- a/src/background.ts
+++ b/src/background.ts
@@ -27,6 +27,20 @@ const handleOpenRantsPage = (): void => {
)
}
+/**
+ * Handle receiving message {@link Messages.OPEN_ABOUT}
+ *
+ * Opens about page
+ */
+const handleOpenAboutPage = (): void => {
+ chrome.tabs.create(
+ {
+ url: "pages/about/about.html",
+ },
+ () => {},
+ )
+}
+
/**
* Handle receiving message {@link Messages.PAGE_LOADED}
*
@@ -122,6 +136,9 @@ chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) =
case Messages.OPEN_RANTS:
handleOpenRantsPage()
break
+ case Messages.OPEN_ABOUT:
+ handleOpenAboutPage()
+ break
case Messages.PAGE_LOADED:
handlePageLoaded(message.data.tab as string)
break
diff --git a/src/components/events/events.ts b/src/components/events/events.ts
index 3251482..2356369 100644
--- a/src/components/events/events.ts
+++ b/src/components/events/events.ts
@@ -18,6 +18,13 @@ export const triggerOpenRantsPage = (): void => {
sendAction(Messages.OPEN_RANTS)
}
+/**
+ * Send Message to open about page
+ */
+export const triggerOpenAboutPage = (): void => {
+ sendAction(Messages.OPEN_ABOUT)
+}
+
/**
* Send Message with updated Options
* @param options updated option values
diff --git a/src/manifest.json b/src/manifest.json
index 8b51932..16441cb 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -35,6 +35,7 @@
"components/open-chat/open-chat.css",
"components/rants/rants.css",
"components/rants/rant.css",
+ "pages/about/about.css",
"pages/options/options.css",
"pages/rants/rants.css"
],
diff --git a/src/pages/about/about.html b/src/pages/about/about.html
new file mode 100644
index 0000000..212e44f
--- /dev/null
+++ b/src/pages/about/about.html
@@ -0,0 +1,33 @@
+
+
+
+ About | RantStats Extension for Rumble.com
+
+
+
+
+
+
+
+
+
+ If you want to support me:
+
+
+
+
+
+
+
diff --git a/src/pages/about/about.scss b/src/pages/about/about.scss
new file mode 100644
index 0000000..cb69b9e
--- /dev/null
+++ b/src/pages/about/about.scss
@@ -0,0 +1,11 @@
+@import "../pages";
+
+#about {
+ p,
+ a {
+ font-size: 1.5em;
+ }
+}
+
+html.theme-dark {
+}
diff --git a/src/pages/about/about.ts b/src/pages/about/about.ts
new file mode 100644
index 0000000..28f5865
--- /dev/null
+++ b/src/pages/about/about.ts
@@ -0,0 +1,23 @@
+import { registerTab } from "../../components/events/events"
+import { registerSystemColorSchemeWatcher, updateTheme, updateThemeStyle } from "../../theme"
+import { Message, Messages } from "../../types/messages"
+import { Theme } from "../../types/option-types"
+
+chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) => {
+ if (message.action === Messages.RUMBLE_THEME_CHANGED_TAB) {
+ updateThemeStyle(message.data.theme as Theme)
+ }
+ sendResponse({ done: true })
+})
+
+/**
+ * Initialize the page
+ */
+const populateView = async (): Promise => {
+ registerSystemColorSchemeWatcher()
+ await updateTheme()
+}
+
+populateView().then()
+
+registerTab()
diff --git a/src/pages/options/options.html b/src/pages/options/options.html
index b00416c..20c4cf8 100644
--- a/src/pages/options/options.html
+++ b/src/pages/options/options.html
@@ -109,8 +109,7 @@ RantStats Extension Options
diff --git a/src/pages/options/options.scss b/src/pages/options/options.scss
index 87ef2f3..b89d955 100644
--- a/src/pages/options/options.scss
+++ b/src/pages/options/options.scss
@@ -113,6 +113,7 @@
footer {
font-size: 10px;
+ padding-bottom: 10px;
.clear-section {
font-size: 12px;
diff --git a/src/pages/options/options.ts b/src/pages/options/options.ts
index 01d7938..4671090 100644
--- a/src/pages/options/options.ts
+++ b/src/pages/options/options.ts
@@ -1,5 +1,5 @@
import { cleanHistory, getOptions, getUsage, updateOptions } from "../../cache"
-import { optionsSaved, registerTab, triggerOpenRantsPage } from "../../components/events/events"
+import { optionsSaved, registerTab, triggerOpenAboutPage, triggerOpenRantsPage } from "../../components/events/events"
import { handleUpdateOptions } from "../../message-options"
import { registerSystemColorSchemeWatcher, updateTheme, updateThemeStyle } from "../../theme"
import { CONSTS } from "../../types/consts"
@@ -203,6 +203,7 @@ bytesUseSpan.addEventListener("change", optionChanged)
alternateColorsCheckbox.addEventListener("change", optionChanged)
document.getElementById("clear").addEventListener("click", clearOptions)
document.getElementById("open-rants").addEventListener("click", triggerOpenRantsPage)
+document.getElementById("open-about").addEventListener("click", triggerOpenAboutPage)
document.querySelectorAll(".has-sub-options").forEach((optionDiv: HTMLDivElement) => {
optionDiv.querySelectorAll(".option-row .selector input").forEach((checkbox) => {
diff --git a/src/pages/rants/rants.html b/src/pages/rants/rants.html
index 6d47f56..98b9244 100644
--- a/src/pages/rants/rants.html
+++ b/src/pages/rants/rants.html
@@ -35,8 +35,7 @@ Cached Rants
diff --git a/src/pages/rants/rants.ts b/src/pages/rants/rants.ts
index 39438b7..c49663c 100644
--- a/src/pages/rants/rants.ts
+++ b/src/pages/rants/rants.ts
@@ -1,5 +1,5 @@
import { cleanHistory, getAllStreams, getOptions, getStream, removeStream } from "../../cache"
-import { registerTab } from "../../components/events/events"
+import { registerTab, triggerOpenAboutPage } from "../../components/events/events"
import { displayCachedRants } from "../../components/rants/cached-rants"
import { parseLevels } from "../../components/rants/levels"
import { clearDisplayedMessages, setLastSortOrder, updateTotalText } from "../../components/rants/rant"
@@ -262,3 +262,5 @@ document.addEventListener("click", async (event) => {
})
registerTab()
+
+document.getElementById("open-about").addEventListener("click", triggerOpenAboutPage)
diff --git a/src/types/messages.ts b/src/types/messages.ts
index 3aa5c2b..d6f6be0 100644
--- a/src/types/messages.ts
+++ b/src/types/messages.ts
@@ -8,6 +8,7 @@ export enum Messages {
OPEN_OPTIONS,
OPTIONS_SAVED,
OPEN_RANTS,
+ OPEN_ABOUT,
PAGE_LOADED,
PAGE_UNLOADED,
OPTIONS_SAVED_TAB,
diff --git a/webpack.config.js b/webpack.config.js
index 137fc6e..b8d799f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,6 +12,7 @@ module.exports = (env, argv) => {
background: "./src/background.ts",
options: "./src/pages/options/options.ts",
rants: "./src/pages/rants/rants.ts",
+ about: "./src/pages/about/about.ts",
},
output: {
path: path.resolve(__dirname, "./output"),
@@ -53,6 +54,10 @@ module.exports = (env, argv) => {
from: "src/pages/rants/rants.html",
to: "pages/rants",
},
+ {
+ from: "src/pages/about/about.html",
+ to: "pages/about",
+ },
],
}),
],