Chrome扩展自动刷新

import React, { useState, useEffect } from 'react';

const App = () => {
  const [searchResults, setSearchResults] = useState([]);
  const [refreshInterval, setRefreshInterval] = useState(30000); // Default to 30 seconds

  useEffect(() => {
    const fetchData = async () => {
      // Simulate fetching search results
      const results = await fetchSearchResults();
      setSearchResults(results);
    };

    fetchData();
    const interval = setInterval(fetchData, refreshInterval);
    return () => clearInterval(interval);
  }, [refreshInterval]);

  const fetchSearchResults = async () => {
    // Simulate a network request
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          { id: 1, title: 'Result 1', description: 'Description of result 1' },
          { id: 2, title: 'Result 2', description: 'Description of result 2' },
          { id: 3, title: 'Result 3', description: 'Description of result 3' },
        ]);
      }, 1000);
    });
  };

  return (
    <div className='App bg-gray-100 min-h-screen p-8'>
      <div className='max-w-4xl mx-auto'>
        <h1 className='text-4xl font-bold text-gray-800 mb-8'>Auto Refresh Search Results</h1>
        <div className='bg-white rounded-lg shadow-lg p-6'>
          <div className='mb-6'>
            <label className='block text-gray-700 font-medium mb-2'>Refresh Interval (ms)</label>
            <input
              type='number'
              value={refreshInterval}
              onChange={(e) => setRefreshInterval(parseInt(e.target.value))}
              className='w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500'
            />
          </div>
          <div>
            {searchResults.map((result) => (
              <div key={result.id} className='mb-4 p-4 border border-gray-200 rounded-lg hover:bg-gray-50'>
                <h2 className='text-xl font-semibold text-gray-800'>{result.title}</h2>
                <p className='text-gray-600'>{result.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;