feat: add history control feature in history page

assets/rules.json

@@ -0,0 +1,26 @@
+[
+  {
+    "id": 1,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "requestHeaders": [
+        {
+          "header": "origin",
+          "operation": "set",
+          "value": "https://www.bilibili.com"
+        },
+        {
+          "header": "referer",
+          "operation": "set",
+          "value": "https://www.bilibili.com"
+        }
+      ]
+    },
+    "condition": {
+      "domainType": "thirdParty",
+      "urlFilter": "||api.bilibili.com",
+      "resourceTypes": ["xmlhttprequest"]
+    }
+  }
+]

src/background/apis/history.ts

@@ -7,14 +7,14 @@ export const setupHistoryAPIs = () => {
       const url = `https://api.bilibili.com/x/web-interface/history/cursor?ps=20&type=${message.type}&view_at=${message.viewAt}`
       return fetch(url)
         .then(response => response.json())
-        .then(data => (data))
+        .then(data => data)
         .catch(error => console.error(error))
     }
     else if (message.contentScriptQuery === 'searchHistoryList') {
       const url = `https://api.bilibili.com/x/web-goblin/history/search?pn=${message.pn}&keyword=${message.keyword}&business=all`
       return fetch(url)
         .then(response => response.json())
-        .then(data => (data))
+        .then(data => data)
         .catch(error => console.error(error))
     }
     // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E5%88%A0%E9%99%A4%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
@@ -25,10 +25,26 @@ export const setupHistoryAPIs = () => {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
         },
-        body: JSON.stringify({ kid: message.kid, csrf: message.csrf }),
+        body: new URLSearchParams({
+          kid: message.kid,
+          csrf: message.csrf,
+        }),
       })
         .then(response => response.json())
-        .then(data => (data))
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E6%B8%85%E7%A9%BA%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
+    else if (message.contentScriptQuery === 'clearAllHistory') {
+      const url = 'https://api.bilibili.com/x/v2/history/clear'
+      return fetch(url, {
+        method: 'POST',
+        body: new URLSearchParams({
+          csrf: message.csrf,
+        }),
+      })
+        .then(response => response.json())
+        .then(data => data)
         .catch(error => console.error(error))
     }
     // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E6%9F%A5%E8%AF%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%81%9C%E7%94%A8%E7%8A%B6%E6%80%81
@@ -36,7 +52,7 @@ export const setupHistoryAPIs = () => {
       const url = 'https://api.bilibili.com/x/v2/history/shadow'
       return fetch(url)
         .then(response => response.json())
-        .then(data => (data))
+        .then(data => data)
         .catch(error => console.error(error))
     }
     // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E5%81%9C%E7%94%A8%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
@@ -44,17 +60,13 @@ export const setupHistoryAPIs = () => {
       const url = 'https://api.bilibili.com/x/v2/history/shadow/set'
       return fetch(url, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
-          'origin': 'https://www.bilibili.com',
-        },
         body: new URLSearchParams({
           switch: message.switch,
           csrf: message.csrf,
         }),
       })
         .then(response => response.json())
-        .then(data => (data))
+        .then(data => data)
         .catch(error => console.error(error))
     }
   })

src/contentScripts/views/History/History.vue

@@ -15,24 +15,26 @@ const currentPageNum = ref<number>(1)
 const keyword = ref<string>()
 const historyStatus = ref<boolean>()
 
