Chrome扩展popup.html必须用外部JS、禁用内联脚本和事件，需DOMContentLoaded后绑定事件；尺寸上限宽800px，调试应右键选“审查弹出内容”；权限需在manifest中声明，刷新用chrome.runtime.reload()。
Chrome 扩展的弹窗页（popup.html）不是普通网页，它运行在受限上下文中：没有全局 window 对象、不支持内联脚本、无法直接访问 DOM 元素直到页面加载完成，且默认被 Content Security Policy（CSP）禁止执行字符串 eval 或内联事件处理器。
popup.html 必须用外部 JS，且不能写 onclick="..."
Manifest V3 下，popup.html 中任何内联 JavaScript（比如 <script>alert(1)</script>）或内联事件（如 <button onclick="doIt()"></button>）都会被浏览器静默拦截，并在控制台报错：Refused to execute inline script。这不是 bug，是 CSP 硬性限制。
必须把逻辑全部抽到外部 JS 文件中，并用 addEventListener 绑定事件：
-
popup.html只保留结构，例如：<body> <button id="fetchBtn">获取当前标签</button> <div id="result"></div> </body>
- 在同目录下新建
popup.js，并在popup.html底部引入：<script src="popup.js"></script>
-
popup.js中必须等 DOM 加载完再操作：document.addEventListener('DOMContentLoaded', () => { document.getElementById('fetchBtn').addEventListener('click', async () => { const [tab] = await chrome.tabs.query({ active: true, currentWindow: true }); document.getElementById('result').textContent = tab.url; }); });
popup 页面尺寸固定，超宽内容会自动加滚动条
Chrome 对弹窗尺寸有硬性上限：最大宽度 800px，高度无硬限但建议 ≤600px；超出部分不会被裁剪，而是触发原生滚动条——这点常被忽略，导致 UI 被误认为“显示不全”。
立即学习“前端免费学习笔记（深入）”；
如果你在 popup.html 里用了 flex 或 grid 布局，记得显式设置 overflow: hidden 或 max-height 控制视觉边界：
- 在
popup.css中加：body { margin: 0; max-width: 800px; } #result { max-height: 200px; overflow-y: auto; } - 不要依赖
window.innerWidth获取弹窗宽度——它返回的是整个浏览器窗口宽，不是 popup 容器宽 - 调试时右键弹窗 → “审查弹出内容”，在 Elements 面板里直接看
html根节点的 computed width，比猜更可靠
popup.js 无法直接调用 chrome.tabs.query？检查权限和 manifest 版本
常见报错：Uncaught TypeError: Cannot read properties of undefined (reading 'query')，表面是 chrome.tabs 未定义，实际原因通常是：
- manifest.json 中没声明
"permissions": ["tabs"]—— 即使只读取当前标签也必须声明 - 用了 Manifest V3 但误写成
"manifest_version": 2，而 V2 的chrome.tabs在 popup 中可用性不稳定 - 权限写对了，但没在
manifest.json的host_permissions（V3 新增字段）里加通配符（仅当需注入远程页面时才需要，popup 自身不需要） - 开发时忘了刷新扩展：修改
manifest.json后必须去chrome://extensions点击「重新加载」，否则新权限不生效
调试 popup 页面时 location.reload(true) 不起作用？换用 chrome.runtime.reload()
在 popup 的 DevTools 控制台执行 location.reload(true) 看似合理，但它只会重载当前 popup HTML，不重启 JS 上下文，也不清空闭包状态，容易掩盖内存泄漏或初始化逻辑错误。
真正有效的刷新方式是让整个扩展重载：
- 在 popup 控制台执行：
chrome.runtime.reload()
- 或者更彻底：去
chrome://extensions找到你的扩展，关掉「开发者模式」再打开，再点一次「重新加载」 - 注意：如果 popup 正在打开状态，
chrome.runtime.reload()会直接关闭它，这是正常行为——别以为失败了
最易被忽略的一点：popup 页面每次点击图标都会新建一个独立实例，它的 JS 上下文不共享，console.log 输出不会跨次累积，所以不要指望在多次点击后靠控制台日志“拼出”完整流程——得靠 chrome.storage.local 或 background service worker 做状态桥接。
