Chrome扩展MV3开发触发Cannot read property 'id' of undefined错误求助

报错原因及修复方案 #

1. 核心报错原因 #

你的TypeError: Cannot read property 'id' of undefined是数组索引越界导致：

• 你写的while循环while (tabs[i]) {i++}执行结束时，i的值等于tabs数组的总长度，而数组索引从0开始计数，tabs[i]此时是undefined，访问.id自然触发报错。
• 这套逻辑也无法正确获取最后打开的标签页，Chrome的tabs.query返回的标签列表默认按激活时间排序，最后激活/最新打开的标签就是数组的最后一个元素，不需要遍历计数。

2. 其他存在的问题 #

• chrome.tabs.update的参数拼写错误：highlated应为highlighted
• Manifest V3的后台配置字段错误：background.script要改成background.service_worker，MV3已不支持普通后台页脚本，统一使用Service Worker
• Service Worker环境不存在document对象，你写的document.getElementById('info')会额外触发报错，这段操作DOM的逻辑要放到popup页面的独立脚本里执行，不能写在background.js中
• 你当前没有声明codeToExecute函数，执行脚本前需要先定义该函数的逻辑

3. 修复后的代码 #

background.js

// 先定义要注入页面执行的函数
function codeToExecute() {
  // 此处填写你要在页面侧执行的逻辑
  console.log('注入脚本执行成功')
}

function executeScript(){
  chrome.tabs.query({}, function(tabs){
    // 直接取数组最后一项，即为最新打开的标签
    const lastTab = tabs[tabs.length - 1]
    chrome.tabs.update(lastTab.id, {highlighted: true});
    chrome.scripting.executeScript({
      target:{tabId: lastTab.id},
      function: codeToExecute,
    });
  })
}
setTimeout(executeScript, 500);

manifest.json 修正部分

{
  "background": {
    "service_worker": "files/background.js"
  }
}

其余manifest配置保留原有内容即可。如果需要把标签数量同步到popup页面，可通过chrome.storage.local存值，popup加载时主动读取即可，不要在background中操作DOM。

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