Chrome扩展弹窗搜索跳转URL添加#符号问题求助

Hey there! I see you're stuck getting your Chrome extension's search box to generate that specific URL with a # right after main.action—let's sort this out together.

The Issue with Your Current Setup #

When using a standard HTML form submission, browsers treat # in the action attribute as a page anchor (for jumping to a section on the same page) instead of part of the target URL path. That's why manually tacking on + "#" didn't give you the result you wanted—it wasn't being interpreted as part of the external URL structure.

The Fix: Take Control with JavaScript #

Instead of letting the browser handle form submission automatically, we'll use JavaScript to build the exact URL you need and open it directly. Here's how to adjust your code:

Step 1: Update Your HTML Form

First, tweak your form to remove the hardcoded action, add IDs to elements for easy access, and set it up to let our script take over submission:

<form id="searchForm" target="_blank">
  <label>
    Search : 
    <input type="search" id="searchInput" name="searchQuery.search">
  </label>
  <button type="submit">Search website</button>
</form>

Step 2: Add the JavaScript Handler

Now, add a script that listens for the form's submit event, stops the default behavior, constructs your desired URL, and opens it:

// Grab references to the form and input field
const searchForm = document.getElementById('searchForm');
const searchInput = document.getElementById('searchInput');

// Listen for when the user submits the form
searchForm.addEventListener('submit', (e) => {
  // Stop the browser's default form submission
  e.preventDefault();
  
  // Get the search query and encode it (handles special characters like spaces)
  const searchQuery = encodeURIComponent(searchInput.value.trim());
  
  // Don't do anything if the input is empty
  if (!searchQuery) return;
  
  // Build the exact URL you need with the # in the right spot
  const targetUrl = `https://example.com/search/main.action#/search/doAdvancedSearch.action?searchQuery.search=${searchQuery}`;
  
  // Open the URL in a new tab
  window.open(targetUrl, '_blank');
  
  // Optional: Clear the input field after submission
  searchInput.value = '';
});

Why This Works #

• e.preventDefault() stops the browser from its default form submission flow, which was messing up the # placement.
• By manually constructing the URL, we have full control over where the # lives—right after main.action, exactly as you need it.
• encodeURIComponent() ensures any special characters in the search query are properly formatted for the URL, preventing broken requests.

Quick Note on Your Original Script #

Your initial script had a couple of hiccups (like listening for a non-existent return event, and trying to interact with elements on another page after opening it—browser security policies block that). The approach above is simpler, more reliable, and avoids those issues entirely.

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