|
|
@@ -0,0 +1,202 @@
|
|
|
+import React, { useState } from 'react';
|
|
|
+
|
|
|
+// 定义输入框信息类型
|
|
|
+interface InputInfo {
|
|
|
+ id: string;
|
|
|
+ name: string;
|
|
|
+ type: string;
|
|
|
+ value: string;
|
|
|
+ placeholder: string;
|
|
|
+}
|
|
|
+
|
|
|
+// 定义自动发送消息的配置
|
|
|
+interface AutoSendConfig {
|
|
|
+ inputSelector: string;
|
|
|
+ buttonSelector: string;
|
|
|
+ messages: string[];
|
|
|
+}
|
|
|
+
|
|
|
+export default function AutoOptions() {
|
|
|
+ const [inputs, setInputs] = useState<InputInfo[]>([]);
|
|
|
+ const [showInputs, setShowInputs] = useState(false);
|
|
|
+ const [autoSendConfig, setAutoSendConfig] = useState<AutoSendConfig>({
|
|
|
+ inputSelector: '.semi-input-textarea', // 设置默认输入框选择器
|
|
|
+ buttonSelector: '#flow-end-msg-send', // 设置默认按钮选择器
|
|
|
+ messages: Array.from({ length: 10 }, (_, i) => {
|
|
|
+ const num = i + 1;
|
|
|
+ return num === 1 ? ['0', num.toString()] : [`0${num - 1}`, num.toString()];
|
|
|
+ }).flat() // 生成 ["0", "1", "01", "2", "02", "3", ..., "09", "10"]
|
|
|
+ });
|
|
|
+ const [isAutoSending, setIsAutoSending] = useState(false);
|
|
|
+ const [autoSendResults, setAutoSendResults] = useState<any[]>([]);
|
|
|
+
|
|
|
+ // 自动发送消息
|
|
|
+ const autoSendMessages = async () => {
|
|
|
+ setIsAutoSending(true);
|
|
|
+ setAutoSendResults([]);
|
|
|
+
|
|
|
+ try {
|
|
|
+ const [tab] = await browser.tabs.query({ active: true, currentWindow: true });
|
|
|
+
|
|
|
+ if (tab.id) {
|
|
|
+ const response = await browser.tabs.sendMessage(tab.id, {
|
|
|
+ action: "autoSendMessages",
|
|
|
+ ...autoSendConfig
|
|
|
+ });
|
|
|
+
|
|
|
+ if (response.success) {
|
|
|
+ setAutoSendResults(response.results);
|
|
|
+ } else {
|
|
|
+ console.error('自动发送消息失败:', response.error);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('自动发送消息出错:', error);
|
|
|
+ } finally {
|
|
|
+ setIsAutoSending(false);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 更新自动发送配置
|
|
|
+ const updateAutoSendConfig = (field: keyof AutoSendConfig, value: string | string[]) => {
|
|
|
+ setAutoSendConfig(prev => ({
|
|
|
+ ...prev,
|
|
|
+ [field]: value
|
|
|
+ }));
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div>
|
|
|
+ <h1>页面分析工具</h1>
|
|
|
+
|
|
|
+ {/* 自动发送消息配置区域 */}
|
|
|
+ <div style={{ marginTop: '20px', padding: '10px', border: '1px solid #ccc', borderRadius: '4px' }}>
|
|
|
+ <h2>自动发送消息</h2>
|
|
|
+ <div style={{ marginBottom: '10px' }}>
|
|
|
+ <label>
|
|
|
+ 输入框选择器:
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ value={autoSendConfig.inputSelector}
|
|
|
+ onChange={(e) => updateAutoSendConfig('inputSelector', e.target.value)}
|
|
|
+ placeholder="例如: #message-input 或 .input-class"
|
|
|
+ style={{ width: '100%', padding: '5px', marginTop: '5px' }}
|
|
|
+ />
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div style={{ marginBottom: '10px' }}>
|
|
|
+ <label>
|
|
|
+ 发送按钮选择器:
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ value={autoSendConfig.buttonSelector}
|
|
|
+ onChange={(e) => updateAutoSendConfig('buttonSelector', e.target.value)}
|
|
|
+ placeholder="例如: #send-button 或 .send-btn"
|
|
|
+ style={{ width: '100%', padding: '5px', marginTop: '5px' }}
|
|
|
+ />
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div style={{ marginBottom: '10px' }}>
|
|
|
+ <label>
|
|
|
+ 消息列表 (每行一条):
|
|
|
+ <textarea
|
|
|
+ value={autoSendConfig.messages.join('\n')}
|
|
|
+ onChange={(e) => updateAutoSendConfig('messages', e.target.value.split('\n').filter(msg => msg.trim()))}
|
|
|
+ placeholder="每行输入一条消息"
|
|
|
+ rows={5}
|
|
|
+ style={{ width: '100%', padding: '5px', marginTop: '5px' }}
|
|
|
+ />
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <button
|
|
|
+ onClick={autoSendMessages}
|
|
|
+ disabled={isAutoSending || !autoSendConfig.inputSelector || !autoSendConfig.buttonSelector}
|
|
|
+ style={{
|
|
|
+ padding: '8px 16px',
|
|
|
+ backgroundColor: isAutoSending ? '#6c757d' : '#28a745',
|
|
|
+ color: 'white',
|
|
|
+ border: 'none',
|
|
|
+ borderRadius: '4px',
|
|
|
+ cursor: isAutoSending ? 'not-allowed' : 'pointer'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {isAutoSending ? '发送中...' : '开始自动发送'}
|
|
|
+ </button>
|
|
|
+
|
|
|
+ {/* 显示发送结果 */}
|
|
|
+ {autoSendResults.length > 0 && (
|
|
|
+ <div style={{ marginTop: '10px' }}>
|
|
|
+ <h3>发送结果:</h3>
|
|
|
+ <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
|
|
|
+ {autoSendResults.map((result, index) => (
|
|
|
+ <div
|
|
|
+ key={index}
|
|
|
+ style={{
|
|
|
+ padding: '5px',
|
|
|
+ marginBottom: '5px',
|
|
|
+ backgroundColor: result.status === 'sent' ? '#d4edda' : '#f8d7da',
|
|
|
+ borderRadius: '3px'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <span>[{new Date(result.timestamp).toLocaleTimeString()}] </span>
|
|
|
+ <span>消息: {result.message} - </span>
|
|
|
+ <span style={{ fontWeight: 'bold' }}>
|
|
|
+ {result.status === 'sent' ? '已发送' : '发送失败'}
|
|
|
+ </span>
|
|
|
+ {result.error && <span> (错误: {result.error})</span>}
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ {showInputs && (
|
|
|
+ <div style={{ marginTop: '20px' }}>
|
|
|
+ <h2>页面输入框 ({inputs.length} 个):</h2>
|
|
|
+ {inputs.length > 0 ? (
|
|
|
+ <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
|
|
|
+ {inputs.map((input, index) => (
|
|
|
+ <div
|
|
|
+ key={index}
|
|
|
+ style={{
|
|
|
+ padding: '10px',
|
|
|
+ border: '1px solid #eee',
|
|
|
+ marginBottom: '10px',
|
|
|
+ borderRadius: '4px'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <div><strong>ID:</strong> {input.id || '无'}</div>
|
|
|
+ <div><strong>Name:</strong> {input.name || '无'}</div>
|
|
|
+ <div><strong>Type:</strong> {input.type}</div>
|
|
|
+ <div><strong>Placeholder:</strong> {input.placeholder || '无'}</div>
|
|
|
+ <div><strong>Value:</strong> {input.value || '无'}</div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ) : (
|
|
|
+ <p>未找到输入框元素</p>
|
|
|
+ )}
|
|
|
+ <button
|
|
|
+ onClick={() => setShowInputs(false)}
|
|
|
+ style={{
|
|
|
+ padding: '8px 16px',
|
|
|
+ backgroundColor: '#6c757d',
|
|
|
+ color: 'white',
|
|
|
+ border: 'none',
|
|
|
+ borderRadius: '4px',
|
|
|
+ cursor: 'pointer'
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 隐藏输入框信息
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ </>
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
liqiuying