JS实现网页隐藏元素显示、谷歌搜索链接生成及脚本运行方法

Hey there! Let's tackle your three tasks one by one — I remember how confusing DOM manipulation felt when I started, so I'll keep this simple and actionable.

1. Display All type="hidden" Elements #

You have two common ways to "display" these elements, depending on what you need:

Option A: Make the hidden inputs visible on the page #

If you want to turn hidden fields into visible text inputs so users can see them directly, loop through each element and adjust its type and styling:

// Grab all hidden input elements
const hiddenInputs = document.querySelectorAll('input[type="hidden"]');

// Loop through and make them visible
hiddenInputs.forEach(input => {
  input.type = 'text';
  // Optional: Add styling to make them stand out
  input.style.border = '1px solid #ff4444';
  input.style.margin = '6px 0';
});

Option B: List hidden element details in a dedicated section #

If you just want to show a summary of all hidden elements (without modifying the original inputs), create a new container and populate it with their info:

// Create a container to hold the list
const hiddenElementList = document.createElement('div');
hiddenElementList.innerHTML = '<h3>All Hidden Elements:</h3>';
hiddenElementList.style.margin = '20px';
hiddenElementList.style.padding = '12px';
hiddenElementList.style.border = '1px solid #e0e0e0';

// Get all hidden inputs
const hiddenInputs = document.querySelectorAll('input[type="hidden"]');

// Add each element's details to the list
hiddenInputs.forEach((input, index) => {
  const listItem = document.createElement('p');
  listItem.textContent = `#${index + 1} | Name: ${input.name || 'Unnamed'}, Value: ${input.value}`;
  hiddenElementList.appendChild(listItem);
});

// Attach the list to the end of the page
document.body.appendChild(hiddenElementList);

2. Convert value="XXXXX" to Google Search Links #

For each hidden element, we'll create a clickable link that searches its value on Google. You can append these links right next to the original inputs or integrate them into the summary list:

Link next to hidden inputs #

const hiddenInputs = document.querySelectorAll('input[type="hidden"]');

hiddenInputs.forEach(input => {
  // Skip elements with empty values
  if (!input.value.trim()) return;

  // Build the Google search URL (encode the value to handle spaces/special chars)
  const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(input.value)}`;

  // Create the link element
  const searchLink = document.createElement('a');
  searchLink.href = searchUrl;
  searchLink.target = '_blank'; // Open in new tab
  searchLink.textContent = `Search "${input.value}" on Google`;
  searchLink.style.marginLeft = '10px';
  searchLink.style.color = '#1a0dab';

  // Insert the link right after the hidden input
  input.parentNode.insertBefore(searchLink, input.nextSibling);
});

Link in the summary list (from Option B above) #

Modify the list item code to include the link directly:

// Inside the forEach loop for the list
const listItem = document.createElement('p');
const searchLink = document.createElement('a');
searchLink.href = `https://www.google.com/search?q=${encodeURIComponent(input.value)}`;
searchLink.target = '_blank';
searchLink.textContent = input.value;

listItem.innerHTML = `#${index + 1} | Name: ${input.name || 'Unnamed'}, Value: `;
listItem.appendChild(searchLink);
hiddenElementList.appendChild(listItem);

3. Run This Script on a Specific Site with a Userscript Manager #

Tools like Tampermonkey (Chrome/Firefox) or Violentmonkey let you run custom JS on specific websites automatically. Here's how to set it up:

1. Install a userscript manager: Grab one from your browser's extension store (Tampermonkey is the most widely used).
2. Create a new script:
   • Click the manager's icon in your toolbar.
   • Select "Create a new script" (or similar option).
3. Add metadata and your code:
   • At the top, add a block to define which sites the script runs on. For example, to target https://example.com, use:

     // ==UserScript==
     // @name         Hidden Element Toolkit
     // @namespace    http://tampermonkey.net/
     // @version      0.1
     // @description  Show hidden elements and add Google search links
     // @author       You
     // @match        https://example.com/*
     // @grant        none
     // ==/UserScript==
     

   • Paste your combined DOM code inside an IIFE (to avoid polluting the global scope):

     (function() {
         'use strict';
     
         // Your combined code from sections 1 and 2 goes here
         const hiddenInputs = document.querySelectorAll('input[type="hidden"]');
     
         // Make inputs visible
         hiddenInputs.forEach(input => {
             input.type = 'text';
             input.style.border = '1px solid #ff4444';
         });
     
         // Add Google links
         hiddenInputs.forEach(input => {
             if (!input.value.trim()) return;
             const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(input.value)}`;
             const searchLink = document.createElement('a');
             searchLink.href = searchUrl;
             searchLink.target = '_blank';
             searchLink.textContent = `Search ${input.value}`;
             searchLink.style.marginLeft = '10px';
             input.parentNode.insertBefore(searchLink, input.nextSibling);
         });
     })();
     

4. Save the script: Press Ctrl+S (or Cmd+S on Mac) — the manager will automatically run it on any page matching the @match pattern.

To target multiple sites, add more @match lines, like:

// @match        https://example.com/*
// @match        https://another-site.org/*

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