Chrome扩展给textarea赋值报错Cannot set properties of null 问题咨询

可能的故障原因 #

• 目标站点元素封装在Shadow DOM中：Upwork、PeoplePerHour这类站点大多用React等前端框架开发，会把表单组件封装在Shadow Root里隔离样式和逻辑。Content Script默认的执行上下文是顶层document，直接调用document.getElementById拿不到Shadow DOM内部的元素，返回null就会触发对应报错。你在控制台直接执行代码能成功，是因为Chrome控制台会默认匹配当前选中元素的所在上下文，如果你之前选中过目标textarea，控制台会自动切换到对应Shadow Root的执行域，所以能正常查询到元素。
• 元素ID是动态生成/延迟渲染的：部分站点的表单元素ID会在用户触发展开编辑框、路由跳转完成后才生成，或者ID带有随机后缀，你写死的coverLetter和实际渲染的ID不匹配，导致查询结果为空。
• 单页应用动态加载未触发Content Script重执行：这两个站点都是单页应用，路由跳转、表单加载不会触发页面全量刷新，你调用chrome.tabs.sendMessage的时候，目标textarea还没渲染到DOM树里，自然拿不到元素。
• 站点拦截原生DOM操作：部分招聘平台为了防爬虫、防自动填充，会重写getElementById等原生方法，或者给表单元素加了多层封装，导致Content Script的DOM操作被拦截。

对应修复方案 #

你当前的background.js逻辑没有问题，故障点都在Content Script的DOM查询和赋值逻辑里，按以下步骤修改即可：

1. 适配Shadow DOM场景，编写递归查询逻辑，穿透Shadow Root查找元素：

// Content Script 消息监听逻辑示例
chrome.runtime.onMessage.addListener((request) => {
  // 递归遍历Shadow DOM查找元素
  function queryElementAcrossShadow(selector) {
    function traverse(root) {
      const target = root.querySelector(selector);
      if (target) return target;
      for (const child of root.children) {
        if (child.shadowRoot) {
          const found = traverse(child.shadowRoot);
          if (found) return found;
        }
      }
      return null;
    }
    return traverse(document.body);
  }

  // 不要只用ID查询，加备用选择器适配动态ID场景
  const textarea = queryElementAcrossShadow('#coverLetter, textarea[name*="coverLetter"], .cover-letter-input') || document.getElementById('coverLetter');
  if (!textarea) return;

  // 赋值后手动触发input事件，让前端框架感知到值变更
  textarea.value = request.text;
  textarea.dispatchEvent(new Event('input', { bubbles: true }));
})

2. 如果是动态渲染的场景，可以加元素等待逻辑，避免查询时元素还未加载：

function waitForTargetElement(timeout = 3000) {
  return new Promise((resolve) => {
    const timer = setInterval(() => {
      const el = queryElementAcrossShadow('#coverLetter, textarea[name*="coverLetter"], .cover-letter-input');
      if (el) {
        clearInterval(timer);
        resolve(el);
      }
    }, 100);
    setTimeout(() => clearInterval(timer), timeout);
  })
}
// 收到消息后先等待元素加载完成再赋值
waitForTargetElement().then(el => {
  el.value = request.text;
  el.dispatchEvent(new Event('input', { bubbles: true }));
})

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