Safari中CMD+F无法搜索列表内文本，求实现该功能的方案

Hey there! I totally get how frustrating it is when a core feature like Cmd+F doesn’t work as expected in your go-to browser—especially when you love Safari otherwise. Let’s break down some solutions for you:

Before jumping to workarounds, let’s rule out a simple configuration issue:

• Make sure the Develop menu is visible: Open Safari Preferences → Advanced → Check "Show Develop menu in menu bar"
• Go to Develop → Experimental Features
  • Enable Search in Shadow DOM: Many modern list components use Shadow DOM to encapsulate content, and Safari’s default Cmd+F often ignores this area. Turning this on might fix the native search directly.
  • If that doesn’t help, try resetting all Experimental Features to their default state—sometimes conflicting toggles cause weird behavior.

If native settings don’t resolve the issue, you can use a custom JavaScript function to search across all content (including list items):

1. Open Safari’s Developer Tools with Cmd+Option+I
2. Switch to the Console tab and paste this code:

function customFind(searchText) {
  const matches = [];
  
  // Recursively traverse DOM, including Shadow DOM
  const traverseDOM = node => {
    if (node.nodeType === Node.TEXT_NODE) {
      if (node.textContent.toLowerCase().includes(searchText.toLowerCase())) {
        matches.push(node.parentElement);
      }
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      // Handle Shadow DOM content
      if (node.shadowRoot) traverseDOM(node.shadowRoot);
      // Loop through child nodes
      node.childNodes.forEach(traverseDOM);
    }
  };
  
  traverseDOM(document.body);
  
  // Clear previous highlights
  document.querySelectorAll('.custom-search-highlight').forEach(el => {
    el.outerHTML = el.innerHTML;
  });
  
  // Highlight all matches
  matches.forEach(element => {
    const highlightSpan = document.createElement('span');
    highlightSpan.className = 'custom-search-highlight';
    highlightSpan.style.cssText = 'background-color: #ffeb3b; color: #000; padding: 2px 4px; border-radius: 3px;';
    element.replaceWith(highlightSpan);
    highlightSpan.appendChild(element);
  });
  
  // Scroll to first match
  if (matches.length > 0) {
    matches[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
  }
  
  console.log(`Found ${matches.length} matches for "${searchText}"`);
}

3. Run the search by typing customFind("your text here") and hitting Enter.

To make this faster, save it as a bookmark: Create a new bookmark, name it "Custom Search", and paste the compressed code into the URL field (wrap it in javascript:(function(){/* code here */})();).

Want to trigger custom search with a keyboard shortcut? Build a quick Automator service:

1. Open Automator and create a new Quick Action
2. At the top, set "Workflow receives" to Text and "in" to Any application
3. Add a Run AppleScript action and replace the default code with:

on run {input, parameters}
  set searchQuery to item 1 of input
  tell application "Safari"
    if exists current tab of window 1 then
      do JavaScript "
        function customFind(searchText) {
          const matches = [];
          const traverseDOM = node => {
            if (node.nodeType === Node.TEXT_NODE) {
              if (node.textContent.toLowerCase().includes(searchText.toLowerCase())) {
                matches.push(node.parentElement);
              }
            } else if (node.nodeType === Node.ELEMENT_NODE) {
              if (node.shadowRoot) traverseDOM(node.shadowRoot);
              node.childNodes.forEach(traverseDOM);
            }
          };
          traverseDOM(document.body);
          
          document.querySelectorAll('.custom-search-highlight').forEach(el => {
            el.outerHTML = el.innerHTML;
          });
          
          matches.forEach(element => {
            const highlightSpan = document.createElement('span');
            highlightSpan.className = 'custom-search-highlight';
            highlightSpan.style.cssText = 'background-color: #ffeb3b; color: #000; padding: 2px 4px; border-radius: 3px;';
            element.replaceWith(highlightSpan);
            highlightSpan.appendChild(element);
          });
          
          if (matches.length > 0) {
            matches[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
          }
        }
        customFind('" & searchQuery & "');
      " in current tab of window 1
    end if
  end tell
  return input
end run

4. Save it as "Safari Custom Search"
5. Go to System Settings → Keyboard → Shortcuts → Services, find your new service, and assign a shortcut like Cmd+Shift+F.

Now you can select text or type a query, hit your shortcut, and Safari will search and highlight all matches—including those in lists.

If you want a more polished, native-feeling solution, build a simple Safari App Extension:

1. Open Xcode and create a new project with the Safari App Extension template
2. In SafariExtensionHandler.swift, implement logic to receive search input and inject the custom JavaScript function (similar to the console code)
3. Configure the extension’s Info.plist to allow access to all websites
4. Package and install the extension—you’ll get a toolbar button or menu option to trigger your custom search, with full integration into Safari.

This requires basic Swift knowledge but gives you the most seamless experience.

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