开发Chrome自动填充扩展报addEventListener相关空指针错误如何解决

错误根因 #

你碰到的报错是因为把popup专属的app.js同时配置成了扩展的后台脚本：
Chrome扩展的后台脚本运行在无DOM的独立沙箱环境，后台加载app.js时执行document.getElementById('fillForm')必然返回null，调用addEventListener就会抛出你看到的类型错误。你已经在popup的HTML末尾引入了app.js，完全不需要在manifest的background配置里重复加载。

另外你的代码还有两处会影响功能正常运行的问题：

• content.js中消息回调的参数是message，但赋值时错误使用了未定义的content变量
• 没有对目标页的输入框做判空处理，如果页面不存在id为email的输入框会抛出额外错误

修复步骤 #

1. 修改manifest.json，删除background配置项 #

修改后的完整配置如下：

{
    "name": "Resume Autofiller",
    "description": "Build an Extension!",
    "version": "1.0",
    "manifest_version": 2,
    "browser_action":{
        "default_popup": "index.html"
    },
    "permissions": [
        "activeTab",
        "<all_urls>"
    ],
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": [ "content.js" ]
        } 
    ]
}

2. 修复content.js的变量错误并添加判空逻辑 #

console.log("Receiving message...")
chrome.runtime.onMessage.addListener(gotMessage);
function gotMessage(message, sender, sendReponse){
    const emailInput = document.getElementById('email')
    if (emailInput) {
        emailInput.value = message.username
    }
}

3. 重载扩展生效 #

打开Chrome扩展管理页chrome://extensions/，开启开发者模式后点击对应扩展的刷新按钮即可。

注：你之前看到的报错来自后台脚本控制台，可通过扩展管理页的「背景页」入口打开；popup的独立控制台需要右键点击扩展图标选择「审查弹出内容」才能打开，两个运行环境完全隔离。

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