Chrome扩展开发：聚焦无ID有name表单字段及输入有ID无name字段

Alright, let's tackle your two specific form field manipulation tasks—one for Chrome extensions, another for the Sailor browser. I'll break down each scenario with actionable code snippets and explanations.

To implement this in a Chrome extension, you'll use a content script (since it runs directly in the context of the web page, allowing DOM manipulation). Here's how to set it up:

Step 1: Write the Content Script #

Create a file named content.js with the following code:

// Wait for the page's DOM to be fully loaded before running
document.addEventListener('DOMContentLoaded', () => {
  // Target all input/textarea/select elements that have a name but no id
  const targetFields = document.querySelectorAll(
    'input[name]:not([id]), textarea[name]:not([id]), select[name]:not([id])'
  );

  // Focus the first matching field (adjust this if you need to target a specific field)
  if (targetFields.length > 0) {
    targetFields[0].focus();
    console.log(`Focused on field with name: ${targetFields[0].name}`);
  } else {
    console.log('No fields found with a name attribute but no id');
  }
});

Step 2: Update Your Extension's Manifest #

Make sure your manifest.json includes the content script, specifying which websites it should run on (use *://*/* for all sites, or narrow it to specific domains):

{
  "manifest_version": 3,
  "name": "Field Focus Tool",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ]
}

For the Sailor browser, you have two easy options—running code directly in the developer console, or creating a user script for repeated use.

Option 1: Run Code in the Developer Console #

Open the Sailor browser's dev tools (usually F12 or Ctrl+Shift+I), go to the Console tab, and paste this code:

// Target all input/textarea/select elements that have an id but no name
const targetFields = document.querySelectorAll(
  'input[id]:not([name]), textarea[id]:not([name]), select[id]:not([name])'
);

// Input content to the first matching field (customize the value as needed)
if (targetFields.length > 0) {
  targetFields[0].value = "Your desired input text";
  // Trigger an input event to ensure the page recognizes the change (some sites require this)
  targetFields[0].dispatchEvent(new Event('input', { bubbles: true }));
  console.log(`Input content to field with id: ${targetFields[0].id}`);
} else {
  console.log('No fields found with an id attribute but no name');
}

Option 2: Create a User Script (for Repeated Use) #

If you want this to run automatically on specific sites, use a user script manager (most modern browsers like Sailor support tools like Tampermonkey). Create a new script with this code:

// ==UserScript==
// @name         Sailor: Fill ID-Only Form Fields
// @version      0.1
// @description  Automatically inputs content to form fields with id but no name
// @match        *://*/* // Adjust this to target specific sites
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  // Wait for the page to fully load
  window.addEventListener('load', () => {
    const targetFields = document.querySelectorAll(
      'input[id]:not([name]), textarea[id]:not([name]), select[id]:not([name])'
    );

    if (targetFields.length > 0) {
      // Customize your default input content here
      targetFields[0].value = "Your default input";
      targetFields[0].dispatchEvent(new Event('input', { bubbles: true }));
    }
  });
})();

Quick Customization Tips #

• To target a specific field instead of the first match, modify the selector. For example:
  • Chrome extension: input[name="username"]:not([id]) to focus the username field
  • Sailor browser: input[id="email"]:not([name]) to fill the email field
• If fields load dynamically (e.g., via AJAX), you might need to use a mutation observer instead of waiting for DOMContentLoaded/load.

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