如何用Chrome的Stylish扩展修改输入框placeholder？若不可行用何种JS扩展？

Great question! Let's break this down step by step:

First off, no—Stylish can't handle this task. Here's why: Stylish is designed exclusively for applying custom CSS styles. While CSS lets you tweak the appearance of placeholder text (like color, font size, or spacing) using the ::placeholder pseudo-element, it has no ability to modify the actual text content stored in the placeholder HTML attribute. Changing that requires JavaScript to directly manipulate the DOM.

To modify the placeholder text, you'll need a user script manager extension. The most reliable options are:

• Tampermonkey: The most widely used manager, with an intuitive interface and robust features for running custom scripts.
• Violentmonkey: A lightweight, open-source alternative that works identically for basic script tasks.

Let's walk through creating a script to update that placeholder:

1. Install Tampermonkey from the Chrome Web Store.
2. Click the Tampermonkey icon in your toolbar, then select "Create a new script".
3. Replace the default template with this code:

// ==UserScript==
// @name         Custom Search Placeholder
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Replace the default search box placeholder text
// @author       Your Name
// @match        https://your-target-site.com/*  // Replace with the actual site URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to update the placeholder text
    function setCustomPlaceholder() {
        // Target the input using its aria-label (more stable than dynamic class names)
        const searchInput = document.querySelector('input[aria-label="Search box. Find messages, documents, photos or people"]');
        if (searchInput) {
            searchInput.placeholder = "Search...";
        }
    }

    // Run once when the initial DOM is loaded
    document.addEventListener('DOMContentLoaded', setCustomPlaceholder);

    // Optional: Handle dynamically loaded content (if the input appears after page load)
    const observer = new MutationObserver(() => {
        setCustomPlaceholder();
    });

    observer.observe(document.body, { childList: true, subtree: true });
})();

4. Replace https://your-target-site.com/* with the actual URL of the website where this search box exists (e.g., https://www.example.com/*).
5. Save the script (Ctrl+S or Cmd+S).

Key Details: #

• We use document.querySelector with the aria-label attribute to target the input—this is more reliable than class names, which often change when sites update their design.
• The DOMContentLoaded event ensures the script runs once the initial page content is ready.
• The MutationObserver watches for changes to the DOM, which is useful if the search box loads dynamically (e.g., after an AJAX call or user action).

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