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

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 />