So i am new to creating chrome extensions and i am stuck on a problem for a while.
So what i am trying to do is
1 : reading urls from a page and then open them one by one
2 : so once the first url is loaded , it will click a button on that loaded url
3 : on button click it will load another page
4 : wait on that page for 5 seconds.
5 : close both pages and do the same thing for remaining url.
So it goes like
5 urls
first open -> mid page -> final page -> wait 5 sec -> close mid and final page -> check if urls are empty : if not empty do the process again
now the problem i am getting is
it loads the first mid page to final page correctly
On second it loads the mid page twice so the final page also loads twice
On third it loads the mid page thrice
On forth it loads it four times
I am not sure what i am doing wrong here.
Here is the code
**Manifest.json**
{
"name" : "list",
"description" : "extract url from link and open",
"version" : "1.0",
"manifest_version" : 3,
"background" : {
"service_worker" : "background.js"
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"all_frames": false,
"run_at": "document_end",
"js": ["content.js"]
}],
"permissions" : ["storage","activeTab","scripting","tabs"],
"action" : {
"default_popup" : "popup.html"
},
"host_permissions": [
"urls"
]
}
**Background.js**
chrome.runtime.onInstalled.addListener(()=>{
console.log('Extension Running');
chrome.storage.local.set({ "closingTabQueue" : [] , "mid_url" : [] ,"loadingType" : "" ,"on_going_process" : false ,"manualHit" : true});
})
chrome.tabs.onCreated.addListener(function(tab){
chrome.storage.local.get(null, function(items){
if(items.manualHit==false){
chrome.storage.local.set({ "manualHit" : true} , ()=>{
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(changeInfo.status=='complete'){
let url=tab.url
if(items.loadingType=='to_final_page'){
chrome.tabs.sendMessage(tab.id, { mssg: "waitAndClose" , tabId : tabId } );
}else if(items.loadingType=="mid_url"){
chrome.storage.local.set({ "manualHit" : false , "loadingType" : "to_final_page" } ,()=>{
chrome.tabs.sendMessage(tab.id, { mssg: "clickBtn" , tabId : tabId } );
});
}
}
})
});
}
});
});
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
console.log( request, sender )
if (request.type === "mid_url"){
chrome.storage.local.get(null, function(items){
let mid_urls=items.mid_url;
let on_going_process = items.on_going_process;
if(on_going_process==false){
if(mid_urls.length!=0){
let first_url = mid_urls[0];
mid_urls.shift();
chrome.storage.local.set({ "mid_url" : mid_urls ,"loadingType" : "mid_url" ,"on_going_process" : true} ,()=>{
chrome.tabs.create({"url":first_url},function(newTab) {
if(items.closingTabQueue==undefined){
chrome.storage.local.set({ "closingTabQueue" : [newTab.id] })
sendResponse({})
return
}else{
let queue = items.closingTabQueue
queue.push(newTab.id);
chrome.storage.local.set({ "closingTabQueue" : queue })
sendResponse({})
return
}
})
});
}
}
})
}else if (request.type === "process_completed"){
const closeExisting = () => {
return new Promise (function(resolve, reject) {
const closeTabs = () => {
return new Promise (function(resolve, reject) {
chrome.storage.local.get(null, function(items){
let openedTab = request.tabId;
let tabs = items.closingTabQueue
if(!tabs.includes(openedTab)){
tabs.push(openedTab)
}
chrome.tabs.remove(tabs,()=>{
return resolve('');
})
});
})
}
closeTabs().then(()=>{
chrome.storage.local.set({ "closingTabQueue" : [] ,"on_going_process" : false , "loadingType": "mid_url" ,"manualHit" : true} ,()=>{
sendResponse({})
return resolve('')
});
})
});
}
const checkNext = () => {
return new Promise (function(resolve, reject) {
chrome.storage.local.get(null, function(items){
let mid_urls=items.mid_url;
let on_going_process = items.on_going_process;
if(on_going_process==false){
if(mid_urls.length!=0){
let first_url = mid_urls[0];
mid_urls.shift();
chrome.storage.local.set({ "mid_url" : mid_urls ,"loadingType" : "mid_url" ,"on_going_process" : true} ,()=>{
chrome.tabs.create({"url":first_url},function(newTab) {
if(items.closingTabQueue==undefined){
chrome.storage.local.set({ "closingTabQueue" : [newTab.id] } , ()=>{return true})
}else{
let queue = items.closingTabQueue
queue.push(newTab.id);
chrome.storage.local.set({ "closingTabQueue" : queue } , ()=>{return true})
return
}
})
});
}else{
console.log('Extension Reset');
chrome.storage.local.set({ "closingTabQueue" : [] , "mid_url" : [] ,"loadingType" : "" ,"on_going_process" : false ,"manualHit" : true});
}
}
})
});
}
closeExisting().then(checkNext)
}
}
);
**content.js**
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.mssg === "clickBtn"){
let tabId=request.tabId
clickBtn(tabId)
}else if(request.mssg === "waitAndClose"){
let tabId=request.tabId
setTimeout(()=>{
chrome.runtime.sendMessage({type: "process_completed" , tabId : tabId}, function(response) {
sendResponse();
return
});
},5000)
}
});
function clickBtn(tabId){
chrome.storage.local.set({ "manualHit" : false , "loadingType" : "to_final_page" } ,()=>{
setTimeout(()=>{
document.getElementById("some_id").click(); // this will open a url
},2000)
});
}
**popup.html**
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="button.css"> -->
</head>
<body>
<button id="save">Save</button>
<script src="popup.js"></script>
</body>
</html>
**popup.js**
let save = document.getElementById("save");
save.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: saveUrl,
});
});
function getUrl(){
let mid_url=['www.google.com','www.facebook.com','www.instagram.com','www.stackoverflow.com'];
for(let i of urls){
mid_url.push(i.href);
}
if(mid_url.length>0){
chrome.storage.local.set({ "manualHit" : false , "mid_url" : mid_url } ,()=>{
chrome.runtime.sendMessage({type: "mid_url"}, function(response) {});
});
}
}
** Note **
I have stored variables in chrome storage local as
closingTabQueue : tabs to close after completion
mid_url : to check which variables are left
loadingType : to check is its mid page or final page
manualHit : so that onupdated complete works only when the user hit that
on_going_process : check is a url is currently being executed or not