Chrome扩展JS本地运行正常，开发者模式加载未打包版后值不更新

该故障并非由Chrome开发者模式下加载未打包扩展本身导致，核心触发原因是Chrome扩展强制生效的内容安全策略（CSP）拦截了你的动态逻辑执行。你本地直接打开HTML文件测试时，不受扩展场景下的严格CSP约束，因此功能运行正常；加载为扩展后，所有内联脚本执行行为被规则阻断，动态更新逻辑从未被触发，因此页面始终停留在初始默认静态值。

具体被CSP拦截的失效点 #

• 标签内联事件绑定：<body onload=display_ct()>、提交按钮上的onclick="getInput()"这类直接写在标签属性里的JS触发逻辑，完全符合扩展默认CSP的禁止规则（扩展默认CSP为script-src 'self'，不允许任何内联脚本字符串执行），触发过程会被浏览器直接拦截。
• 定时器的字符串回调写法：display_c()中setTimeout('display_ct()', refresh)的传参形式，本质是将字符串转为可执行代码，属于CSP明确禁止的eval类行为，会直接失效。
• 外部CDN资源加载：页面中引入的Google字体、Font Awesome样式表的CDN链接，在默认扩展CSP下属于受限资源，加载失败产生的控制台报错，也可能连带阻断后续JS执行流程。

修复方案 #

1. 移除HTML中所有内联事件绑定
   把带onload属性的body标签修改为普通<body>标签，同时删掉提交按钮上的onclick="getInput()"属性，所有交互逻辑全部移到独立的popup.js中通过事件监听实现，完全规避内联脚本拦截规则。
2. 修正JS中的违规写法
   把setTimeout传字符串的写法替换为函数引用形式，避免触发eval类拦截。修正后的核心JS逻辑参考：

   // 实时时间刷新逻辑
   function display_ct() {
     const now = new Date();
     document.querySelector('.currentTime').innerText = now.toLocaleString();
     // 间隔1秒后再次刷新时间
     setTimeout(display_ct, 1000);
   }
   
   // 自定义时间提交逻辑
   function getInput() {
     const hrsVal = parseInt(document.getElementById("hours").value);
     const minVal = parseInt(document.getElementById("minutes").value);
     const secVal = parseInt(document.getElementById("seconds").value);
     const milVal = parseInt(document.getElementById("mlsec").value);
     
     if (hrsVal < 24 && hrsVal >=0 && minVal < 60 && minVal >=0 && secVal <60 && secVal >=0 && milVal < 1000 && milVal >=0) {
       document.querySelector('.setTime').innerText = `${hrsVal}:${minVal}:${secVal}:${milVal}`;
     }
   }
   
   // 页面DOM加载完成后绑定所有事件，替代原HTML内联触发逻辑
   document.addEventListener('DOMContentLoaded', () => {
     // 启动实时时间自动刷新
     display_ct();
     // 给提交按钮绑定点击触发逻辑
     document.querySelector('input[type="submit"]').addEventListener('click', getInput);
   });
   

3. 本地化外部依赖资源
   把页面引入的Google字体、Font Awesome样式文件下载到扩展本地目录，用相对路径替换原CDN链接，避免跨域资源加载失败。

调试提示 #

右键点击扩展弹窗界面选择「检查」，打开控制台即可看到CSP拦截的明确报错，可快速定位剩余失效点。

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