fix(webext): ensure to close extension tabs on context menu actions e…

…xecution

This ensures that the opened extension tab(s) state won't override the one in the local storage

src/helpers/webext.ts

@@ -1,5 +1,10 @@
 // import { browser } from "webextension-polyfill-ts";
-import { SendNotificationParams, BadgeColors, OpenTabOptions } from 'types';
+import {
+  SendNotificationParams,
+  BadgeColors,
+  OpenTabOptions,
+  TabResolver,
+} from 'types';
 
 declare var browser: any;
 
@@ -24,6 +29,8 @@ export function isChrome(): boolean {
   return navigator.userAgent.indexOf('Chrome') !== -1;
 }
 
+export const indexUrl = isWebExtension ? getUrl('index.html') : '';
+
 export function createTab(url: string, isActive: boolean = true): Promise<any> {
   return browser.tabs.create({
     url,
@@ -66,12 +73,25 @@ export async function tryOpenTab(url: string, options: OpenTabOptions = {}) {
   return createTab(url);
 }
 
+export async function closeTabs(resolver: TabResolver) {
+  const closedTabs = [];
+  const tabs = await browser.tabs.query({});
+  if (tabs.length > 0) {
+    for (const tab of tabs) {
+      if (resolver(tab)) {
+        browser.tabs.remove(tab.id);
+        closedTabs.push(tab);
+      }
+    }
+  }
+
+  return closedTabs;
+}
+
 export function getUrl(path: string): string {
   return browser.runtime.getURL(path);
 }
 
-export const indexUrl = isWebExtension ? getUrl('index.html') : '';
-
 export function executeScript(tabId: number, code: string): void {
   browser.tabs.executeScript(tabId, {
     code,

src/types/webext.ts

@@ -48,7 +48,9 @@ export interface Tab {
   url: string;
 }
 
+export type TabResolver = (tab: Tab) => boolean;
+
 export interface OpenTabOptions {
   reloadIfExists?: boolean;
-  resolver?: (tab: Tab) => boolean;
+  resolver?: TabResolver;
 }

src/ui/components/webext/Background/ContextMenus.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { isWebExtension } from 'helpers/webext';
+import { isWebExtension, closeTabs, indexUrl } from 'helpers/webext';
 import {
   addViewedVideo,
   addWatchLaterVideo,
@@ -46,11 +46,12 @@ export default function ContextMenus(props: ContextMenusProps) {
 
   const handleConnect = (p: any) => {
     ports.current[p.sender.tab.id] = p;
-    p.onMessage.addListener((message: any) => {
+    p.onMessage.addListener(async (message: any) => {
       const { menuItemId, checked } = message.request;
       const { videoId: id, channelId, datePublished } = message.response;
       switch (menuItemId) {
         case 'add_video_to_watch_later_list':
+          await closeTabs((tab) => tab.url.startsWith(indexUrl));
           dispatch(
             addWatchLaterVideo({
               id,
@@ -62,6 +63,7 @@ export default function ContextMenus(props: ContextMenusProps) {
           browser.contextMenus.update(menuItemId, { enabled: false });
           break;
         case 'mark_video_as_viewed': {
+          await closeTabs((tab) => tab.url.startsWith(indexUrl));
           if (checked) {
             dispatch(
               addViewedVideo({