diff --git a/src/background/apis/videos.ts b/src/background/apis/videos.ts
index 850c16cb..9df1d6e7 100644
--- a/src/background/apis/videos.ts
+++ b/src/background/apis/videos.ts
@@ -70,5 +70,13 @@ export const setupVideosAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/comment/list.md#%E8%8E%B7%E5%8F%96%E8%AF%84%E8%AE%BA%E5%8C%BA%E6%98%8E%E7%BB%86_%E7%BF%BB%E9%A1%B5%E5%8A%A0%E8%BD%BD
+    else if (message.contentScriptQuery === 'getVideoComments') {
+      const url = `https://api.bilibili.com/x/v2/reply?csrf=${message.csrf}&type=1&oid=${message.oid}&sort=${message.sort ?? 0}&nohot=${message.nohot ?? 0}&pn=${message.pn ?? 1}&ps=${message.ps ?? 20}`
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => data)
+        .catch(error => console.error(error))
+    }
   })
 }
diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index a64bb0c3..387da564 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -1,17 +1,15 @@
 <script lang="ts" setup>
 import type { Ref, UnwrapNestedRefs } from 'vue'
-import type { VideoInfoModel } from './types'
-import { removeHttpFromUrl } from '~/utils'
+import type { VideoInfo } from './types'
+import { getCSRF, removeHttpFromUrl } from '~/utils'
 
 const videoContent = ref() as Ref<HTMLElement>
 const danmukuContent = ref() as Ref<HTMLElement>
-const videoInfo = reactive<VideoInfoModel | {}>({}) as UnwrapNestedRefs<VideoInfoModel>
+const videoInfo = reactive<VideoInfo | {}>({}) as UnwrapNestedRefs<VideoInfo>
 
 // document.body.removeChild(app)
 
-onMounted(() => {
-  getVideoInfo()
-
+onMounted(async () => {
   nextTick(() => {
     const videoPlayer = document.querySelector('#playerWrap') as HTMLElement
     if (videoContent.value)
@@ -24,19 +22,32 @@ onMounted(() => {
     const app = document.querySelector('#app') as HTMLElement
     app.innerHTML = ''
   })
+
+  await getVideoInfo()
+  getVideoComments()
 })
 
-function getVideoInfo() {
+async function getVideoInfo() {
   // e.g. https://www.bilibili.com/video/BV1vx4y1V7VD/
   const url = location.href
   // url.match(/video\/[0-9a-zA-Z]*/) = ['video/BV1vx4y1V7VD/', index: 25, input: 'https://www.bilibili.com/video/BV1vx4y1V7VD/', groups: undefined]
   // url.match(/video\/[0-9a-zA-Z]*/)[0] = 'video/BV1vx4y1V7VD/'
   const bvid = url.match(/video\/[0-9a-zA-Z]*\/?/)![0].split('/')[1]
-  browser.runtime.sendMessage({ contentScriptQuery: 'getVideoInfo', bvid })
-    .then((res) => {
-      if (res.code === 0)
-        Object.assign(videoInfo, res.data)
-    })
+  const res = await browser.runtime.sendMessage({ contentScriptQuery: 'getVideoInfo', bvid })
+  if (res.code === 0)
+    Object.assign(videoInfo, res.data)
+}
+
+function getVideoComments() {
+  browser.runtime.sendMessage({
+    contentScriptQuery: 'getVideoComments',
+    csrf: getCSRF(),
+    oid: videoInfo.aid,
+    pn: 1,
+  }).then((res) => {
+    if (res.code === 0)
+      console.log(res)
+  })
 }
 
 function changeUrl() {
@@ -74,8 +85,11 @@ function changeUrl() {
         </div>
       </section>
       <section style="white-space: pre-wrap" v-html="(videoInfo.desc_v2 ?? [''])[0].raw_text" />
-
-      <!-- <section v-html="videoInfo.desc_v2![0].raw_text" /> -->
+      <section>
+        <ul>
+          <li />
+        </ul>
+      </section>
     </main>
     <aside w="1/4">
       <div ref="danmukuContent" rounded="$bew-radius" shadow="$bew-shadow-1" />
diff --git a/src/contentScripts/views/Video/types.ts b/src/contentScripts/views/Video/types.ts
index 1b5895be..5846194a 100644
--- a/src/contentScripts/views/Video/types.ts
+++ b/src/contentScripts/views/Video/types.ts
@@ -1,5 +1,5 @@
 // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
-export interface VideoInfoModel {
+export interface VideoInfo {
   bvid: string
   aid: number
   videos: number
@@ -222,3 +222,81 @@ export interface VideoInfoModel {
   like_icon: string
   need_jump_bv: boolean
 }
+
+export interface Comment {
+  'rpid': number
+  'oid': number
+  'type': number
+  'mid': number
+  'root': 0
+  'parent': 0
+  'dialog': 0
+  'count': 0
+  'rcount': 0
+  'state': 0
+  'fansgrade': 0
+  'attr': 0
+  'ctime': number
+  'like': 0
+  'action': 0
+  'member': {
+    'mid': number
+    'uname': string
+    'sex': string
+    'avatar': string
+    'rank': string
+    'level_info': {
+      'current_level': number
+      'current_min': number
+      'current_exp': number
+      'next_exp': number
+    }
+    // 'official_verify': {
+    //   'type': -1
+    //   'desc': ''
+    // }
+    // 'vip': {
+    //   'vipType': 1
+    //   'vipDueDate': number
+    //   'dueRemark': ''
+    //   'accessStatus': 0
+    //   'vipStatus': 0
+    //   'vipStatusWarn': ''
+    //   'themeType': 0
+    //   'label': {
+    //     'path': ''
+    //     'text': ''
+    //     'label_theme': ''
+    //     'text_color': ''
+    //     'bg_style': 0
+    //     'bg_color': ''
+    //     'border_color': ''
+    //     'use_img_label': true
+    //     'img_label_uri_hans': ''
+    //     'img_label_uri_hant': ''
+    //     'img_label_uri_hans_static': 'https://i0.hdslb.com/bfs/vip/d7b702ef65a976b20ed854cbd04cb9e27341bb79.png'
+    //     'img_label_uri_hant_static': 'https://i0.hdslb.com/bfs/activity-plat/static/20220614/e369244d0b14644f5e1a06431e22a4d5/KJunwh19T5.png'
+    //   }
+    //   'avatar_subscript': 0
+    //   'nickname_color': ''
+    // }
+  }
+  'content': {
+    'message': string
+    'members': []
+    'jump_url': {}
+    'max_line': 6
+  }
+  'replies': Array<Comment>
+  'up_action': {
+    'like': false
+    'reply': false
+  }
+  'invisible': false
+  'folder': {
+    'has_folded': false
+    'is_folded': false
+    'rule': ''
+  }
+  'dynamic_id_str': '0'
+}