i18n: translated error message in authProvider.ts

src/_locales/cmn-CN.yml

@@ -46,10 +46,10 @@ settings:
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主题色
   follow_bilibili_evolved_color_desc: 每次选完 Bilibili Evolved 主题色时，记得重新选中这一选项以更新配置
 auth:
-  err_tip: Failed to grant Access Key
-  plz_login_first: Please login to bilibili first
-  receive_verified_url_err: Unable to receive verified URL. Please go back and try againe.
-  failed_to_get_accesskey: Failed to get Access Key
+  err_tip: 授权 access key 失败
+  plz_login_first: 请先登录 bilibili
+  receive_verified_url_err: 未知错误，请刷新页面后重试
+  failed_to_get_accesskey: 获取 access key 失败
 topbar:
   sign_in: 登录
   notifications: 通知

src/_locales/cmn-TW.yml

@@ -23,13 +23,13 @@ settings:
     jyut: 廣東話
   recommendation_mode: 推薦模式
   recommendation_mode_desc: >
-    如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用存取 access key。
+    如果您想要使用手機端的推薦演算法，請先授權 BewlyBewly 使用 access key。
   authorize_app: 授權 BewlyBewly 使用 access key
   authorize_app_desc: |
-    授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得存取 access key。
+    授權使用後能在首頁推送 bilibili 手機端推介演算法的影片，授權 key 的有效期約爲一個月，過了有效期後，請記得重新取得授權以取得 access key。
   authorize_app_more_info_access_key: 關於 access key
   topbar_visible: 頂欄可視性
-  topbar_visible_desc: 用於相容 Bilibili Evolved 的客製化頂欄
+  topbar_visible_desc: 用於相容 Bilibili Evolved 自訂頂欄
   btn:
     authorize: 授權
     revoke: 解除授權
@@ -44,7 +44,12 @@ settings:
     bottom: 底部
   theme_color: 主題色
   follow_bilibili_evolved_color: 使用 Bilibili Evolved 主題色
-  follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，必須重新選取此選項以更新配置
+  follow_bilibili_evolved_color_desc: 每次變更 Bilibili Evolved 主題色後，記得重新選取此選項以更新配置
+auth:
+  err_tip: 無法授權 access key
+  plz_login_first: 請先登入 bilibili
+  receive_verified_url_err: 不明錯誤，請重新整理頁面後再試一次。
+  failed_to_get_accesskey: 無法取得 access key
 topbar:
   sign_in: 登入
   notifications: 通知

src/_locales/en.yml

@@ -47,10 +47,10 @@ settings:
   follow_bilibili_evolved_color: Follow the Bilibili Evolved theme color
   follow_bilibili_evolved_color_desc: After changing the theme color in Bilibili Evolved, you will need to re-select this option in order to update the theme color.
 auth:
-  err_tip: Failed to grant Access Key
+  err_tip: Failed to grant access key
   plz_login_first: Please login to bilibili first
-  receive_verified_url_err: Unable to receive verified URL. Please go back and try again.
-  failed_to_get_accesskey: Failed to get Access Key
+  receive_verified_url_err: Unknown error, please refresh the page and try again.
+  failed_to_get_accesskey: Failed to get access key
 topbar:
   sign_in: Sign in
   notifications: Notifications

src/_locales/jyut.yml

@@ -46,10 +46,10 @@ settings:
   follow_bilibili_evolved_color: 跟返 Bilibili Evolved 佈景色
   follow_bilibili_evolved_color_desc: 每次換完 Bilibili Evolved 佈景色嗰陣，記得揀多一次呢個選項愛嚟更新佈置
 auth:
-  err_tip: Failed to grant Access Key
-  plz_login_first: Please login to bilibili first
-  receive_verified_url_err: Unable to receive verified URL. Please go back and try again.
-  failed_to_get_accesskey: Failed to get Access Key
+  err_tip: 無法授權 access key
+  plz_login_first: 唔該登入 bilibili 先
+  receive_verified_url_err: 好似神神哋，試吓 refresh 個 page 之後試多次 
+  failed_to_get_accesskey: 攞唔度 access key
 topbar:
   sign_in: 登入
   notifications: 通知

