Chrome扩展开发：chrome.tabs.query调用报错排查求助

报错原因分析 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'query')表明当前脚本环境无法访问chrome.tabs API，核心原因是权限配置错误或脚本运行上下文不符合要求。

具体修复步骤 #

1. 修正Manifest文件的权限缩进 #

你的manifest.json中permissions字段的缩进错误，它应该与action、name等字段同级，而非嵌套在action内。错误的缩进会导致浏览器无法识别tabs权限，进而禁止脚本访问chrome.tabs API。

修正后的Manifest配置：

{
    "manifest_version": 3,
    "version": "1.0",
    "name": "Leads tracker",
    "action": {
        "default_popup": "index.html",
        "default_icon": "icon.png"
    },
    "permissions": [
        "tabs"
    ]
}

2. 确保脚本在扩展上下文运行 #

Manifest V3 默认禁止内联JavaScript（inline script），如果你的脚本是直接写在popup的HTML中（如<script>/* 代码 */</script>），会被浏览器拦截，且无法访问Chrome扩展API。

修复方式：
将JavaScript代码存入独立文件（如script.js），然后在popup的index.html中通过外部引入加载：

<button id="tab-el">SAVE TAB</button>
<script src="script.js"></script>

3. 确认DOM元素正确获取 #

确保脚本中已正确获取按钮元素，在script.js开头添加：

const tabEl = document.getElementById('tab-el');

4. 重新加载扩展使配置生效 #

修改Manifest文件后，打开Chrome扩展管理页面（chrome://extensions/），找到你的扩展并点击「重新加载」按钮，确保新的权限配置和脚本变更生效。

验证修复 #

完成上述步骤后，点击扩展popup中的「SAVE TAB」按钮，chrome.tabs.query即可正常调用，获取当前激活标签页的URL并完成存储逻辑。

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