feat: add a new settings "Disable fetching public keys ..."

src/components/shared-settings/createSettings.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import { ValueRef } from '@holoflows/kit/es/util/ValueRef'
+import { MessageCenter } from '../../utils/messages'
+import { ListItem, ListItemText, ListItemSecondaryAction, Switch } from '@material-ui/core'
+import { useValueRef } from '../../utils/hooks/useValueRef'
+
+interface SettingsTexts {
+    primary: string
+    secondary?: string
+}
+const texts = new WeakMap<ValueRef<any>, SettingsTexts>()
+export function createNewSettings<T extends browser.storage.StorageValue>(
+    key: string,
+    initialValue: T,
+    UITexts: SettingsTexts,
+) {
+    const settings = new ValueRef(initialValue)
+    texts.set(settings, UITexts)
+
+    update()
+    settings.addListener(async newVal => {
+        const stored = ((await browser.storage.local.get()).settings as object) || {}
+        browser.storage.local.set({
+            settings: { ...stored, [key]: newVal },
+        })
+        MessageCenter.emit('settingsUpdated', undefined)
+    })
+    MessageCenter.on('settingsUpdated', update)
+    async function update() {
+        if (typeof browser === 'object') {
+            const value = await browser.storage.local.get()
+            const stored = value.settings
+            if (typeof stored === 'object' && stored !== null && key in (stored as any)) {
+                settings.value = Reflect.get(stored, key)
+            }
+        }
+    }
+    return settings
+}
+
+export function useSettingsUI(settingsRef: ReturnType<typeof createNewSettings>) {
+    const currentValue = useValueRef(settingsRef)
+    const text = texts.get(settingsRef)!
+    function ui() {
+        switch (typeof currentValue) {
+            case 'boolean':
+                return (
+                    <ListItem button onClick={() => (settingsRef.value = !settingsRef.value)}>
+                        <ListItemText id={text.primary} primary={text.primary} secondary={text.secondary} />
+                        <ListItemSecondaryAction>
+                            <Switch
+                                inputProps={{ 'aria-labelledby': text.primary }}
+                                edge="end"
+                                checked={currentValue}
+                            />
+                        </ListItemSecondaryAction>
+                    </ListItem>
+                )
+            default:
+                throw new Error('Invalid settings')
+        }
+    }
+    return ui()
+}

src/components/shared-settings/settings.ts

@@ -1,2 +1,20 @@
 import { createNewSettings } from './createSettings'
-export const debugModeSetting = createNewSettings<boolean>('debugMode', false)
+/**
+ * Does the debug mode on
+ */
+export const debugModeSetting = createNewSettings<boolean>('debugMode', false, {
+    primary: 'Enable debug mode',
+    secondary: 'Enable this will display additional information on the Maskbook UI to help debugging',
+})
+/**
+ * Never open a new tab in the background
+ */
+export const disableOpenNewTabInBackgroundSettings = createNewSettings<boolean>(
+    'disable automated tab task open new tab',
+    false,
+    {
+        primary: 'Disable open hidden tabs in the background',
+        secondary:
+            "Many of Maskbook features relies on this behavior. Disable this behavior will limit Maskbook's functionality",
+    },
+)

src/extension/content-script/tasks.ts

@@ -1,8 +1,9 @@
 import { AutomatedTabTask } from '@holoflows/kit'
 import { getActivatedUI, SocialNetworkUI } from '../../social-network/ui'
 import { PersonIdentifier, PostIdentifier } from '../../database/type'
+import { disableOpenNewTabInBackgroundSettings } from '../../components/shared-settings/settings'
 
-export default AutomatedTabTask(
+const tasks = AutomatedTabTask(
     {
         /**
          * Access post url
@@ -35,3 +36,13 @@ export default AutomatedTabTask(
     },
     { memorable: true },
 )!
+export default function tasksMocked(...args: Parameters<typeof tasks>) {
+    const [, options] = args
+    if (disableOpenNewTabInBackgroundSettings.value) {
+        if (!options || !options.active)
+            throw new Error(
+                `You have disabled "Disable fetching public keys in the background" in the settings so Maskbook can not perform this action`,
+            )
+    }
+    return tasks(...args)
+}

src/extension/options-page/Developer.tsx

@@ -1,14 +1,24 @@
-import { ListSubheader, Grid, Paper, makeStyles } from '@material-ui/core'
+import {
+    ListSubheader,
+    Grid,
+    makeStyles,
+    List,
+    ListItem,
+    ListItemText,
+    ListItemSecondaryAction,
+    Switch,
+} from '@material-ui/core'
 import { PersonIdentifier, Identifier } from '../../database/type'
 import { deconstructPayload } from '../../utils/type-transform/Payload'
 import Services from '../service'
-import { useCurrentIdentity } from '../../components/DataSource/useActivatedUI'
 import { Person } from '../../database'
 import React from 'react'
 import { AddProve } from './DeveloperComponents/AddProve'
 import { DecryptPostDeveloperMode } from './DeveloperComponents/DecryptPost'
 import { SeeMyProvePost } from './DeveloperComponents/SeeMyProvePost'
 import { FriendsDeveloperMode } from './DeveloperComponents/Friends'
+import { debugModeSetting, disableOpenNewTabInBackgroundSettings } from '../../components/shared-settings/settings'
+import { useSettingsUI } from '../../components/shared-settings/createSettings'
 
 async function swallowGoo(me: Person | null) {
     const boxElem = document.querySelector('#raw-box') as HTMLTextAreaElement
@@ -50,12 +60,12 @@ async function assimilateGoo(content: string, me: Person | null): Promise<string
 }
 const useStyles = makeStyles(theme => ({ root: { padding: theme.spacing(0, 2) } }))
 const DevPage = () => {
-    // const me = useCurrentIdentity(false)
     const classes = useStyles()
     return (
         <>
             <ListSubheader>Developer Settings</ListSubheader>
             <div className={classes.root}>
+                <List>{useSettingsUI(disableOpenNewTabInBackgroundSettings)}</List>
                 <Grid container spacing={2}>
                     <Grid container xs={6} item spacing={2} direction="column">
                         <Grid item>

src/extension/popup-page/index.tsx

@@ -8,6 +8,7 @@ import '../../setup.ui'
 import { SSRRenderer } from '../../utils/SSRRenderer'
 import { useValueRef } from '../../utils/hooks/useValueRef'
 import { debugModeSetting } from '../../components/shared-settings/settings'
+import { useSettingsUI } from '../../components/shared-settings/createSettings'
 
 const useStyles = makeStyles(theme => ({
     button: {
@@ -50,23 +51,7 @@ export function Popup() {
                     onClick={e => browser.runtime.openOptionsPage()}>
                     Options
                 </Button>
-                <List>
-                    <ListItem>
-                        <ListItemText
-                            id="settings-debug"
-                            primary="Enable debug mode"
-                            secondary="Enable this will display additional information on the Maskbook UI to help debugging"
-                        />
-                        <ListItemSecondaryAction>
-                            <Switch
-                                inputProps={{ 'aria-labelledby': 'settings-debug' }}
-                                edge="end"
-                                checked={debugOn}
-                                onChange={(e, newValue) => (debugModeSetting.value = newValue)}
-                            />
-                        </ListItemSecondaryAction>
-                    </ListItem>
-                </List>
+                <List>{useSettingsUI(debugModeSetting)}</List>
             </main>
         </ThemeProvider>
     )