Chrome扩展Manifest V3：如何监听网页textarea聚焦并实现交互？

问题根源 #

• Background Script（Service Worker）运行在无DOM的独立环境中，无法直接调用document对象，你在background.js里执行document.querySelector必然触发document is not defined错误。
• 网页内的textarea聚焦事件属于DOM事件，必须由Content Script监听，而非Background Script。

修正后的完整实现方案 #

1. 更新Manifest配置 #

在现有manifest.json中添加content_scripts字段，让扩展自动向所有网页注入Content Script：

{
  "name": "Chrome extension",
  "version": "1.0.0",
  "description": "",
  "manifest_version": 3,
  "author": "Ayush kumar",
  "action": {
    "default_popup": "index.html",
    "default_title": "Chrome extension"
  },
  "background": {
    "service_worker": "background.js"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://cdn.auth0.com/js/auth0-spa-js/1.2/auth0-spa-js.production.js;"
  },
  "permissions": ["storage", "cookies", "scripting", "activeTab"],
  "host_permissions": ["http://*/*", "https://*/*"],
  // 新增内容
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content.js"]
    }
  ]
}

2. 编写Content Script（content.js） #

Content Script可以直接访问网页DOM，负责监听textarea聚焦并更新内容：

// 全局监听聚焦事件，通过事件目标判断是否为textarea
document.addEventListener('focus', (event) => {
  if (event.target.tagName === 'TEXTAREA') {
    // 用innerHTML更新文本（若要处理输入框值，推荐用event.target.value）
    event.target.innerHTML = '聚焦后自动更新的文本内容';
    
    // 若需要从Background获取数据再更新，可添加以下通信逻辑
    // chrome.runtime.sendMessage({ type: 'REQUEST_UPDATE_TEXT' }, (response) => {
    //   event.target.innerHTML = response.text;
    // });
  }
}, true); // 捕获阶段监听，确保不会被网页事件阻止

3. Background Script（background.js）（可选） #

仅当需要从Background获取数据时才编写此逻辑，否则可留空：

// 监听Content Script的消息请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'REQUEST_UPDATE_TEXT') {
    // 模拟返回后台数据
    sendResponse({ text: '从Background服务获取的更新文本' });
  }
});

错误原因解析 #

• Uncaught ReferenceError: document is not defined：Background Service Worker是无DOM的后台进程，不存在document对象，直接调用DOM相关API必然报错。
• TypeError: Cannot read properties of undefined (reading 'value')：由于在无DOM环境中无法获取textarea元素，后续访问其value属性自然触发undefined错误。

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