Add context menu to open sidebar when button is missing due to Rumble…

… changes

README.md

@@ -27,11 +27,11 @@ Extensions require the following permissions:
 -   `storage`: save options and stream data to local browser storage
 -   `unlimitedStorage`: removes storage limit (see current usage in options page)
 -   `tabs`: used to sync options and other data between pages running extension and to open the Cached Rants page
+-   `contextMenus`: adds option to context menu to open Rant Stats sidebar (or popup). Useful when Rumble changes layout and breaks button in page.
 
 ## Sidebar
 
-Open the sidebar (or popup) by clicking the "View Rants" button in the chat area of a stream that is currently live or
-the "Open Cached Rants" link on a stream archive page.
+Open the sidebar (or popup) by clicking the "View Rants" button in the chat area of a stream that is currently live or the "Open Cached Rants" link on a stream archive page. Additionally, there is a context menu "Open Rant Stats" that attempts to open the sidebar (or popup) for the current video.
 
 ![Chat Button](images/chat-small.png) ![Cached Button](images/cached-button.png)
 

src/background.ts

@@ -141,3 +141,47 @@ chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) =
 chrome.action.onClicked.addListener(() => {
     handleOpenOptionsPage()
 })
+
+/**
+ * Handle sending open rants sidebar message to tab
+ * @param url tab url to send message to
+ */
+const handleMenuOpenRants = (url: string): void => {
+    openTabs.forEach((tab) => {
+        if (tab.url === url) {
+            chrome.tabs.sendMessage(
+                tab.id,
+                {
+                    action: Messages.CONTEXT_MENU_OPEN_RANTS,
+                },
+                {},
+                () => {
+                    if (chrome.runtime.lastError) {
+                        // if unable to send message, assume closed, stop tracking
+                        openTabs.delete(tab.id)
+                    }
+                },
+            )
+        }
+    })
+}
+
+/**
+ * Handle all menu item clicks
+ * @param info the clicked menu item
+ */
+async function genericOnClick(info: chrome.contextMenus.OnClickData): Promise<void> {
+    if (info.menuItemId === "menu-open-rants") {
+        handleMenuOpenRants(info.pageUrl)
+    }
+}
+
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.contextMenus.create({
+        title: "Open Rant Stats",
+        id: "menu-open-rants",
+    })
+})
+
+// A generic onclick callback function.
+chrome.contextMenus.onClicked.addListener(genericOnClick)

src/components/open-chat/open-chat.scss

@@ -18,6 +18,7 @@
         svg {
             height: 25px;
             width: 25px;
+            margin-left: 10px;
             margin-right: 10px;
             vertical-align: middle;
             fill: var(--light-fg);

src/content.ts

@@ -3,6 +3,7 @@ import { addCacheButton, addChatButton, openRantsButtonHandler } from "./compone
 import { setLastSortOrder } from "./components/rants/rant"
 import { getVideoID } from "./components/rumble/rumble"
 import { registerTab } from "./components/events/events"
+import { openSidebar } from "./context-menu-handler"
 import { handleUpdateOptions } from "./message-options"
 import { replacePageContent } from "./rantstatspage"
 import {
@@ -23,6 +24,9 @@ chrome.runtime.onMessage.addListener((message: Message, _sender, sendResponse) =
         case Messages.RUMBLE_THEME_CHANGED_TAB:
             updateThemeStyle(message.data.theme as Theme)
             break
+        case Messages.CONTEXT_MENU_OPEN_RANTS:
+            openSidebar()
+            break
         default:
             break
     }

src/context-menu-handler.ts

@@ -0,0 +1,21 @@
+import { openRantsButtonHandler } from "./components/open-chat/open-chat"
+import { getVideoID } from "./components/rumble/rumble"
+
+/**
+ * Open sidebar
+ */
+export const openSidebar = (): void => {
+    const videoId = getVideoID()
+    if (videoId === "") {
+        return
+    }
+
+    const chatHistory = document.getElementsByClassName("chat-history")
+    if (chatHistory.length === 0) {
+        // eslint-disable-next-line no-alert
+        window.alert("Video is not a live stream or no chat history. No Rants to show.")
+        return // not a live feed
+    }
+
+    openRantsButtonHandler(videoId).then()
+}

src/manifest.json

@@ -9,7 +9,7 @@
         "48": "images/icon-48.png",
         "128": "images/icon-128.png"
     },
-    "permissions": ["storage", "unlimitedStorage", "tabs"],
+    "permissions": ["storage", "unlimitedStorage", "tabs", "contextMenus"],
     "background": {
         "service_worker": "pages/background/background.js"
     },

src/types/messages.ts

@@ -13,6 +13,7 @@ export enum Messages {
     OPTIONS_SAVED_TAB,
     RUMBLE_THEME_CHANGED,
     RUMBLE_THEME_CHANGED_TAB,
+    CONTEXT_MENU_OPEN_RANTS,
 }
 
 /**