Add an text prompt when no file permission allowed (#290)

Author: sheepzh

src/api/chrome/runtime.ts

@@ -51,4 +51,9 @@ export function setUninstallURL(url: string): Promise<void> {
  */
 export function getUrl(path: string): string {
     return chrome.runtime.getURL(path)
+}
+
+export async function isAllowedFileSchemeAccess(): Promise<boolean> {
+    const res = await chrome.extension?.isAllowedFileSchemeAccess?.()
+    return !!res
 }

src/app/components/Option/common.tsx

@@ -21,7 +21,7 @@ export const OptionItem = defineComponent({
         hideDivider: {
             type: Boolean,
             default: false,
-        }
+        },
     },
     setup: (props, ctx) => {
         return () => {

src/app/components/Option/components/StatisticsOption.tsx

@@ -4,12 +4,15 @@
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
-import { ElSwitch } from "element-plus"
+import { ElSwitch, ElTooltip } from "element-plus"
 import optionService from "@service/option-service"
 import { defaultStatistics } from "@util/constant/option"
 import { defineComponent, reactive, unref, watch } from "vue"
 import { t } from "@app/locale"
 import { OptionInstance, OptionItem, OptionTag, OptionTooltip } from "../common"
+import { useRequest } from "@hooks"
+import { isAllowedFileSchemeAccess } from "@api/chrome/runtime"
+import { IS_FIREFOX } from "@util/constant/environment"
 
 function copy(target: timer.option.StatisticsOption, source: timer.option.StatisticsOption) {
     target.collectSiteName = source.collectSiteName
@@ -18,6 +21,7 @@ function copy(target: timer.option.StatisticsOption, source: timer.option.Statis
 
 const _default = defineComponent((_props, ctx) => {
     const option = reactive(defaultStatistics())
+    const { data: fileAccess } = useRequest(isAllowedFileSchemeAccess)
     optionService.getAllOption().then(currentVal => {
         copy(option, currentVal)
         watch(option, () => optionService.setStatisticsOption(unref(option)))
@@ -27,32 +31,35 @@ const _default = defineComponent((_props, ctx) => {
     } satisfies OptionInstance)
     return () => <>
         <OptionItem
-            label={msg => msg.option.statistics.countLocalFiles}
+            label={msg => msg.option.statistics.collectSiteName}
             defaultValue={t(msg => msg.option.yes)}
             hideDivider
             v-slots={{
-                info: () => <OptionTooltip>{t(msg => msg.option.statistics.localFilesInfo)}</OptionTooltip>,
-                localFileTime: () => <OptionTag>{t(msg => msg.option.statistics.localFileTime)}</OptionTag>,
+                siteName: () => <OptionTag>{t(msg => msg.option.statistics.siteName)}</OptionTag>,
+                siteNameUsage: () => <OptionTooltip>{t(msg => msg.option.statistics.siteNameUsage)}</OptionTooltip>,
+                default: () => <ElSwitch
+                    modelValue={option.collectSiteName}
+                    onChange={(val: boolean) => option.collectSiteName = val}
+                />
             }}
-        >
-            <ElSwitch
-                modelValue={option.countLocalFiles}
-                onChange={(val: boolean) => option.countLocalFiles = val}
-            />
-        </OptionItem>
+        />
         <OptionItem
-            label={msg => msg.option.statistics.collectSiteName}
-            defaultValue={t(msg => msg.option.yes)}
+            label={msg => msg.option.statistics.countLocalFiles}
+            defaultValue={fileAccess.value ? t(msg => msg.option.yes) : null}
             v-slots={{
-                siteName: () => <OptionTag>{t(msg => msg.option.statistics.siteName)}</OptionTag>,
-                siteNameUsage: () => <OptionTooltip>{t(msg => msg.option.statistics.siteNameUsage)}</OptionTooltip>,
+                info: () => <OptionTooltip>{t(msg => msg.option.statistics.localFilesInfo)}</OptionTooltip>,
+                localFileTime: () => <OptionTag>{t(msg => msg.option.statistics.localFileTime)}</OptionTag>,
+                default: () => fileAccess.value
+                    ? <ElSwitch modelValue={option.countLocalFiles} onChange={(val: boolean) => option.countLocalFiles = val} />
+                    : <ElTooltip
+                        placement="top"
+                        v-slots={{
+                            content: () => IS_FIREFOX ? t(msg => msg.option.statistics.fileAccessFirefox) : t(msg => msg.option.statistics.fileAccessDisabled),
+                            default: () => <ElSwitch modelValue={false} disabled />,
+                        }}
+                    />,
             }}
-        >
-            <ElSwitch
-                modelValue={option.collectSiteName}
-                onChange={(val: boolean) => option.collectSiteName = val}
-            />
-        </OptionItem>
+        />
     </>
 })
 

src/i18n/message/app/option-resource.json

@@ -51,7 +51,9 @@
             "localFilesInfo": "支持 PDF、图片、txt 以及 json 等格式",
             "collectSiteName": "{input}  访问网站主页时，是否自动收集 {siteName} {siteNameUsage}",
             "siteName": "网站的名称",
-            "siteNameUsage": "数据只存放在本地，将代替域名用于展示，增加辨识度。当然您可以自定义每个网站的名称"
+            "siteNameUsage": "数据只存放在本地，将代替域名用于展示，增加辨识度。当然您可以自定义每个网站的名称",
+            "fileAccessDisabled": "目前不允许访问文件网址，请先在管理界面开启",
+            "fileAccessFirefox": "很抱歉，该功能在 Firefox 中不支持"
         },
         "dailyLimit": {
             "prompt": "受限时显示的提示文本 {input}",
@@ -286,10 +288,12 @@
             "idleTimeInfo": "If you do not operate for a long time (such as watching a video in full screen), the browser will automatically enter the idle state",
             "countLocalFiles": "{input}  Whether to count the time to {localFileTime} {info} in the browser",
             "localFileTime": "read a local file",
-            "localFilesInfo": "Supports files of types such as PDF, image, txt and json",
+            "localFilesInfo": "Supports files of types such as PDF, image, txt and json.",
             "collectSiteName": "{input}  Whether to automatically collect {siteName} {siteNameUsage} when visiting the site homepage",
             "siteName": "the site name",
-            "siteNameUsage": "The data is only stored locally and will be displayed instead of the URL to increase the recognition.Of course, you can also customize the name of each site."
+            "siteNameUsage": "The data is only stored locally and will be displayed instead of the URL to increase the recognition.Of course, you can also customize the name of each site.",
+            "fileAccessDisabled": "Access to file URLs is currently not allowed. Please enable it in the manage page first",
+            "fileAccessFirefox": "Sorry, this feature is not supported in Firefox"
         },
         "dailyLimit": {
             "prompt": "Prompt displayed when restricted {input}",

src/i18n/message/app/option.ts

@@ -54,6 +54,8 @@ export type OptionMessage = {
         collectSiteName: string
         siteNameUsage: string
         siteName: string
+        fileAccessDisabled: string
+        fileAccessFirefox: string
     }
     dailyLimit: {
         prompt: string