I am taking a course about browsers in tech school.
I have absolutely 0 knowledge in this field.
We were tasked with creating a simple chrome extension that runs at the background and when you are in https://www.linkedin.com/jobs it constantly searches for elements with the class jobs-apply-button
.
Once it finds the element it prints it.
So I found what element contains the jobs-apply-button
class. Its the Apply button:
So I created the following chrome extension:
manifest.json:
{
"manifest_version": 3,
"name": "Job Apply Button Checker",
"version": "1.0",
"description": "Logs elements with the class 'jobs-apply-button' every second.",
"permissions": [
"activeTab",
"tabs",
"webNavigation"
],
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["https://*.linkedin.com/jobs/*"],
"js": ["content.js"]
}
]
}
background.js:
chrome.webNavigation.onCompleted.addListener((details) => {
if (details.url.includes('linkedin.com/jobs')) {
chrome.scripting.executeScript({
target: { tabId: details.tabId },
files: ['content.js']
});
}
}, { url: [{ urlMatches: 'linkedin.com/jobs' }] });
content.js:
function checkForJobApplyButtons() {
const elements = document.querySelectorAll('.jobs-apply-button');
if (elements.length > 0) {
console.log('Found jobs-apply-button elements:', elements);
}
}
setInterval(checkForJobApplyButtons, 1000);
Then I go to a LinkedIn -> Jobs -> Specific job that has that button.
But it doesn’t work at first, nothing is logged to the console.
Only after I refresh the page its start working.
I tried multiple content.js techniques but same issue always.
Why does it work only after a page refresh, and how can I fix it?
0
- Remove
jobs/
frommatches
in manifest.json because it’s a modern SPA site that reuses the same page internally, which means thatcontent_scripts
injection happens only once when you open a non-matching page of the site in the tab and then go to a matching page. - Remove
chrome.webNavigation
because you already havecontent_scripts
. - Re-inject
content_scripts
after reloading/installing the extension in Chrome.