Chrome扩展中datetime-local输入框选值不显示和service worker有关吗

核心结论 #

• Chrome扩展的background service worker本身不会阻塞popup页面中datetime-local输入框的内容更新：二者运行在完全独立的执行上下文，service worker属于后台独立线程，popup页面属于浏览器普通页面渲染线程，不存在直接的调用阻塞关系。
• 二者本身也不存在原生的关联影响，出现你描述的现象，都是扩展内部的逻辑、配置导致的间接影响。

常见触发原因及排查方案 #

• 存储监听逻辑冲突：如果你的popup页面中监听了chrome.storage.onChanged事件，service worker执行数据库操作时会修改storage存储，触发popup的监听回调，如果回调逻辑中存在重置#date-el输入框值的代码，就会出现选完时间立刻被清空的现象，看起来像是输入不生效。
  排查方法：给输入框绑定input事件打印日志，确认值是否被二次修改：

  document.getElementById('date-el').addEventListener('input', e => {
    console.log('输入框最新值：', e.target.value)
  })
  

  如果日志中能输出正确的时间值，但输入框最终为空，即可确认是后续逻辑覆盖了输入值。
• popup页面未捕获异常：如果你的popup中存在和service worker通信的逻辑（比如chrome.runtime.sendMessage调用），通信相关代码存在未捕获的异常，会阻塞popup页面的JS线程，导致输入框的渲染更新逻辑无法执行。
  排查方法：右键点击扩展图标，选择「检查弹出内容」打开popup的开发者工具，复现选择时间的操作，查看Console面板是否有报错信息。
• manifest配置异常：检查manifest.json中是否配置了错误的上下文隔离、权限规则，比如给popup页面错误绑定了service worker的执行上下文，或者配置了全局的content script篡改了datetime-local组件的原生行为。

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