Chrome扩展内容脚本注入异常：两段相似代码为何表现不同？

你遇到的问题核心是JavaScript的**自动分号插入（ASI）**机制搞的鬼，两段代码看起来等价，但实际解析逻辑完全不同。

先看第一段报错的代码，重点关注最后两行：

injectableScript.onload = function () {
    injectableScript.remove()
}
(document.head || document.documentElement).appendChild(injectableScript)

因为前一行的函数赋值语句结尾没有手动写分号，JavaScript的自动分号插入机制在这里判断失误，它会把后面的(document.head || document.documentElement)当成是对前面函数的调用，最终代码被解析成了这样：

injectableScript.onload = function () {
    injectableScript.remove()
}(document.head || document.documentElement).appendChild(injectableScript)

简单来说，就是你定义的onload函数被当成了立即执行函数，传入document.head || document.documentElement作为参数。但这个函数本身没有返回值（默认返回undefined），相当于你在对undefined调用appendChild，自然就抛出了Cannot read properties of undefined (reading 'appendChild')的错误。

再看能正常运行的第二段代码：

var targetElement = document.head || document.documentElement;
targetElement.appendChild(injectableScript)

这里通过变量赋值语句明确用分号结尾，切断了和前一行代码的关联，JavaScript不会把它当成函数调用，而是正常获取目标元素后执行appendChild，所以可以正常运行。

总结：写JavaScript时，不要依赖自动分号插入，在函数赋值、变量声明这类语句的结尾主动加上分号，就能避免这种隐蔽的语法坑。

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