diff --git a/app/scripts/content/index.ts b/app/scripts/content/index.ts
index d2a7818..e3b2ddb 100644
--- a/app/scripts/content/index.ts
+++ b/app/scripts/content/index.ts
@@ -6,6 +6,7 @@ import Cookies from 'js-cookie'
 import { fetchToBlockUser, fetchToGetLikeUsers } from '../utils/fetches'
 import { weiboExtendClassNames } from '../utils/constants'
 import { showUserList } from '../utils/doms'
+import { XShowUserListR } from '../utils/domsR'
 
 function injectCustomScript() {
     var scriptElement = document.createElement('script')
@@ -47,6 +48,8 @@ const contentRun = async () => {
                 showUserList({
                     userList: likeUsers?.userList,
                 })
+
+                console.log(`showUserListR`, XShowUserListR({ userList: likeUsers?.userList || [] }))
             })
         }
     })
diff --git a/app/scripts/utils/doms.ts b/app/scripts/utils/doms.ts
index 211d8e5..af81c1d 100644
--- a/app/scripts/utils/doms.ts
+++ b/app/scripts/utils/doms.ts
@@ -8,7 +8,7 @@ export const showUserList = ({ userList }: { userList?: UserType[] }) => {
     const userShowList: string[] = _.map(userList, userInfo => {
         const { uid, avatar, title } = userInfo || {}
         return `
-            <div>
+            <div class="normal-js">
                 <img src="${avatar}" alt="${title}" />
                 <a href=${
                     /\d+/.test(uid) ? '//weibo.com/u/' + uid : '//weibo.com/' + uid
diff --git a/app/scripts/utils/domsR.tsx b/app/scripts/utils/domsR.tsx
new file mode 100644
index 0000000..2ce3d45
--- /dev/null
+++ b/app/scripts/utils/domsR.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import _ from 'lodash'
+import { createRoot } from 'react-dom/client'
+import { createPortal } from 'react-dom'
+import { UserType } from './interface'
+
+interface IShowUserListRProps {
+    userList: UserType[]
+}
+export const ShowUserListR: React.FC<IShowUserListRProps> = ({ userList }) => {
+    if (_.isEmpty(userList)) return
+
+    return (
+        <div>
+            {_.map(userList, userInfo => {
+                const { uid, avatar, title } = userInfo || {}
+                const hrefUrl = /\d+/.test(uid) ? '//weibo.com/u/' + uid : '//weibo.com/' + uid
+                return (
+                    <div>
+                        <img src={avatar} alt={title} />
+                        <a href={hrefUrl} target="_blank">
+                            <span>{title}</span>
+                        </a>
+                    </div>
+                )
+            })}
+        </div>
+    )
+}
+
+export const XShowUserListR = ({ userList }: IShowUserListRProps) => {
+    if (!userList) {
+        return
+    }
+    // const root = createRoot(document.body)
+    // root.render(<ShowUserListR userList={userList} />)
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+
+    createPortal(<ShowUserListR userList={userList} />, container)
+
+    // return result;
+}
diff --git a/extension.webpack.config.js b/extension.webpack.config.js
index b5edc7c..c8e60ba 100644
--- a/extension.webpack.config.js
+++ b/extension.webpack.config.js
@@ -1,5 +1,5 @@
 const path = require('path')
-const {CleanWebpackPlugin } = require( 'clean-webpack-plugin' );
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 
 const outDir = path.resolve(__dirname, './extension')
 const scriptPath = path.resolve(__dirname, './app/scripts/')
@@ -15,12 +15,15 @@ module.exports = {
         filename: '[name]-script.js',
     },
     resolve: {
-        extensions: ['.ts', '.js'], // 解析的文件扩展名包括 .ts 和 .js
+        extensions: ['.ts', '.js', '.tsx'], // 解析的文件扩展名包括 .ts 和 .js
     },
     plugins: [
         new CleanWebpackPlugin({
-            cleanOnceBeforeBuildPatterns: [path.resolve(outDir, 'content-script.js'), path.resolve(outDir, 'inject-script.js')],
-        })
+            cleanOnceBeforeBuildPatterns: [
+                path.resolve(outDir, 'content-script.js'),
+                path.resolve(outDir, 'inject-script.js'),
+            ],
+        }),
     ],
     module: {
         rules: [
@@ -32,10 +35,32 @@ module.exports = {
                     compilerOptions: {
                         target: 'es5',
                         noEmit: false,
-                      }
+                    },
                 },
                 exclude: /node_modules/,
             },
+            {
+                test: /\.tsx$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['@babel/preset-env', '@babel/preset-react'],
+                        },
+                    },
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            // transpileOnly: true,
+                            compilerOptions: {
+                                target: 'es5',
+                                noEmit: false,
+                            },
+                        },
+                    },
+                ],
+            },
         ],
     },
 }
diff --git a/package.json b/package.json
index 2a8a00e..5c26395 100644
--- a/package.json
+++ b/package.json
@@ -1,76 +1,78 @@
 {
-  "name": "weibo-extend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "clear:terminal": "tput reset",
-    "afterbuild": "node ./buildAfter.js",
-    "zip:extension": "rm -rf weibo-extend.zip && cd ./extension && zip -r ../weibo-extend.zip . && cd ..",
-    "pack:extensionscript": "webpack --config ./extension.webpack.config.js",
-    "bun:pack": "bun ./bunpack.ts",
-    "build:extension": "npm run clear:terminal && npm run pack:extensionscript && cross-env-shell BUILD_TYPE=extension npm run build && npm run afterbuild && npm run zip:extension",
-    "bun:extension": "bun clear:terminal && bun bun:pack && cross-env-shell BUILD_TYPE=extension bun run build && bun afterbuild && bun zip:extension",
-    "eslint": "./node_modules/.bin/eslint \"app/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"app/lib/\" --ignore-pattern \"app/shared/\"",
-    "check-types": "tsc --noemit",
-    "eslint:commit": "git diff --cached --name-only | grep -E 'app.*\\.[jt]sx?$' | xargs ./node_modules/.bin/eslint --quiet",
-    "eslint:quiet": "./node_modules/.bin/eslint \"app/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"app/lib/\" --ignore-pattern \"app/shared/\" --quiet",
-    "prettier:single": "./node_modules/.bin/prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write",
-    "prettier": "./node_modules/.bin/prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write \"app/**/*.{js,jsx,ts,tsx}\"",
-    "prettier:check": "npm run prettier -- --list-different",
-    "lint-staged": "lint-staged"
-  },
-  "keywords": [
-    "chrome",
-    "extension",
-    "nextjs",
-    "weibo"
-  ],
-  "author": "loo-y",
-  "license": "ISC",
-  "pre-commit": "lint-staged",
-  "lint-staged": {
-    "app/**/*.{js,jsx,ts,tsx}": [
-      "npm run eslint:commit",
-      "prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write  \"!app/lib/**\"",
-      "git add"
-    ]
-  },
-  "dependencies": {
-    "jquery": "^3.7.1",
-    "js-cookie": "^3.0.5",
-    "lodash": "^4.17.21",
-    "next": "13.5.4",
-    "react": "^18",
-    "react-dom": "^18"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.0",
-    "@babel/preset-env": "^7.22.20",
-    "@babel/preset-typescript": "^7.23.0",
-    "@types/lodash": "^4.14.199",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10",
-    "babel-plugin-transform-remove-console": "^6.9.4",
-    "cheerio": "^1.0.0-rc.12",
-    "clean-webpack-plugin": "^4.0.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^8",
-    "eslint-config-next": "13.5.4",
-    "lint-staged": "^14.0.1",
-    "postcss": "^8",
-    "pre-commit": "^1.2.2",
-    "prettier": "^3.0.3",
-    "tailwindcss": "^3",
-    "ts-loader": "^9.5.0",
-    "typescript": "^5.2.2",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
-  }
+    "name": "weibo-extend",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint",
+        "clear:terminal": "tput reset",
+        "afterbuild": "node ./buildAfter.js",
+        "zip:extension": "rm -rf weibo-extend.zip && cd ./extension && zip -r ../weibo-extend.zip . && cd ..",
+        "pack:extensionscript": "webpack --config ./extension.webpack.config.js",
+        "bun:pack": "bun ./bunpack.ts",
+        "build:extension": "npm run clear:terminal && npm run pack:extensionscript && cross-env-shell BUILD_TYPE=extension npm run build && npm run afterbuild && npm run zip:extension",
+        "bun:extension": "bun clear:terminal && bun bun:pack && cross-env-shell BUILD_TYPE=extension bun run build && bun afterbuild && bun zip:extension",
+        "eslint": "./node_modules/.bin/eslint \"app/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"app/lib/\" --ignore-pattern \"app/shared/\"",
+        "check-types": "tsc --noemit",
+        "eslint:commit": "git diff --cached --name-only | grep -E 'app.*\\.[jt]sx?$' | xargs ./node_modules/.bin/eslint --quiet",
+        "eslint:quiet": "./node_modules/.bin/eslint \"app/**/*.{js,jsx,ts,tsx}\" --ignore-pattern \"app/lib/\" --ignore-pattern \"app/shared/\" --quiet",
+        "prettier:single": "./node_modules/.bin/prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write",
+        "prettier": "./node_modules/.bin/prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write \"app/**/*.{js,jsx,ts,tsx}\"",
+        "prettier:check": "npm run prettier -- --list-different",
+        "lint-staged": "lint-staged"
+    },
+    "keywords": [
+        "chrome",
+        "extension",
+        "nextjs",
+        "weibo"
+    ],
+    "author": "loo-y",
+    "license": "ISC",
+    "pre-commit": "lint-staged",
+    "lint-staged": {
+        "app/**/*.{js,jsx,ts,tsx}": [
+            "npm run eslint:commit",
+            "prettier --single-quote --no-semi --trailing-comma es5 --print-width 120 --tab-width 4 --arrow-parens avoid --write  \"!app/lib/**\"",
+            "git add"
+        ]
+    },
+    "dependencies": {
+        "jquery": "^3.7.1",
+        "js-cookie": "^3.0.5",
+        "lodash": "^4.17.21",
+        "next": "13.5.4",
+        "react": "^18",
+        "react-dom": "^18"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.23.0",
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "@babel/preset-react": "^7.22.15",
+        "@babel/preset-typescript": "^7.23.0",
+        "@types/lodash": "^4.14.199",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "autoprefixer": "^10",
+        "babel-loader": "^9.1.3",
+        "babel-plugin-transform-remove-console": "^6.9.4",
+        "cheerio": "^1.0.0-rc.12",
+        "clean-webpack-plugin": "^4.0.0",
+        "cross-env": "^7.0.3",
+        "eslint": "^8",
+        "eslint-config-next": "13.5.4",
+        "lint-staged": "^14.0.1",
+        "postcss": "^8",
+        "pre-commit": "^1.2.2",
+        "prettier": "^3.0.3",
+        "tailwindcss": "^3",
+        "ts-loader": "^9.5.0",
+        "typescript": "^5.2.2",
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4"
+    }
 }