use browser extension to open tab in background (#1074)

commafeed-client/src/components/content/FeedEntries.tsx

@@ -13,9 +13,9 @@ import {
 } from "app/slices/entries"
 import { redirectToRootCategory } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
-import { openLinkInBackgroundTab } from "app/utils"
 import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useMousetrap } from "hooks/useMousetrap"
 import { useViewMode } from "hooks/useViewMode"
 import { useEffect } from "react"
@@ -33,6 +33,7 @@ export function FeedEntries() {
     const scrollMarks = useAppSelector(state => state.user.settings?.scrollMarks)
     const scrollingToEntry = useAppSelector(state => state.entries.scrollingToEntry)
     const dispatch = useAppDispatch()
+    const { isBrowserExtensionInstalled, openLinkInBackgroundTab } = useBrowserExtension()
 
     const selectedEntry = entries.find(e => e.id === selectedEntryId)
 
@@ -211,7 +212,7 @@ export function FeedEntries() {
         window.open(selectedEntry.url, "_blank", "noreferrer")
     })
     useMousetrap("b", () => {
-        // simulate ctrl+click to open tab in background
+        if (!isBrowserExtensionInstalled) return
         if (!selectedEntry) return
         openLinkInBackgroundTab(selectedEntry.url)
     })

commafeed-client/src/components/content/FeedEntryContextMenu.tsx

@@ -5,7 +5,8 @@ import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
 import { redirectToFeed } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
-import { openLinkInBackgroundTab, truncate } from "app/utils"
+import { truncate } from "app/utils"
+import { useBrowserExtension } from "hooks/useBrowserExtension"
 import { useEffect } from "react"
 import { Item, Menu, Separator, useContextMenu } from "react-contexify"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
@@ -34,6 +35,7 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
     const { classes, theme } = useStyles()
     const sourceType = useAppSelector(state => state.entries.source.type)
     const dispatch = useAppDispatch()
+    const { isBrowserExtensionInstalled, openLinkInBackgroundTab } = useBrowserExtension()
 
     return (
         <Menu id={menuId(props.entry)} theme={theme.colorScheme} animation={false} className={classes.menu}>
@@ -48,17 +50,19 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
                     <Trans>Open link in new tab</Trans>
                 </Group>
             </Item>
-            <Item
-                onClick={() => {
-                    openLinkInBackgroundTab(props.entry.url)
-                    dispatch(markEntry({ entry: props.entry, read: true }))
-                }}
-            >
-                <Group>
-                    <TbExternalLink size={iconSize} />
-                    <Trans>Open link in new background tab</Trans>
-                </Group>
-            </Item>
+            {isBrowserExtensionInstalled && (
+                <Item
+                    onClick={() => {
+                        openLinkInBackgroundTab(props.entry.url)
+                        dispatch(markEntry({ entry: props.entry, read: true }))
+                    }}
+                >
+                    <Group>
+                        <TbExternalLink size={iconSize} />
+                        <Trans>Open link in new background tab</Trans>
+                    </Group>
+                </Item>
+            )}
 
             <Separator />