From 55273b770beb8248475b9c20bdc5df0e2d2574a2 Mon Sep 17 00:00:00 2001
From: apades <36807043+apades@users.noreply.github.com>
Date: Mon, 11 Nov 2024 01:53:10 +0800
Subject: [PATCH] fix(iframe-drawer): cannot change url when video changes
 (#1072)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 抽屉页面内点击其他链接跳转后，“在新标签页打开“按钮无法正确导向至当前链接 #1068

* chore: update

* chore: update

---------

Co-authored-by: Hakadao <a578457889743@gmail.com>
---
 src/components/IframeDrawer.vue  | 32 ++++++++++-----------
 src/contentScripts/views/App.vue | 26 ++++++++---------
 src/inject/README.md             |  3 ++
 src/inject/index.js              | 48 ++++++++++++++++++++++++++++++++
 src/manifest.ts                  | 19 +++++++++++++
 tsup.config.ts                   | 10 ++++++-
 6 files changed, 108 insertions(+), 30 deletions(-)
 create mode 100644 src/inject/README.md
 create mode 100644 src/inject/index.js

diff --git a/src/components/IframeDrawer.vue b/src/components/IframeDrawer.vue
index 0eafaf55..6b5fb189 100644
--- a/src/components/IframeDrawer.vue
+++ b/src/components/IframeDrawer.vue
@@ -26,9 +26,10 @@ const inIframe = computed((): boolean => {
 })
 
 useEventListener(window, 'popstate', updateIframeUrl)
-// nextTick(() => {
-//   useEventListener(iframeRef.value?.contentWindow, 'pushstate', updateCurrentUrl)
-// })
+nextTick(() => {
+  useEventListener(iframeRef.value?.contentWindow, 'historyChange', updateCurrentUrl)
+  useEventListener(iframeRef.value?.contentWindow, 'popstate', updateCurrentUrl)
+})
 
 onMounted(async () => {
   history.pushState(null, '', props.url)
@@ -46,17 +47,17 @@ onUnmounted(() => {
   history.replaceState(null, '', 'https://www.bilibili.com')
 })
 
-// function updateCurrentUrl() {
-//   if (iframeRef.value?.contentWindow) {
-//     try {
-//       currentUrl.value = iframeRef.value.contentWindow.location.href.replace(/\/$/, '')
-//       history.pushState(null, '', currentUrl.value.replace(/\/$/, ''))
-//     }
-//     catch (error) {
-//       console.error('Unable to access iframe URL:', error)
-//     }
-//   }
-// }
+function updateCurrentUrl() {
+  if (iframeRef.value?.contentWindow) {
+    try {
+      currentUrl.value = iframeRef.value.contentWindow.location.href.replace(/\/$/, '')
+      history.pushState(null, '', currentUrl.value.replace(/\/$/, ''))
+    }
+    catch (error) {
+      console.error('Unable to access iframe URL:', error)
+    }
+  }
+}
 
 async function updateIframeUrl() {
   if (isHomePage()) {
@@ -98,7 +99,6 @@ async function releaseIframeResources() {
 }
 
 function handleOpenInNewTab() {
-  // window.open(props.url, '_blank')
   if (iframeRef.value)
     window.open(iframeRef.value.contentWindow?.location.href.replace(/\/$/, ''), '_blank')
 }
@@ -236,7 +236,7 @@ watchEffect(() => {
       >
         <iframe
           ref="iframeRef"
-          :src="currentUrl"
+          :src="props.url"
           :style="{
             bottom: headerShow ? `var(--bew-top-bar-height)` : '0',
           }"
diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index e70cae4d..2164e954 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -192,20 +192,20 @@ async function haveScrollbar() {
   return scrollHeight > window.innerHeight
 }
 
-// When opening a video in drawer mode, listen for changes to the drawer's inner iframe url.
-// When the iframe's url changes, update the parent url to match the iframe's url.
-const beforeUrl = ref<string>(location.href.replace(/\/$/, ''))
-if (inIframe.value) {
-  useEventListener(window, 'pushstate', handleIframeUrlChange)
-  useEventListener(window, 'click', handleIframeUrlChange)
+// // When opening a video in drawer mode, listen for changes to the drawer's inner iframe url.
+// // When the iframe's url changes, update the parent url to match the iframe's url.
+// const beforeUrl = ref<string>(location.href.replace(/\/$/, ''))
+// if (inIframe.value) {
+//   // useEventListener(window, 'pushstate', handleIframeUrlChange)
+//   useEventListener(window, 'click', handleIframeUrlChange)
 
-  function handleIframeUrlChange() {
-    if (beforeUrl.value.replace(/\/$/, '') !== parent.location.href.replace(/\/$/, '')) {
-      parent.history.pushState(null, '', location.href.replace(/\/$/, ''))
-    }
-    beforeUrl.value = location.href.replace(/\/$/, '')
-  }
-}
+//   function handleIframeUrlChange() {
+//     if (beforeUrl.value.replace(/\/$/, '') !== parent.location.href.replace(/\/$/, '')) {
+//       parent.history.pushState(null, '', location.href.replace(/\/$/, ''))
+//     }
+//     beforeUrl.value = location.href.replace(/\/$/, '')
+//   }
+// }
 
 provide<BewlyAppProvider>('BEWLY_APP', {
   activatedPage,
diff --git a/src/inject/README.md b/src/inject/README.md
new file mode 100644
index 00000000..9f4a8503
--- /dev/null
+++ b/src/inject/README.md
@@ -0,0 +1,3 @@
+# inject/
+
+All injected scripts will be placed in this folder.
diff --git a/src/inject/index.js b/src/inject/index.js
new file mode 100644
index 00000000..3e0ac3d9
--- /dev/null
+++ b/src/inject/index.js
@@ -0,0 +1,48 @@
+const isArray = val => Array.isArray(val)
+function injectFunction(
+  origin,
+  keys,
+  cb,
+) {
+  if (!isArray(keys))
+    keys = [keys]
+
+  const originKeysValue = keys.reduce((obj, key) => {
+    obj[key] = origin[key]
+    return obj
+  }, {})
+
+  keys.map(k => origin[k])
+
+  keys.forEach((key) => {
+    const fn = (...args) => {
+      cb(...args)
+      return (originKeysValue[key]).apply(origin, args)
+    }
+    fn.toString = (origin)[key].toString
+    ;(origin)[key] = fn
+  })
+
+  return {
+    originKeysValue,
+    restore: () => {
+      for (const key in originKeysValue) {
+        origin[key] = (originKeysValue[key]).bind(origin)
+      }
+    },
+  }
+}
+
+injectFunction(
+  window.history,
+  ['pushState', 'forward', 'replaceState'],
+  (...args) => {
+    window.dispatchEvent(new CustomEvent('historyChange', { detail: args }))
+  },
+)
+
+window.___inject = true
+
+// History.prototype.pushState = history.pushState
+// History.prototype.replaceState = history.replaceState
+// History.prototype.forward = history.forward
diff --git a/src/manifest.ts b/src/manifest.ts
index 49952b64..35bfbb3c 100644
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -66,6 +66,25 @@ export async function getManifest() {
         match_about_blank: true,
         all_frames: true,
       },
+      {
+        matches: [
+          '*://www.bilibili.com/*',
+          '*://search.bilibili.com/*',
+          '*://t.bilibili.com/*',
+          '*://space.bilibili.com/*',
+          '*://message.bilibili.com/*',
+          '*://member.bilibili.com/*',
+          '*://account.bilibili.com/*',
+          '*://www.hdslb.com/*',
+          '*://passport.bilibili.com/*',
+        ],
+        js: ['./dist/inject/index.js'],
+        run_at: 'document_start',
+        all_frames: true,
+        // eslint-disable-next-line ts/ban-ts-comment
+        // @ts-expect-error
+        world: 'MAIN',
+      },
     ],
     web_accessible_resources: [
       {
diff --git a/tsup.config.ts b/tsup.config.ts
index adb252be..05b4d6c9 100644
--- a/tsup.config.ts
+++ b/tsup.config.ts
@@ -1,13 +1,21 @@
+import path from 'node:path'
+
+import fs from 'fs-extra'
 import { defineConfig } from 'tsup'
 
 import { isDev, isFirefox, isSafari } from './scripts/utils'
 
+const outDir = isFirefox ? 'extension-firefox/dist' : isSafari ? 'extension-safari/dist' : 'extension/dist'
+
 export default defineConfig(() => ({
   entry: {
     'background/index': './src/background/index.ts',
     ...(isDev ? { mv3client: './scripts/client.ts' } : {}),
   },
-  outDir: isFirefox ? 'extension-firefox/dist' : isSafari ? 'extension-safari/dist' : 'extension/dist',
+  async onSuccess() {
+    fs.copySync(path.resolve(__dirname, './src/inject/index.js'), path.resolve(__dirname, `./${outDir}/inject/index.js`))
+  },
+  outDir,
   format: ['esm'],
   target: 'esnext',
   ignoreWatch: ['**/extension/**', '**/extension-firefox/**', '**/extension-safari/**'],