Chrome扩展本地运行正常，从商店安装后失效问题排查

问题背景 #

本地加载扩展时，contentScript.js可正常打印页面标题与URL；但从Chrome网上应用店安装后，该功能失效。扩展完整功能仅针对医疗系统页面，日志功能可在任意页面测试。

相关配置与代码 #

Manifest配置：

{
   "manifest_version": 3,
   "name": "Bracelet",
   "version": "0.5.0",
   "description": "Bracelet Extension",
   "icons": {
     "16": "icons/icon_16.png",
     "32": "icons/icon_32.png",
     "48": "icons/icon_48.png",
     "128": "icons/icon_128.png"
   },
   "background": {
     "service_worker": "background.js"
   },
   "action": {
     "default_title": "Bracelet",
     "default_popup": "popup.html"
   },
   "permissions": ["storage"],
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "run_at": "document_idle",
       "js": ["contentScript.js"]
     }
   ]
}

contentScript.js代码：

const pageTitle = document.head.getElementsByTagName('title')[0].innerHTML;
console.log(`Page title is: '${pageTitle}' - ${window.location.href}`);

可能的原因及解决方案 #

1. 代码压缩/混淆导致DOM获取失败 #

Chrome网上应用店会自动对上传的扩展代码进行压缩混淆，原代码中document.head.getElementsByTagName('title')[0]的写法依赖title元素必须存在且挂载在head下，压缩过程可能出现语法变形，导致节点获取失败。

解决方案：
改用更健壮的document.title直接获取页面标题，同时添加错误捕获：

try {
  const pageTitle = document.title || '无标题';
  console.log(`Page title is: '${pageTitle}' - ${window.location.href}`);
} catch (err) {
  console.error('Content Script执行错误:', err);
}

2. 页面动态渲染与Content Script执行时机不匹配 #

虽然设置了run_at: document_idle，但部分SPA或动态渲染页面的标题是在document_idle之后才生成的，线上环境的页面加载节奏可能与本地不同，导致执行代码时title元素尚未渲染完成。

解决方案：
监听页面的DOMContentLoaded事件，或使用MutationObserver监听title变化：

// 方案1：等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  console.log(`Page title is: '${document.title}' - ${window.location.href}`);
});

// 方案2：监听title变化
const observer = new MutationObserver(() => {
  console.log(`Page title is: '${document.title}' - ${window.location.href}`);
  observer.disconnect(); // 仅打印一次
});
observer.observe(document.querySelector('title'), { childList: true });

3. 扩展权限生效延迟 #

商店安装的扩展可能需要刷新页面才能完成权限注入，若用户未刷新页面直接测试，会导致Content Script未成功注入目标页面。

解决方案：
提醒用户安装扩展后刷新测试页面，或在扩展的popup中添加“刷新页面”提示。

4. 查看扩展错误日志定位问题 #

开启Chrome开发者模式，进入chrome://extensions/页面，找到Bracelet扩展，点击“查看日志”，可直接获取Content Script的执行报错信息，精准定位问题。

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