限制页面访问

.gitignore

@@ -9,6 +9,7 @@ lerna-debug.log*
 
 node_modules
 .output
+.history
 stats.html
 stats-*.json
 .wxt

README.md

@@ -1,3 +1,26 @@
 # WXT + React
 
 This template should help get you started developing with React in WXT.
+
+# Chrome Extension Project
+
+## 项目描述
+这是一个 Chrome 扩展项目，包含登录认证和获取定制图信息功能。
+
+## 安装方式
+1. 克隆此仓库
+2. 在 Chrome 浏览器中打开 `chrome://extensions/`
+3. 启用"开发者模式"
+4. 点击"加载已解压的扩展程序"
+5. 选择项目中的 `output` 或构建输出目录
+
+## 开发
+```bash
+# 安装依赖
+pnpm install
+
+# 开发模式
+pnpm dev
+
+# 构建项目
+pnpm build

entrypoints/popup/pages/DesignPic.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Button, Table, Input, Message, Loading } from '@alifd/next';
 import { CustomMessage } from '@/components/CustomMessage'
 
@@ -7,14 +7,38 @@ export default function DesignPic() {
   // 添加状态管理表格数据
   const [tableData, setTableData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
+  const [isPage, setIsPage] = useState(true);
+
+  useEffect(() => {
+    is_temu_design()
+  }, [])
+
+  const is_temu_design = async () => {
+    try {
+      // 获取当前活动标签页
+      const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
+
+      // 获取页面域名
+      if (tab.url) {
+        const url = tab.url
+        console.log('当前页面域名:', url);
+        if (url.includes('main/customize-goods')) {
+          // temu定制页面
+          setIsPage(false)
+        }
+      }
+    } catch (error) {
+      console.error('获取当前页面域名时出错:', error);
+    }
+  }
 
   const pic_render = (value: any, index: any, record: any) => {
     return (
       <>
         {
           record.file ? <>
-            <img className='size-20' src={record.file}/></> : <>
-             <span>暂无图片</span>
+            <img className='size-20' src={record.file} /></> : <>
+            <span>暂无图片</span>
           </>
         }
       </>
@@ -486,15 +510,21 @@ export default function DesignPic() {
   return (
     <Loading visible={loading} fullScreen>
       <div className='w-3xl h-fit'>
-        <Button type="primary" style={{ marginBottom: '10px', marginRight: '10px' }}
+        <Button
+          type="primary"
+          disabled={isPage}
+          style={{ marginBottom: '10px', marginRight: '10px' }}
           onClick={() => {
             getPicData()
           }}>获取定制数据</Button>
-        <Button disabled={!tableData.length} type="primary" style={{ marginBottom: '10px', marginRight: '10px' }}
+        <Button
+          disabled={(!tableData.length) || isPage}
+          type="primary"
+          style={{ marginBottom: '10px', marginRight: '10px' }}
           onClick={() => {
             uploadPic()
           }}>上传定制信息</Button>
-        <span className='text-red-500'>ps:上传图片过程中请勿关闭插件</span>
+        <span className='text-red-500'>ps:需在Temu定制商品内容页面获取数据,且上传图片过程中请勿关闭插件</span>
         <Table dataSource={dataSourceWithIndex}>
           <Table.Column title="图片" cell={pic_render} />
           <Table.Column title="定制SKU" cell={name_render} />

wxt.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   }),
   modules: ['@wxt-dev/module-react'],
   manifest: {
-    name: "LingWu Chrome Extension",
+    name: "LingWu Design Scraper",
     version: "1.0.0",
     description: "Get Temu's Design Picture",
     icons: {