需求：创建可提取3条Xpath生成带参URL的Bookmarklet

Hey there! I totally get wanting to cut down on repetitive work with a bookmarklet—you don’t need to be a pro coder to make this work. Let’s put together a simple, customizable tool that pulls 3 pieces of data via XPath from the current page and builds a URL with them.

How It Works #

This bookmarklet will:

• Grab 3 values from the page using your specified XPaths
• Combine those values into a URL of your choice
• Open the new URL in a new tab (you can tweak this behavior if needed)

The Bookmarklet Code #

Copy this entire block of code—we’ll adjust the parts you need to customize right after:

javascript:(function(){
  // Step 1: Replace these 3 XPaths with your own
  const xpath1 = "//div[@class='product-title']/text()";
  const xpath2 = "//span[@id='product-id']/text()";
  const xpath3 = "//meta[@property='og:url']/@content";

  // Helper function to get text/attribute from XPath
  function getXPathValue(xpath) {
    const result = document.evaluate(xpath, document, null, XPathResult.STRING_TYPE, null);
    return result.stringValue.trim() || "NOT_FOUND";
  }

  // Fetch the 3 values from the page
  const val1 = getXPathValue(xpath1);
  const val2 = getXPathValue(xpath2);
  const val3 = getXPathValue(xpath3);

  // Step 2: Build your target URL here (use ${val1}, ${val2}, ${val3} to insert values)
  const targetUrl = `https://your-tool-url.com?item=${val1}&id=${val2}&source=${val3}`;

  // Open the assembled URL in a new tab
  window.open(targetUrl, "_blank");
})();

Step-by-Step Customization Guide #

You only need to modify two sections—no other code touches required:

1. Update the XPaths

   • Replace the strings inside xpath1, xpath2, xpath3 with your actual XPaths.
   • To find an XPath for any element on the page:
     • Right-click the element you want to extract → Inspect
     • In the DevTools Elements tab, right-click the highlighted element → Copy → Copy XPath
     • Paste that into the corresponding xpath variable

2. Adjust the Target URL

   • Look for the targetUrl line. Replace https://your-tool-url.com?item=${val1}&id=${val2}&source=${val3} with your desired URL structure.
   • Use ${val1}, ${val2}, ${val3} wherever you want to insert the extracted values. For example, if you need a URL like https://example.com/search?q=VALUE1&ref=VALUE3, just rewrite that line to match.

How to Add This to Your Browser #

• Right-click your browser’s bookmarks bar → Add Page (or Add Bookmark)
• Name it something descriptive (like "Extract & Build URL")
• Paste the entire modified code into the "URL" or "Location" field
• Save it! Now just click the bookmark when you’re on a page you want to process.

Quick Troubleshooting Tips #

• If a value shows up as "NOT_FOUND", double-check your XPath—sometimes elements have dynamic classes/IDs, so you might need a more flexible path (e.g., use //div[contains(@class, 'product-title')]/text() instead of exact matches)
• If the URL doesn’t open, make sure you didn’t accidentally delete any quotes or curly braces in the code

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