I have a working extension that I turn off and on via a modal page. When I click on my icon the modal page is displayed and I can click the start button to run the extension. However, if I click any where else the modal page closes, which is OK, but the javascript stops running as well. What I want is to click the icon then click the start button and have the modal window close and the javascript keep running until I click the icon again and click the stop button. I have the script set as a "service_worker" in my manifest but that does not seem to help. How can I accomplish this? TIA.
Here is my manifest:
{
"manifest_version": 3,
"name": "Auto_Select",
"description": "This extension auto selects Mturk HITs",
"version": "1.0",
"action": {
"default_icon": "auto_select.png",
"type": "module",
"default_popup": "auto_select.html"
},
"permissions": [
"tabs",
"activeTab"
],
"host_permissions": [
"<all_urls>"
],
"background": {
"service_worker": "auto_select.js"
}
}
This is the modal HTML:
<!doctype html>
<!--
This page is shown when the extension button is clicked, because the
"browser_action" field in manifest.json contains the "default_popup" key with
value "popup.html".
-->
<html lang="en">
<head>
<meta http-equiv="Content-TYPE"
content="text/html; charset=utf-8">
<title>Auto Select MTurk Extension</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
#modal {-moz-appearance
top: 25%;
width: 270px;
height: 130px;
margin: auto;
}
</style>
</head>
<body>
<div id="modal">
<div style="text-align:center">
<strong>Auto Select</strong>
</div>
<br />
<div style="text-align:center">
<button id="start" type="button">Start Auto Select</button>
<button id="stop" type="button" disabled>Stop Auto Select</button>
</div>
<br />
<div style="text-align:center">
<button id="config" type="button">Configure</button>
</div>
<script src="auto_select.js"></script>
</body>
</html>
Here is the javascript:
async function requests(url) {
try {
const response=await fetch(url);
if (!response?.ok) {
if (response.status==422) {
// HIT No longer exists
return(null);
}
else if (response==429) {
tmrs++;
localStorage.setItem("tmrs",tmrs);
return(null);
}
console.log("caught error: "+response.status);
return(null);
}
const js=await response.json();
console.log(js);
return(js);
} catch(error) {
return(null);
}
}
function unique(orig_array,new_array) {
var unique_array=[];
for (var i=0; i<orig_array.length; i++) {
var found=false;
for (var j=0; j<new_array.length; j++) {
if (orig_array[i].hit_set_id==new_array[j].hit_set_id) {
found=true;
break;
}
}
if (!found) {
unique_array.push(orig_array[i]);
}
}
return(unique_array);
}
saved_array=[];
base_url="https://worker.mturk.com";
async function myExtension() {
var del=config_data.delay;
const data = await requests(base_url+"/projects.json");
select_array=unique(data.results,saved_array);
saved_array=data.results;
for (let item of select_array) {
await new Promise(r => setTimeout(r, del*1000));
if (config_data.filters[0].none) {
res= await requests(base_url+item.accept_project_task_url);
}
else if (config_data.filters[0].requester) {
console.log("Requester filter");
console.log(config_data.requesters);
}
else {
console.log("Title filter");
console.log(config_data.titles);
}
}
}
document.getElementById("start").addEventListener("click",start);
document.getElementById("stop").addEventListener("click",stop);
document.getElementById("config").addEventListener("click",configure);
tmrs=0;
localStorage.setItem("tmrs",tmrs);
function stop() {
document.getElementById("start").disabled=false;
document.getElementById("stop").disabled=true;
document.getElementById("config").disabled=false;
run=false;
}
function start() {
run=true;
document.getElementById("start").disabled=true;
document.getElementById("stop").disabled=false;
document.getElementById("config").disabled=true;
// document.querySelector("#modal").style.display="none";
main();
}
function configure() {
window.open("config.html","_blank");
}
async function main() {
json_str=localStorage.getItem("Auto_Select_051969");
config_data=JSON.parse(json_str);
while (run) {
console.log("calling exten");
await myExtension();
console.log("returned exten");
// run=false;
}
}