src/contentScripts/index.ts

@@ -1,9 +1,12 @@
-import { onMessage } from 'webext-bridge'
+// import { onMessage } from 'webext-bridge'
 import { createApp } from 'vue'
+import type { App as AppType } from 'vue'
 import App from './views/App.vue'
 import { setupApp } from '~/logic/common-setup'
 import { SVG_ICONS, i18n } from '~/utils'
 
+let app: AppType | null = null;
+
 // Firefox `browser.tabs.executeScript()` requires scripts return a primitive value
 (() => {
   // console.info('[vitesse-webext] Hello world from content script')
@@ -58,8 +61,10 @@ import { SVG_ICONS, i18n } from '~/utils'
     shadowDOM.appendChild(svgDiv)
 
     document.body.appendChild(container)
-    const app = createApp(App)
+    app = createApp(App)
     setupApp(app)
     app.use(i18n).mount(root)
   }
 })()
+
+export default app as AppType

src/utils/authProvider.ts

@@ -1,13 +1,19 @@
-/* eslint-disable no-throw-literal */
-import browser from 'webextension-polyfill'
-import { accessKey } from '~/logic/storage'
-
 /**
  * 感謝這份專案給出的獲取accessKey的方法
  * https://github.com/indefined/UserScripts/blob/42e20281d2e4d7bce16b5c8033b67ccb6ad312e9/bilibiliHome/bilibiliHome.user.js#L1149
+ * TODO: 解耦，避免直接操作DOM
  */
 
-// TODO: 解耦，避免直接操作DOM
+/* eslint-disable no-throw-literal */
+import browser from 'webextension-polyfill'
+import type { ComponentCustomProperties } from 'vue'
+import { accessKey } from '~/logic/storage'
+import app from '~/contentScripts/index'
+
+let vueGlobalProperties: ComponentCustomProperties & Record<string, any>
+nextTick(() => {
+  vueGlobalProperties = app.config.globalProperties
+})
 
 export const revokeAccessKey = () => {
   accessKey.value = null
@@ -21,8 +27,7 @@ export const grantAccessKey = (element: HTMLButtonElement): void => {
   element.style.pointerEvents = 'none'
   element.disabled = true
 
-  const tip = 'Failed to grant Access Key'
-
+  const tip = vueGlobalProperties.$t('auth.err_tip')
   fetch(
     'https://passport.bilibili.com/login/app/third?appkey=27eb53fc9058f8c3'
       + '&api=https%3A%2F%2Fwww.mcbbs.net%2Ftemplate%2Fmcbbs%2Fimage%2Fspecial_photo_bg.png&sign=04224646d1fea004e79606d3b038c84a',
@@ -36,9 +41,9 @@ export const grantAccessKey = (element: HTMLButtonElement): void => {
       if (data.code || !data.data)
         throw { tip, msg: data.msg || data.message || data.code, data }
       else if (!data.data.has_login)
-        throw { tip, msg: 'Please login to bilibili first', data }
+        throw { tip, msg: vueGlobalProperties.$t('auth.plz_login_first'), data }
       else if (!data.data.confirm_uri)
-        throw { tip, msg: 'Unable to receive verified URL. Please go back and try again.', data }
+        throw { tip, msg: vueGlobalProperties.$t('auth.receive_verified_url_err'), data }
       else return data.data.confirm_uri
     })
     .then(
@@ -54,7 +59,7 @@ export const grantAccessKey = (element: HTMLButtonElement): void => {
           })
           .catch((err: any) => {
             // eslint-disable-next-line prefer-promise-reject-errors
-            return Promise.reject({ tip, msg: 'Failed to get Access Key', data: err })
+            return Promise.reject({ tip, msg: vueGlobalProperties.$t('auth.failed_to_get_accesskey'), data: err })
           }),
     )
     .catch((error) => {