Chrome扩展开发：将三个DOM值作为变量替换到URL中

Got it, let's put together a straightforward Chrome extension that handles both auto-loading (when you visit the second site) and manual trigger (via a popup button) to fill in those address details. Here's how to make it work:

Step 1: Set Up the Extension File Structure #

First, create a new folder for your extension with these 3 core files:

• manifest.json (the extension's configuration blueprint)
• content.js (handles all DOM interactions on both sites)
• popup.html (the clickable button interface for manual triggers)

Step 2: Configure the Manifest File #

Paste this into manifest.json—it sets up permissions, targets your specific sites, and links the popup interface:

{
  "manifest_version": 3,
  "name": "Address Auto-Filler",
  "version": "1.0",
  "description": "Saves address details from your first site and fills them into the second",
  "permissions": ["storage", "activeTab", "scripting"],
  "content_scripts": [
    {
      "matches": ["https://your-first-site-url.com/*"], // Replace with your first site's actual URL
      "js": ["content.js"]
    },
    {
      "matches": ["https://your-second-site-url.com/*"], // Replace with your second site's actual URL
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png", // Optional: add small icons if you want a polished look
      "48": "icon48.png"
    }
  }
}

Step 3: Write the Content Script #

This script will save data from your first site and fill it into the second. Be sure to update the CSS selectors to match your actual input elements:

// content.js
// Define selectors for your first site's input fields
const site1Fields = {
  zip: '#customer-zip', // Replace with your first site's zip input selector
  streetNumber: '#customer-street-number', // Replace with street number input selector
  numberSuffix: '#customer-suffix' // Replace with suffix input selector (if applicable)
};

// Define selectors for your second site's input fields
const site2Fields = {
  zip: '#site2-zip-input', // Replace with second site's zip input selector
  streetNumber: '#site2-street-number', // Replace with street number input selector
  numberSuffix: '#site2-suffix' // Replace with suffix input selector (if applicable)
};

// Save address data from the first site when the page loads
if (window.location.href.includes('your-first-site-url.com')) {
  // Wait for the page to fully load elements (adjust timeout if needed)
  setTimeout(() => {
    const addressData = {
      zip: document.querySelector(site1Fields.zip)?.value,
      streetNumber: document.querySelector(site1Fields.streetNumber)?.value,
      numberSuffix: document.querySelector(site1Fields.numberSuffix)?.value
    };
    // Store data in Chrome's local storage
    chrome.storage.local.set({ addressData }, () => {
      console.log('Address details saved successfully!');
    });
  }, 1000);
}

// Auto-fill the second site when you visit it
if (window.location.href.includes('your-second-site-url.com')) {
  chrome.storage.local.get('addressData', (result) => {
    const savedData = result.addressData;
    if (savedData) {
      // Populate each input with saved values
      document.querySelector(site2Fields.zip)?.value = savedData.zip;
      document.querySelector(site2Fields.streetNumber)?.value = savedData.streetNumber;
      document.querySelector(site2Fields.numberSuffix)?.value = savedData.numberSuffix;
    }
  });
}

// Manual fill function (triggered by the popup button)
window.triggerFill = () => {
  chrome.storage.local.get('addressData', (result) => {
    const savedData = result.addressData;
    if (savedData) {
      document.querySelector(site2Fields.zip)?.value = savedData.zip;
      document.querySelector(site2Fields.streetNumber)?.value = savedData.streetNumber;
      document.querySelector(site2Fields.numberSuffix)?.value = savedData.numberSuffix;
    } else {
      alert('No address data saved yet! Visit your first site to capture details first.');
    }
  });
};

Step 4: Create the Popup Button #

This gives you a manual control option if auto-fill doesn't fire or you want to trigger it on demand:

<!-- popup.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      padding: 10px 20px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      border-radius: 4px;
      background-color: #4285F4;
      color: white;
      margin: 8px;
    }
  </style>
</head>
<body>
  <button id="fillButton">Fill Address Details</button>
  <script>
    document.getElementById('fillButton').addEventListener('click', () => {
      // Run the fill function in the active tab
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.scripting.executeScript({
          target: {tabId: tabs[0].id},
          function: window.triggerFill
        });
      });
      window.close();
    });
  </script>
</body>
</html>

Step 5: Load the Extension in Chrome #

1. Open Chrome and navigate to chrome://extensions/
2. Toggle "Developer mode" on (top-right corner)
3. Click "Load unpacked" and select your extension folder
4. Test it out: Visit your first site to let the data save, then head to your second site—either it auto-fills, or click the extension icon and hit the button!

Quick Tips: #

• To find the correct CSS selectors for your inputs, right-click the input element and select "Inspect"—copy the ID or write a custom selector.
• If your first site's elements load slowly, replace the setTimeout with a DOMContentLoaded event listener for more reliability.
• If you don't want auto-fill on the second site, simply remove that section of the content.js code—you'll still have the manual button trigger.

内容的提问来源于stack exchange，提问作者Lou van K.