In my contentScript.js, I am trying to get the title of a this leetcode.com problem (https://leetcode.com/problems/maximum-score-words-formed-by-letters/) from it's DOM and send it as a message to my background.js, but it only returns null.
background.js
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log("request: ", request)
console.log("sender: ", sender.url)
});
contentScript.js
problemName = document.querySelector('div[data-cy="question-title"]');
chrome.runtime.sendMessage({problemName: problemName});
manifest.json
{
"name": "Random Background Color",
"version": "1.0",
"description": "building my first extension!",
"permissions": [
"declarativeContent",
"storage",
"activeTab",
"tabs",
"webNavigation",
"contextMenus",
"https://leetcode.com/"
],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["https://leetcode.com/problems/*"],
"js": ["contentScript.js"]
}
],
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
so in my chrome extension console it looks like this
request: {problemName: null}
sender: https://leetcode.com/problems/maximum-score-words-formed-by-letters/
problemName is null, but when I run
document.querySelector('div[data-cy="question-title"]');
inside of the console on https://leetcode.com/problems/maximum-score-words-formed-by-letters/ it sends me the correct title