Chrome浏览器扩展开发：如何实现多站点自动填充？

当前你的扩展仅通过硬编码name属性实现单站点填充，要适配多站点，核心是构建灵活的字段匹配规则体系，通过多维度匹配条件覆盖不同站点的输入框命名习惯。以下是具体实现方案：

一、核心思路 #

放弃硬编码单个name值，转为为每个数据字段（如姓名、邮箱、密码）定义多维度匹配规则，规则可包含：

• 输入框的type属性（如email、password）
• name属性中的关键词（如firstname、fname）
• placeholder中的关键词（如“名字”、“邮箱”）
• id属性中的关键词（如lastname、lname）
  通过组合这些条件，实现对不同站点输入框的精准匹配。

二、修改内容脚本（contentscript.js） #

将原硬编码判断替换为基于规则库的动态匹配逻辑：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if(request.type === "autofill"){
    // 可扩展的字段匹配规则库，支持新增字段或匹配条件
    const fieldRules = [
      {
        dataKey: 'firstname', // 对应popup传入的数据键名
        matchers: [
          { type: 'text', nameIncludes: ['firstname', 'fname', 'given-name', 'user[name]'] },
          { type: 'text', placeholderIncludes: ['first name', 'given name', '名', '名字'] },
          { type: 'text', idIncludes: ['firstname', 'fname'] }
        ]
      },
      {
        dataKey: 'email',
        matchers: [
          { type: 'email' },
          { type: 'text', nameIncludes: ['email', 'mail', 'user[email]', 'login'] },
          { type: 'text', placeholderIncludes: ['email', '邮箱', '登录邮箱'] }
        ]
      },
      {
        dataKey: 'pwd',
        matchers: [
          { type: 'password' },
          { type: 'text', nameIncludes: ['password', 'pwd', 'user[password]', 'pass'] },
          { type: 'text', placeholderIncludes: ['password', '密码', '登录密码'] }
        ]
      },
      {
        dataKey: 'lastname',
        matchers: [
          { type: 'text', nameIncludes: ['lastname', 'lname', 'family-name'] },
          { type: 'text', placeholderIncludes: ['last name', 'family name', '姓', '姓氏'] },
          { type: 'text', idIncludes: ['lastname', 'lname'] }
        ]
      },
      // 可继续添加其他字段（如middlename、birthdate等）的匹配规则
    ];

    const inputFields = document.getElementsByTagName('input');
    // 遍历所有输入框
    for(let i = 0; i < inputFields.length; i++){
      const input = inputFields[i];
      // 遍历规则库，寻找匹配的字段
      for(const rule of fieldRules){
        const fillValue = request.data[rule.dataKey];
        if(!fillValue) continue; // 无数据则跳过填充

        // 检查当前输入框是否匹配该规则的任意一个匹配器
        const isMatch = rule.matchers.some(matcher => {
          // 匹配type属性
          if(matcher.type && input.type !== matcher.type) return false;
          // 匹配name包含指定关键词
          if(matcher.nameIncludes && input.name){
            return matcher.nameIncludes.some(keyword => 
              input.name.toLowerCase().includes(keyword.toLowerCase())
            );
          }
          // 匹配placeholder包含指定关键词
          if(matcher.placeholderIncludes && input.placeholder){
            return matcher.placeholderIncludes.some(keyword => 
              input.placeholder.toLowerCase().includes(keyword.toLowerCase())
            );
          }
          // 匹配id包含指定关键词
          if(matcher.idIncludes && input.id){
            return matcher.idIncludes.some(keyword => 
              input.id.toLowerCase().includes(keyword.toLowerCase())
            );
          }
          // 无额外匹配条件时默认匹配（如仅指定type的情况）
          return true;
        });

        if(isMatch){
          input.value = fillValue;
          break; // 匹配成功后停止检查其他规则，避免重复填充
        }
      }
    }

    sendResponse({success: true});
  }
});

三、进阶优化：动态管理规则（可选） #

如果需要支持用户自定义站点规则，可将规则库存储到Chrome本地存储中，实现无需更新扩展即可修改规则：

1. 更新manifest.json #

添加后台脚本权限：

{
  "manifest_version": 3,
  // ... 其他原有配置
  "background": {
    "service_worker": "background.js"
  }
}

2. 添加background.js初始化规则 #

// 扩展安装时初始化默认规则
chrome.runtime.onInstalled.addListener(() => {
  const defaultRules = [
    // 上述fieldRules数组内容
  ];
  chrome.storage.local.set({fieldRules: defaultRules});
});

3. 修改contentscript.js从存储读取规则 #

chrome.runtime.onMessage.addListener(async function(request, sender, sendResponse){
  if(request.type === "autofill"){
    // 从本地存储获取规则库
    const {fieldRules} = await chrome.storage.local.get('fieldRules');
    if(!fieldRules){
      sendResponse({success: false, error: '未找到字段匹配规则'});
      return;
    }

    // 后续匹配逻辑与之前一致，使用fieldRules变量即可
    const inputFields = document.getElementsByTagName('input');
    // ... 遍历输入框和规则
  }
});

四、总结 #

通过多维度匹配规则替代硬编码，可快速适配绝大多数站点的输入框。规则库可根据需求随时扩展，进阶方案还支持用户自定义规则，进一步提升扩展的灵活性和实用性。

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