fixed: cannot authorize to get access key

src/background/main.ts

@@ -55,19 +55,11 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
   || /https?:\/\/www.bilibili.com\/?$/.test(`${tab.url}`)
   || /https?:\/\/bilibili.com\/\?spm_id_from=.*/.test(`${tab.url}`)
   || /https?:\/\/www.bilibili.com\/\?spm_id_from=(.)*/.test(`${tab.url}`)) {
-    const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
     if (changInfo.status === 'loading') {
       const css = `
-      body::after {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: '';
-        overflow: hidden;
-        background: ${isDark ? 'hsl(230 12% 6%)' : 'rgb(243 244 246)'}!important;
-        z-index: 99999;
+      body {
+        opacity: 0;
+        transition: opacity 0.5s;
       }
       `
 
@@ -80,8 +72,8 @@ browser.tabs.onUpdated.addListener((tabId: number, changInfo: Tabs.OnUpdatedChan
 
     else if (changInfo.status === 'complete') {
       const css = `
-      body::after {
-        display: none;
+      body {
+        opacity: 1;
       }
       `
 
@@ -98,6 +90,13 @@ chrome.runtime.onMessage.addListener((message: any, sender: chrome.runtime.Messa
   const APP_URL = 'https://app.bilibili.com'
   const API_URL = 'https://api.bilibili.com'
 
+  if (message.contentScriptQuery === 'getAccessKey') {
+    const url = message.confirmUri
+    fetch(url)
+      .then(response => sendResponse({ accessKey: `${response.url}`.match(/access_key=([0-9a-z]{32})/)![1] }))
+      .catch(error => console.error(error))
+    return true
+  }
   if (message.contentScriptQuery === 'getRecommendVideo') {
     const url = `${APP_URL}/x/feed/index?build=1&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
     fetch(url)

src/logic/storage.ts

@@ -3,4 +3,4 @@ import { useStorageLocal } from '~/composables/useStorageLocal'
 export const storageDemo = useStorageLocal('webext-demo', 'Storage Demo', { listenToStorageChanges: true })
 export const isShowTopbar = useStorageLocal('isShowTopbar', true, { listenToStorageChanges: true })
 export const apperance = useStorageLocal('apperance', 'automatic', { listenToStorageChanges: true })
-export const accessKey = useStorageLocal('accessKey', null, { listenToStorageChanges: true })
+export const accessKey = useStorageLocal('accessKey', '', { listenToStorageChanges: true })

src/utils/auth-provider.ts

@@ -38,31 +38,17 @@ export const grantAccessKey = (element: HTMLButtonElement): void => {
     .then(
       url =>
         new Promise<void>((resolve, reject) => {
-          const iframe = document.createElement('iframe')
-          iframe.src = url
-          iframe.style.display = 'none'
-          document.body.appendChild(iframe)
-
-          const timeout = setTimeout(() => {
-            document.body.contains(iframe) && document.body.removeChild(iframe)
-            // eslint-disable-next-line prefer-promise-reject-errors
-            reject({ tip, msg: 'Request timeout' })
-          }, 5000)
-
-          window.addEventListener('message', (ev) => {
-            if (`${ev.origin}` !== 'https://www.mcbbs.net' || !ev.data) return
-            const key = ev.data.match(/access_key=([0-9a-z]{32})/)
-            if (key) {
-              accessKey.value = key[1]
-              clearTimeout(timeout)
-              document.body.contains(iframe) && document.body.removeChild(iframe)
+          browser.runtime
+            .sendMessage({
+              contentScriptQuery: 'getAccessKey',
+              confirmUri: url,
+            }).then((res: {accessKey: string}) => {
+              accessKey.value = res.accessKey
               resolve()
-            }
-            else {
+            }).catch((err: any) => {
               // eslint-disable-next-line prefer-promise-reject-errors
-              reject({ tip, msg: 'Failed to get Access Key', data: ev })
-            }
-          })
+              reject({ tip, msg: 'Failed to get Access Key', data: err })
+            })
         }),
     )
     .catch((error) => {