I have absolutely no experience in JS, but I have a task to write an extension for Chrome that would go to the site every 10 min and inform if I have new messages.
I have a popup.html in which I include a JS file with a refresh() function that goes to the site and if there are new messages there changes the div with id=text to a link. This part works.
Now I created a service_worker in which I pasted the code that prints “alarm” to the console every minute. This works too.
How can I make the service_worker call the refresh function, which will update the div?
I couldn’t import it. I tried to copy the function into the service_worker file, but it turned out that there was no access to the window and DOMParser.
Inside popup.js there is code that responds to button clicks. Do you need to generate something similar using service_worker so that refresh() is executed from there?
manifest.json
{
"manifest_version": 3,
"background": {
"service_worker": "worker.js",
"type": "module"
},
"action": {
"default_popup": "popup.html"
},
"permissions": [
"alarms"
],
"host_permissions": [
"*://example.com/*",
]
}
popup.html
<html>
<script type="module" src="popup.js"></script>
<body>
<div style="width:300px;padding:0;">
<button type="button" id="button">Refresh</button>
<div id='text' style="width:300px;padding:20 0 20;">
</div>
</div>
</body>
</html>
popup.js
function loadXMLDoc(myurl, cb)
{
var xhr = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
if (typeof cb === 'function') cb(xhr.responseText);
}
}
xhr.open("GET", myurl, true);
xhr.send();
}
function refresh()
{
loadXMLDoc('http://example.com/', function(responseText) {
//many staff here
document.getElementById("text").innerHTML = echo
});
}
window.onload = async () => {
document.getElementById('button').onclick = () => {
refresh()
};
};
worker.js
chrome.alarms.onAlarm.addListener(a => {
console.log('Alarm! Alarm!', a);
});
chrome.runtime.onInstalled.addListener(() => {
chrome.alarms.get('alarm', a => {
if (!a) {
chrome.alarms.create('alarm', {periodInMinutes: 1});
}
});
});