未捕获的类型错误：不能读性null(阅读'addEventListener')款名

Question 1

我做一个自动填写铬扩展。即，一旦按一个按钮，一个输入表格中的内容的网页将被填充通过的文本popup.html. 我得到这个"无法阅读性null"错误开始从那里我加了一个事件监听到我的按钮。 [未捕获的类型错误：不能读性null(阅读'addEventListener')][1]

这是我html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

这里是我的app.js

console.log('background running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
        username: text
        } 
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

这里是我的content.js

console.log("Receiving message...")
chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendReponse){
    document.getElementById('email').value = content.username
    
}

最后，我的清单。json

{
    "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" ]
        } 
    ],
    "background": {
        "scripts": ["app.js"]
      }
    
  }

我在网上阅读，我应该把我的剧本标记在体的底部标签，但我仍然得到这一错误。我觉得我监督的东西，显而易见的，因此任何帮助是极大的赞赏。谢谢！附上的错误，我得到。 [1]: https://i.stack.imgur.com/GyNXO.png

Question 2

正如所述，除去背景从清单将解决这个问题，但似乎没有一个概念混淆在代码样本的，这就是为什么我要解释为什么这种方案的工作。

脚本叫app.js 似乎是用来被弹出的脚本，但正在使用的作为背景脚本中的例子。弹出不同的背景。它将有助于了解这两个之间的差异的扩展部分及其使用情况。对连续性，以下的解释将指MV3版和条款。

背景： "一背景下服务的工作人员被装载在需要时，卸下的时空闲去[...]结构的背景脚本周围活动的扩展取决。定义功能有关的事件允许的背景脚本处于休眠状态，直到这些事件的发射和防止扩从缺少重要的触发器。" (管理活动与业务工作者)的额外注意：背景是从字面上 的背景；有没有可见的用户接口。用户不会相互作用的按钮在背景(虽然它是可以发送的事件为背景进一步处理通过信息传递). 考虑背景作为一个单独的.

弹出： 这是一个可能的地方提供一个界面，供扩展的用户。弹出被激活，以通过用户击扩展标和时销毁的弹出窗口失去焦点(也当选项是封闭的)，并重新装载时再次用户点击图标下的时间。 "喜欢的背景脚本，这个文件必须申报在清单，以便于浏览器的存在扩展的弹出窗口。要做到这一点，添加一个行动的对象清单，并设置popup.html 作为行动的default_popup." (介绍用户接口). 在出现，你可以添加的按钮和其他元素，为用户击。弹出是具体到每一个选项。开多次浏览器，并点击图标、多的弹出窗口可以打开同时进行。

在短：错误是来自寻找键元件的背景下，当有没有这样的按钮；消除清单的关键将防止出现这种情况。

最小的工作实例

清单。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" ]
    }
  ]
}

index.html：无变化

(风格。css将提高未发现的误差，但是没有关注这个问题)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

app.js：改变记录的文本，没有明显的变化

console.log('popup running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
            username: text
        }
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

content.js：改变记录输出点，评论说出分配

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse){
    console.log("Receiving message...")
    console.log('message', JSON.stringify(message));
    // next line has undefined references, commenting out
    // document.getElementById('email').value = content.username
}

Neea · Answer 1 · 2021-11-21T21:21:52

正如所述，除去背景从清单将解决这个问题，但似乎没有一个概念混淆在代码样本的，这就是为什么我要解释为什么这种方案的工作。

脚本叫app.js 似乎是用来被弹出的脚本，但正在使用的作为背景脚本中的例子。弹出不同的背景。它将有助于了解这两个之间的差异的扩展部分及其使用情况。对连续性，以下的解释将指MV3版和条款。

背景： "一背景下服务的工作人员被装载在需要时，卸下的时空闲去[...]结构的背景脚本周围活动的扩展取决。定义功能有关的事件允许的背景脚本处于休眠状态，直到这些事件的发射和防止扩从缺少重要的触发器。" (管理活动与业务工作者)的额外注意：背景是从字面上 的背景；有没有可见的用户接口。用户不会相互作用的按钮在背景(虽然它是可以发送的事件为背景进一步处理通过信息传递). 考虑背景作为一个单独的.

弹出： 这是一个可能的地方提供一个界面，供扩展的用户。弹出被激活，以通过用户击扩展标和时销毁的弹出窗口失去焦点(也当选项是封闭的)，并重新装载时再次用户点击图标下的时间。 "喜欢的背景脚本，这个文件必须申报在清单，以便于浏览器的存在扩展的弹出窗口。要做到这一点，添加一个行动的对象清单，并设置popup.html 作为行动的default_popup." (介绍用户接口). 在出现，你可以添加的按钮和其他元素，为用户击。弹出是具体到每一个选项。开多次浏览器，并点击图标、多的弹出窗口可以打开同时进行。

在短：错误是来自寻找键元件的背景下，当有没有这样的按钮；消除清单的关键将防止出现这种情况。

最小的工作实例

清单。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" ]
    }
  ]
}

index.html：无变化

(风格。css将提高未发现的误差，但是没有关注这个问题)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Autofill</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>

    <p id="testText">Text to put</p>
  
    <button id="fillForm">Fill!</button>

    
    <script src="app.js" ></script>
  </body>
  
</html>

app.js：改变记录的文本，没有明显的变化

console.log('popup running!!!')
let testtext = document.getElementById('testText')

let button = document.getElementById('fillForm')
button.addEventListener('click', buttonClick);

function buttonClick(){
    params = {
        active: true,
        currentWindow: true
    }
    chrome.tabs.query(params, gotTabs);

    function gotTabs(tabs){
        let text = testtext.innerHTML
        let content = {
            username: text
        }
        chrome.tabs.sendMessage(tabs[0].id, content);
    }
}

content.js：改变记录输出点，评论说出分配

chrome.runtime.onMessage.addListener(gotMessage);

function gotMessage(message, sender, sendResponse){
    console.log("Receiving message...")
    console.log('message', JSON.stringify(message));
    // next line has undefined references, commenting out
    // document.getElementById('email').value = content.username
}

谢谢，我去掉的背景脚本清单，但是我仍然得到相同的错误。唯一的区别是现在该上下文输出的当前标签，我在，与此相反_generated_background_page.html 这是所示。在线阅读，方法来解决"的位置以null"一个按钮，就是要么通过检查命名的错误，或者添加一个DOMContentLoaded事件的听众，其中我没有和我仍然得到同样的错误
好吧，让我后最小的工作实例。我会编辑的答案。
没有按钮的背景，除非它被编程方式产生的第一次。 getElementById 将继续返回不确定的检查后，命名或等待内容的负荷。背景应该被认为是无头的(虽然在mv2能够视所产生的页面上，但实际用户不会看到它)。
哇，帮助澄清了很多的事情，我得到了它的工作。感谢!!!! 它必须做的有消息传递(信息。用户名，而不是内容。用户名)

未捕获的类型错误：不能读性null(阅读'addEventListener')款名

的问题

最好的答案

最小的工作实例

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别