Chrome Extension开发需求：添加UserID字段并实现按ID搜索（求定位代码）

需求说明 #

我正在学习Chrome扩展开发，具备基础开发能力。现需开发一款Chrome扩展，实现以下功能：

• 在网页表单的Account行与Calloff Status行之间添加UserID输入字段
• 修改或覆盖网站脚本，使点击搜索按钮后能按UserID获取搜索结果

仅需定位网页目标位置的代码示例，无需完整扩展代码。

目标网页表单结构 #

<table class="dt" cellspacing="1">
    <tbody><tr>
        <td class="dth">Calloff Number</td>
        <td class="dtc1">
            <input class="ipt" type="text" name="calloff_no" value="">
        </td>
    </tr>
    
    <tr>
        <td class="dth">Dates</td>
        <td class="dtc1">
            From
            <input class="ipt" type="text" name="datefrom" value="">
            &nbsp;to&nbsp;
            <input class="ipt" type="text" name="dateto" value="">
        </td>
    </tr>
    
    <tr>
        <td class="dth">Company</td>
        <td class="dtc1">
            <input class="ipt" type="text" name="company" value="">
        </td>
    </tr>
    
    <tr>
        <td class="dth">Account</td>
        <td class="dtc1">
            <input class="ipt" type="text" name="account" value="">
        </td>
    </tr>
    
    <tr>
        <td class="dth">Calloff Status</td>
        <td class="dtc1">
            <div><input type="checkbox" class="ipt" id="status_0" name="status" checked="checked" value="0"><label for="status_0">Pending</label></div><div><input type="checkbox" class="ipt" id="status_1" name="status" value="1"><label for="status_1">Picking in progress</label></div><div><input type="checkbox" class="ipt" id="status_2" name="status" value="2"><label for="status_2">Part shipped</label></div><div><input type="checkbox" class="ipt" id="status_3" name="status" value="3"><label for="status_3">Complete</label></div>
        </td>
    </tr>
</tbody></table>

定位并插入UserID字段的代码示例 #

以下代码可放在扩展的content script中，用于定位目标位置并插入新字段：

方法1：通过文本定位Account行后插入 #

// 找到包含"Account"文本的表格行
const accountRow = Array.from(document.querySelectorAll('table.dt tr')).find(tr => 
  tr.querySelector('.dth')?.textContent.trim() === 'Account'
);

if (accountRow) {
  // 构建UserID输入行的HTML结构
  const userIdRow = document.createElement('tr');
  userIdRow.innerHTML = `
    <td class="dth">UserID</td>
    <td class="dtc1">
      <input class="ipt" type="text" name="user_id" value="">
    </td>
  `;
  
  // 将新行插入到Account行的下一行
  accountRow.insertAdjacentElement('afterend', userIdRow);
}

方法2：通过表单字段name定位Account行 #

// 通过input的name属性找到Account输入框，再定位其父行
const accountInput = document.querySelector('input[name="account"]');
const accountRow = accountInput?.closest('tr');

if (accountRow) {
  const userIdRow = document.createElement('tr');
  userIdRow.innerHTML = `
    <td class="dth">UserID</td>
    <td class="dtc1">
      <input class="ipt" type="text" name="user_id" value="">
    </td>
  `;
  accountRow.insertAdjacentElement('afterend', userIdRow);
}

方法3：定位Calloff Status行并在其前插入 #

// 找到包含"Calloff Status"文本的表格行
const statusRow = Array.from(document.querySelectorAll('table.dt tr')).find(tr => 
  tr.querySelector('.dth')?.textContent.trim() === 'Calloff Status'
);

if (statusRow) {
  const userIdRow = document.createElement('tr');
  userIdRow.innerHTML = `
    <td class="dth">UserID</td>
    <td class="dtc1">
      <input class="ipt" type="text" name="user_id" value="">
    </td>
  `;
  // 将新行插入到Calloff Status行的上一行
  statusRow.insertAdjacentElement('beforebegin', userIdRow);
}

内容的提问来源于stack exchange，提问作者Karol Pągowski