将事件侦听器添加到页面 Chrome 扩展程序上的按钮

Question

在content.js ，我试图向页面上的按钮添加一个事件侦听器，但我不断收到此错误：

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

我试图把它放在document.addEventListener('DOMContentLoaded',afterDOMLoaded); 但是DOMContentLoaded永远不会在content.js脚本中触发。 如何向页面上的按钮添加事件侦听器？

Answer 1

你应该展示你的 content.js 是如何执行的。

也许，当您的脚本被注入时，页面已经DOMContentLoaded 。 注入时间可以在清单文件中指定。 如果您的清单文件如下所示，则您的 content.js 会在window.onload事件触发后立即注入，即在DOMContentLoaded之后。 请参阅https://developer.chrome.com/docs/extensions/mv3/content_scripts/ 。

"content_scripts": [
{
  "matches": ["https://*/*"],
  "run_at": "document_idle",
  "js": ["content.js"]
}

如果您的清单如上，则不需要事件侦听器，只需在 content.js 脚本中编写代码即可。