-watch(() => keyword.value, (newValue, oldValue) => {
-  window.onscroll = () => {
-    if (
-      window.innerHeight + window.scrollY
-      >= document.body.scrollHeight - 20
-    ) {
-      if (isLoading.value)
-        return
+watch(
+  () => keyword.value,
+  (newValue, oldValue) => {
+    window.onscroll = () => {
+      if (
+        window.innerHeight + window.scrollY
+        >= document.body.scrollHeight - 20
+      ) {
+        if (isLoading.value)
+          return
 
-      if (!noMoreContent.value) {
-        if (keyword.value)
-          searchHistoryList()
-        else
-          getHistoryList()
+        if (!noMoreContent.value) {
+          if (keyword.value)
+            searchHistoryList()
+          else getHistoryList()
+        }
       }
     }
-  }
-})
+  },
+)
 
 onMounted(() => {
   getHistoryList()
@@ -49,8 +51,7 @@ onMounted(() => {
       if (!noMoreContent.value) {
         if (keyword.value)
           searchHistoryList()
-        else
-          getHistoryList()
+        else getHistoryList()
       }
     }
   }
@@ -124,8 +125,7 @@ function handleSearch() {
   currentPageNum.value = 1
   if (keyword.value)
     searchHistoryList()
-  else
-    getHistoryList()
+  else getHistoryList()
 }
 
 function deleteHistoryItem(index: number, historyItem: HistoryItem) {
@@ -136,8 +136,6 @@ function deleteHistoryItem(index: number, historyItem: HistoryItem) {
       csrf: getCSRF(),
     })
     .then((res) => {
-      console.log(res)
-
       if (res.code === 0)
         historyList.splice(index, 1)
     })
@@ -149,6 +147,16 @@ function deleteHistoryItem(index: number, historyItem: HistoryItem) {
  * @return {string} url
  */
 function getHistoryUrl(item: HistoryItem) {
+  // anime
+  if (item.history.business === 'pgc')
+    return removeHttpFromUrl(item.uri)
+  // video
+  else if (item.history.business === 'archive')
+    return removeHttpFromUrl(item.history.bvid)
+  else if (item.history.business === 'live')
+    return `//live.bilibili.com/${item.history.oid}`
+  else if (item.history.business === 'article')
+    return `//www.bilibili.com/read/cv${item.history.oid}`
   // Video
   // if (activatedTab.value === 0)
   //   return item.history.bvid
@@ -186,16 +194,41 @@ function setHistoryPauseStatus(isPause: boolean) {
     })
 }
 
+function clearAllHistory() {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'clearAllHistory',
+      csrf: getCSRF(),
+    })
+    .then((res) => {
+      if (res.code === 0)
+        historyList.length = 0
+    })
+}
+
+function handleClearAllWatchHistory() {
+  // eslint-disable-next-line no-alert
+  const result = confirm(
+    'Clear all watch history?\nThis action cannot be undone. Are you sure you want to clear all watch history?',
+  )
+  if (result)
+    clearAllHistory()
+}
+
 function handlePauseWatchHistory() {
   // eslint-disable-next-line no-alert
-  const result = confirm('Pause watch history?\nAre you sure you want to pause watch history?')
+  const result = confirm(
+    'Pause watch history?\nAre you sure you want to pause watch history?',
+  )
   if (result)
     setHistoryPauseStatus(true)
 }
 
 function handleTurnOnWatchHistory() {
   // eslint-disable-next-line no-alert
-  const result = confirm('t=Turn on watch history?\nAre you sure you want to turn on watch history?')
+  const result = confirm(
+    'Turn on watch history?\nAre you sure you want to turn on watch history?',
+  )
   if (result)
     setHistoryPauseStatus(false)
 }
@@ -329,13 +362,16 @@ function handleTurnOnWatchHistory() {
                     mr-2
                   >
                   {{ historyItem.author_name }}
-                  <!-- <span
+                  <span
                     v-if="historyItem.live_status === 1"
                     text="$bew-theme-color"
+                    flex
+                    items-center
+                    gap-1
                     m="l-2"
                   ><tabler:live-photo />
                     Live
-                  </span> -->
+                  </span>
                 </div>
               </div>
 
@@ -354,7 +390,10 @@ function handleTurnOnWatchHistory() {
         </a>
       </transition-group>
       <!-- loading -->
-      <loading v-if="isLoading && historyList.length !== 0 && !noMoreContent" m="-t-4" />
+      <loading
+        v-if="isLoading && historyList.length !== 0 && !noMoreContent"
+        m="-t-4"
+      />
     </main>
 
     <aside relative w="20%">
@@ -371,13 +410,17 @@ function handleTurnOnWatchHistory() {
           w-full
           @keyup.enter="handleSearch"
         >
-        <Button shadow="$bew-shadow-1">
+        <Button shadow="$bew-shadow-1" @click="handleClearAllWatchHistory">
           <template #left>
             <tabler:trash />
           </template>
           Clear all watch history
         </Button>
-        <Button v-if="!historyStatus" shadow="$bew-shadow-1" @click="handlePauseWatchHistory">
+        <Button
+          v-if="!historyStatus"
+          shadow="$bew-shadow-1"
+          @click="handlePauseWatchHistory"
+        >
           <template #left>
             <ph:pause-circle-bold />
           </template>

src/contentScripts/views/History/types.ts

@@ -13,9 +13,9 @@ export interface HistoryItem {
   covers?: Array<string>
   history: {
     business: HistoryType
-    epid?: number
-    bvid?: string
-    part?: string
+    epid: number
+    bvid: string
+    part: string
     oid: number
   }
   author_name: string
@@ -26,4 +26,5 @@ export interface HistoryItem {
   duration: number
   kid: number
   live_status: 0 | 1 // 0：未开播 1：已开播
+  uri: string
 }

src/manifest.ts

@@ -35,6 +35,8 @@ export async function getManifest() {
       'storage',
       'activeTab',
       'scripting',
+      'declarativeNetRequest',
+      'declarativeNetRequestFeedback',
     ],
     host_permissions: ['https://*.bilibili.com/*'],
     content_scripts: [
@@ -58,6 +60,14 @@ export async function getManifest() {
         ? `script-src 'self' http://localhost:${port}; object-src 'self' http://localhost:${port}`
         : 'script-src \'self\'; object-src \'self\'',
     },
+    // @ts-expect-error Manifest.WebExtensionManifest type doesn't not support declarative_net_request check
+    declarative_net_request: {
+      rule_resources: [{
+        id: 'ruleset_1',
+        enabled: true,
+        path: './assets/rules.json',
+      }],
+    },
   }
 
   if (isDev)