Uncaught Typeerror: Cannot Read Property 'Click' of Null Chrome Extension

How to fix "Uncaught TypeError: Cannot read property 'click' of null"

In your html there is no element with id j1_64_anchor. So your code document.getElementById('j1_64_anchor').click(); will fail.

document.addEventListener('DOMContentLoaded', function () {        document.querySelector('button').addEventListener('click', int)});  function int() {    console.log('calling');    var source = document.getElementById('j1_64_anchor').click();}
var coll = document.getElementsByClassName("collapsible");var i;
<button class="collapsible">Interfaces</button><div class="content" id="j1_64_anchor"><button onclick="int()" class="collapsible">Interfaces</button></div>

Chrome Extension : Uncaught TypeError: Cannot read property 'addEventListener' of null

The browser is running your javascript file before the HTML page fully loaded, so the button doesn't exist yet.

Workaround to that could be to put your script at the bottom of your page, or use the Load of DomContentLoad event like so:

window.onload = () => {
document.querySelector('button').addEventListener('click',
onclick, false)
}

Uncaught TypeError: Cannot read property 'checked' of null from chrome.storage.get()

It turns out that I needed to clear the errors after correcting a missing UI element. I don't understand why Google requires users to clear the errors before reloading the extension; the reload should clear them.

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

As said, removing background from manifest will fix this, but there appears to be a conceptual mix-up in the code sample, which is why I would like to explain why this solution works.

The script called app.js seems to be intended to be the popup script, but being used as a background script in the example. Popup is different from background. It will help to understand the difference between these two extension parts and their use cases. For continuity, the following explanation will refer to MV3 version and terms.

Background: "A background service worker is loaded when it is needed, and unloaded when it goes idle [...] Structure background scripts around events the extension depends on. Defining functionally relevant events allows background scripts to lie dormant until those events are fired and prevents the extension from missing important triggers." (Manage events with service workers) Additional note: background is literally in the background; there is no visible user interface. User would not be interacting with buttons in the background (though it is possible to send events to background for further handling through message passing). Consider background as a singleton.

Popup: This is one of the possible places to provide a UI for the extension user. The popup is activated by user clicking the extension icon, and destroyed when the popup loses focus (also when tab is closed), and reloaded again when user clicks the icon the next time. "Like the background script, this file must be declared in the manifest in order for Chrome to present it in the extension's popup. To do this, add an action object to the manifest and set popup.html as the action's default_popup." (Introduce a user interface). In the popup you can add buttons and other elements for user to click. Popup is specific to each tab. Opening multiple browser windows and clicking the icon, multiple popups can be open at the same time.

In short: the error is coming from looking for button element in the background, when there are no such buttons; removing the manifest key will prevent this.



Minimal working example

manifest.json: background key removed

{
"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: no change

(style.css will raise not found error, but not a concern regarding this question)

<!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: changed log text, no significant change

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: change log outputs a bit, commented out assignment

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
}

Bookmarklet returning Uncaught TypeError: Cannot read property 'click' of null

The code you've written is correct. The problem here is the jsfiddle website. This site is running your code inside an iframe element, not on the page itself. document refers to the current document, but the iframe is a different document, and your code doesn't find the element.

You could try with

window.frames[0].document.getElementById('check-a').click();

However, you'll get an error, because that frame is on a different origin and the browser is blocking access to cross-origin resources.

Try to write a simple HTML page to test your bookmarklet.



Related Topics



Leave a reply



Submit