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
Customizing Item-Text in V-Select
React Native Flatlist With Clickable Items
Securityerror: Blocked a Frame With Origin from Accessing a Cross-Origin Frame
Validating Array of Different Object Shapes in Yup
How to Disable Onclick Without Altering Its Function
How to Redirect Drop Down Menu When Option Is Selected
Nosuchelementerror: Unable to Locate Element - Selenium Webdriver Using JavaScript
How to Manage Hide and Show Multiple Div and Sections Using Jquery
How to Get a Div Element from an External Webpage in HTML File
How to Compare Dates in Mongo Query
How to Separate String and Push to React State
Keep Overflow Div Scrolled to Bottom Unless User Scrolls Up
Typescript | Warning About Missing Return Type of Function, Eslint
How to Know If Two Arrays Have the Same Values
How to Sort a Map by Value in JavaScript
Remove the Default Browser Header and Footer When Printing HTML