Chrome扩展中Content Script无法正常工作的排查请求

问题概况 #

测试一个小型Chrome扩展，包含background.js与content-script.js，构建产物存在content-script.js但完全无输出，已确认manifest为V3且Content Script配置正确，需让content-script正常工作并与网页交互。

附manifest.json配置 #

{"manifest_version": 3,"name": "Sample Extension","version": "0.1.0","background": {"service_worker": "background.js"},"icons": {"16": "./icons/icon-16x16.png","36": "./icons/icon-36x36.png","48": "./icons/icon-48x48.png","120": "./icons/icon-120x120.png"},"content_scripts": [{"matches": ["<all_urls>"],"js": ["content-script.js"]}],"web_accessible_resources": [{"resources": ["inject-script.js"],"matches": ["<all_urls>"]}],"action": {"default_popup": "popup.html","default_title": "PerfWatch"},"permissions": ["tabs","activeTab","background"]}

排查与修复步骤 #

• 验证content-script基础代码
  在content-script.js开头添加测试代码：console.log('Content Script 已加载');，检查文件是否存在语法错误，确保构建后文件未被篡改。

• 打开正确的控制台查看日志
  Content Script的日志不会出现在扩展后台控制台，需打开目标网页的开发者工具控制台（F12），并在控制台顶部的上下文菜单中选择当前页面（而非Extension或Service Worker标签）。

• 确认路径与匹配规则有效性
  检查manifest中content_scripts的js路径是否与构建后的文件位置一致，比如若构建工具将文件输出到dist目录，需改为["dist/content-script.js"]。同时在普通HTTP/HTTPS页面（如百度）测试，避免chrome://等受限页面。

• 强制刷新扩展与页面
  在Chrome扩展管理页开启开发者模式，点击扩展卡片的"重新加载"按钮，再刷新测试页面，确保最新代码生效。

• 检查扩展网站访问权限
  右键扩展图标→管理扩展，确认"网站访问权限"设置为"在所有网站上"，避免权限限制导致content-script无法注入。

• 排查构建工具干扰
  若使用打包工具（Webpack/Vite），检查是否开启了移除console.log的压缩配置，或是否正确配置了content-script的打包入口，确保输出文件完整且路径正确。

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