Chrome 109中Web应用拖拽功能失效，报读取null的name属性错误

你的Web应用表格拖拽功能在Chrome 109中失效，但Chrome 108及以下版本可正常运行，控制台报错如下：

Uncaught TypeError: Cannot read properties of null (reading 'name')
at cacheFile (content.js:28:22)
at HTMLDocument. (content.js:148:13)

报错来自第三方Chrome扩展的content.js文件，路径为chrome-extension://fhkbechcecepmohakoafeoobnliolhei/content.js，涉事函数代码：

function cacheFile(file) {
    var fName = file.name;
    var fSize = file.size;
    var fModification = file.lastModified;

    pageFiles.add(file)

    chrome.runtime.sendMessage({ 'inputfile': { name: fName, size: fSize, modification: fModification } });
}

问题原因 #

cacheFile函数被调用时传入的file参数为null。Chrome 109在拖拽事件的文件对象处理逻辑上可能有更新，而该扩展未适配新版本浏览器，导致获取到的文件对象为空，进而触发读取name属性的错误。

解决方案 #

• 临时恢复功能：禁用涉事扩展
  直接禁用路径为chrome-extension://fhkbechcecepmohakoafeoobnliolhei的Chrome扩展，再测试拖拽功能是否恢复正常。如果恢复，说明该扩展是问题根源。

• 推动扩展适配：反馈给开发者
  找到该扩展的Chrome应用商店页面，通过评论区或开发者提供的联系方式提交问题，说明Chrome 109下的报错情况，请求开发者更新适配。

• 规避干扰（可选）
  若无法禁用扩展，可在应用的拖拽事件处理中阻止事件冒泡，避免扩展脚本捕获到拖拽事件并传入空文件对象。示例代码：

  // 替换为你的表格拖拽容器选择器
  document.querySelector('.table-drag-container').addEventListener('drop', function(e) {
    e.stopPropagation(); // 阻止事件冒泡到扩展的监听逻辑
    // 你的原有拖拽处理代码
  });
  

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