如何用JSON和Ajax调用Phishtank数据库开发Chrome钓鱼网站检测扩展

阿华AIGC实验室

2026-5-29

Great question! Building a Chrome extension to flag phishing sites using Phishtank's database is a practical security tool. Let's walk through how to put this together with JSON and Ajax (we'll use the modern Fetch API, which is cleaner than traditional XMLHttpRequest).

1. Start with the Chrome Extension Manifest

Every Chrome extension needs a manifest.json file to define permissions, scripts, and basic details. Here's a minimal working example:

{
  "manifest_version": 3,
  "name": "Phishtank Site Checker",
  "version": "1.0",
  "description": "Checks the current site against Phishtank's phishing database",
  "permissions": ["activeTab", "notifications"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "48": "icon48.png"
    }
  },
  "host_permissions": ["https://checkurl.phishtank.com/*"]
}

Note: Replace the icon paths with your own, or skip them for testing.

2. Phishtank API Prep

First, you'll need to register for a free Phishtank API key (they require this for API access). Once you have your key, you'll use their checkurl endpoint to send URL checks.

The API accepts a POST request with parameters:

url: The website URL to check
format: Set to json for JSON responses
app_key: Your Phishtank API key

3. JavaScript Code with Ajax (Fetch API)

Let's create a popup interface where users can trigger the check, and a script to handle the API call.

First, create popup.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 250px; padding: 15px; }
    #checkBtn { padding: 8px; width: 100%; cursor: pointer; }
    #result { margin-top: 15px; padding: 10px; border-radius: 4px; }
  </style>
</head>
<body>
  <button id="checkBtn">Check Current Site</button>
  <div id="result"></div>
  <script src="popup.js"></script>
</body>
</html>

Now the popup.js file with the Ajax/Fetch logic:

document.getElementById('checkBtn').addEventListener('click', () => {
  // Get the current active tab's URL
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const currentUrl = tabs[0].url;
    const resultDiv = document.getElementById('result');
    resultDiv.textContent = 'Checking...';
    
    // Replace YOUR_API_KEY with your actual Phishtank key
    const apiKey = 'YOUR_API_KEY';
    const formData = new FormData();
    formData.append('url', currentUrl);
    formData.append('format', 'json');
    formData.append('app_key', apiKey);

    // Send Ajax request using Fetch API
    fetch('https://checkurl.phishtank.com/checkurl/', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      if (!response.ok) throw new Error('API request failed');
      return response.json();
    })
    .then(data => {
      // Parse the JSON response
      const isPhish = data.results[0].valid === 'true';
      const phishDetails = data.results[0].phish_detail_page;

      if (isPhish) {
        resultDiv.textContent = '⚠️ WARNING: This is a known phishing site!';
        resultDiv.style.backgroundColor = '#ffebee';
        // Optional: Show Chrome notification
        chrome.notifications.create({
          type: 'basic',
          iconUrl: 'icon48.png',
          title: 'Phishing Site Detected',
          message: `The site ${currentUrl} is flagged as phishing.`
        });
      } else {
        resultDiv.textContent = '✅ This site is not flagged as phishing.';
        resultDiv.style.backgroundColor = '#e8f5e9';
      }
    })
    .catch(error => {
      resultDiv.textContent = `❌ Error: ${error.message}`;
      resultDiv.style.backgroundColor = '#ffebee';
    });
  });
});

4. Key Notes to Keep in Mind

Replace YOUR_API_KEY: Don't forget to swap this with the key you get from Phishtank's registration page.
API Rate Limits: Phishtank has rate limits for free API keys, so avoid spamming requests. Consider adding a cache to store recent checks.
Manifest V3: This example uses Manifest V3 (the latest standard for Chrome extensions). If you need V2 for compatibility, adjust the manifest structure (replace host_permissions with permissions containing the API URL).
Error Handling: The code includes basic error handling, but you can expand it to handle cases like invalid URLs or API timeouts.

内容的提问来源于stack exchange，提问作者Neron