How to wait for the page to load before clicking in javascript?

[SLAWI MAHDI]

I want to manipulate an Intranet site with Chrome Extension and I have done the following functions which run non-stop:

Extension.js

window.addEventListener('load', function() {

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }
},false);

popup.js

Myfunction (){
window.addEventListener('load', function() {

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }
},false);
},

I think the problem is in the code on extension.js but I don’t know how to adapt it if you can help me please and thank you in advance.

[SLAWI MAHDI]

sorry I made a mistake for the popup.js file its content is as follows

popup.js

Myfunction (){

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }
},

[SLAWI MAHDI]

Hi Stefan,

Do you have any idea about this problem please.

[PhistucK]

1. Not sure where extension.js runs.

2. The code in popup.js, as you put it*, has only access to the DOM of the extension popup, not to the DOM of the website in the current tab. You need to use chrome.scripting APIs to run stuff in the context of the website.

Nothing stands out as to why it runs "non-stop". Do you mean that it keeps re-running, or that it never finishes/is stuck?

*Ignoring what seem to be syntax errors at the beginning and end and assuming it runs within the extension popup, but not sure when.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/109bd8d4-bb37-4c08-a341-75c677702c3bn%40chromium.org.

[Stefan Van Damme]

Hi mahd,

You can use message passing in your Chrome extension. See this example:

https://stackoverflow.com/a/56712805/1731468
So it sends the message from your popup -> to the background -> to the content script on that web page.

To learn more about message passing, see this Chrome developer documentation:

https://developer.chrome.com/docs/extensions/mv3/messaging/

Another way is to inject directly from the popup with what @Phistuck said, with chrome.scripting.

An example is my Turn Off the Lights Chrome extension https://github.com/turnoffthelights/Turn-Off-the-Lights-Chrome-extension/blob/manifest-v3/src/js/palette.js#L70

function codenight(){
    if(document.getElementById("totldark")){
       // do something here
    }
}

chrome.tabs.query({
            active: true,
            currentWindow: true
        }, function(tabs){
            chrome.scripting.executeScript({
                target: {tabId: tabs[0].id},
                func: codenight
            });
 });

Thanks,

Stefan vd

[SLAWI MAHDI]

Thank you very much Stefan vd,
Excuse my ignorance, now i did this  but it does not work ,  in red is the part that I added:

popup.html

<!doctype html>
<html>
    <head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
</head>
<body>
<center>
<div class="box">
<form id="myForm">
<h2>Veuillez entrer un code</h2>
<input name="inpt" id="inpt" maxlength="11" autocomplete="off"/>
<button id="btn">OK</button>
</form>
</div>
<div id="box2" class="hide">
<h1>Bloc-notes</h1>
        <section>
            <textarea id="bn" placeholder="Saisissez votre texte ici..."></textarea>
            <input id="filename" value="Note.txt"/>
            <button id="download">Télécharger</button>
        </section>
</div>    
</center>
</body>
<script src="extension.js"></script>
</html>

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

extension.js

window.addEventListener('DOMContentLoaded', setUpStuff, false);
function setUpStuff(){
document.getElementById("inpt").focus();
  let optionsButton = document.getElementById('btn');
    optionsButton.addEventListener('click', function() {

        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

    chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});

        });
      });
}
function popup() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
   });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("btn").addEventListener("click", popup);
});
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

popup.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
if( request.message === "start" ) {
         start();
             }
     
    let functions = {
0: function () { window.location.reload(true); },
1: function start(){

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }

},

    }

    functions[request.functionnum]();
});

[PhistucK]

Where does popup.js run? It is not referenced from popup.html.

Is it a content script?

Note that if functionnum is 1, there will be an infinite recursion (start will keep calling itself, since it is functions[1]), unless I am mistaken.

I think your question is too convoluted with implementation details and issues that are not specifically related to extensions.

Try to create a simple extension that sends a message to a content script and see if you get the message. If that does not work, we can help.

Other than that, your issues do not seem to be extension related.

Once you get that message passing working, you can work on your other implementation details. If something does not work there, stackoverflow.com is a good place to ask for help.

☆PhistucK

[SLAWI MAHDI]

this is the extension.js file which is referenced on popup.html, i have several functions which work fine without any issues the only thing i need now is to run function number 1 which should do a first click then wait for a button to appear to click on it then a new page is displayed and i have to do the third and fourth click, my problem is how to wait for the page to load each time to continue.

[PhistucK]

"Page load" is a very ambiguous stage (always have been, since JavaScript came into the picture).

I guess you are looking for the point where the element exists. Right?

- If the regular load event on window is enough for you, then I think you can check document.readyState. If it is interactive, then load was fired already, otherwise add an event listener. Another option is performance.timing.loadEventEnd or something like that. If it has a (non-zero) value, then the load event was fired already, I believe.

- If the element may exist before or after the load event on window, you can use MutationObserver for listening to DOM changes when the element does not exist, checking if the relevant element exists and then running your function.

I believe message passing has no way of saying, "pass the message once load fired", unlike chrome.scripting which has something along those lines (run_at, if I recall correctly).

☆PhistucK

[SLAWI MAHDI]

These two codes are working fine but unfortunately it doesn't stop and I don't know how to configure them

I can do this defining a callback function on the page load event. You can do it this way :

var loadfunction = window.onload; 

window.onload = function(event){

  //enter here the action you want to do once loaded 

  if(loadfunction) loadfunction(event);

 }

Or this way :

window.addEventListener("load", function load(event){ 

  window.removeEventListener("load", load, false); //remove listener, no longer needed 

  //enter here the action you want to do once loaded 

},false);

source

[PhistucK]

The code you mention will only work if the load event was not already fired.

Again, "it does not stop" - what does that mean?

Does the code run again and again? If so, are you passing functionnum: 1? If so, this is what your code does... Remove the start function from functions.

It is very hard to help this way.

☆PhistucK

[SLAWI MAHDI]

What do you suggest me to do ?

[PhistucK]

I suggested stuff in previous posts and asked questions, but got very short and incomplete responses from you, so I have no further suggestions.

☆PhistucK

[SLAWI MAHDI]

Hi everyone, 

Is it possible to use the setTimeout() method in this case? because I don't really know how to do it with :

window.addEventListener("load", function load(event){ 

  window.removeEventListener("load", load, false); //remove listener, no longer needed 

  //enter here the action you want to do once loaded

  },false);

or

var loadfunction = window.onload; 

window.onload = function(event){ 

  //enter here the action you want to do once loaded 

if(loadfunction) loadfunction(event); 

}

[SLAWI MAHDI]

Hi,

Do you have any ideas or suggestions please?

[Vũ Thảo Nguyên]

Hi, 

You can try to wait for the element that you need to click:

waitForElm('[name=filter]').then((elm) => {
// do your task
});

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

       const observer1 = new MutationObserver(mutations => {
           if (document.querySelector(selector)) {
              resolve(document.querySelector(selector));
              observer1.disconnect();
           }
       });

       observer1.observe(document.body, {
           childList: true,
           subtree: true
       });
     });
}

Hope it will help you.
 

[SLAWI MAHDI]

Hi Vũ Thảo Nguyên,

first of all thanks for the reply, can you give me more details please, my code is as follows:

click 1

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

click 2

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

click 3

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

click 4

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }

I have to wait for the element "document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");" after click 1
then after click 2 I have to wait for the display of the link "document.links[i].click();"
so two waiting periods how can I adapt your code to my needs?

Thank you

[Vũ Thảo Nguyên]

You can add another wait check for links with text content. The idea is the mutation will stop and return the found item if there is any matched element.

For example:

function waitForElmByTextContent(searchText) {
    return new Promise(resolve => {
        let foundEl = foundElement(text);
        if (foundEl) {
            return resolve(foundEl);

        }

       const observer1 = new MutationObserver(mutations => {

           let foundEl = foundElement(text);
           if (foundEl) {
              resolve(foundEl);

              observer1.disconnect();
           }
       });

       observer1.observe(document.body, {
           childList: true,
           subtree: true
       });
     });
}

function foundElement(text) {

     for(var i = 0, len = document.links.length; i < len; i += 1) {
             if(document.links[i].textContent === "Configuration ") {

                 return document.links[i];
             }
     }
     return null;
}

[Vũ Thảo Nguyên]

concerning two waiting periods :

waitForElm('[name=filter]').then((elm) => {
      // do click 1

       waitForElm(selector 2).then((elm) => {
            // do click 2

            .................
       });
});

[SLAWI MAHDI]

Thank you Vũ Thảo Nguyên, 

It's too complicated for me, I didn't know how to adapt it, thank you anyway

[Vũ Thảo Nguyên]

Full script without testing:

waitForElm('[name=filter]').then((elm) => {

    var list = document.getElementsByName("filter");

    for (var i = 0; i < list.length; i++) list[i].click();

    waitForElm('.ui-icon.ui-icon-pencil.tiptip').then((elm) => {

        var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
        for (var i=0; i<list.length; i++) list[i].click();

        waitForElmByTextContent('Configuration').then((elm) => {

            for(var i = 0, len = document.links.length; i < len; i += 1) {
                if(document.links[i].textContent === "Configuration ") {
                    document.links[i].click();
                }
            }

            waitForElm('[name=configurations]').then((elm) => {

                var x = document.getElementsByName("configurations[]");
                var i;
                for (i = 0; i < x.length; i++) {
                    if (x[i].type == "checkbox") {
                        x[i].checked = true;
                    }
                }

            });

        });
    });

});


function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer1 = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer1.disconnect();
            }
        });

        observer1.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

function waitForElmByTextContent(searchText) {
    return new Promise(resolve => {
        let foundEl = foundElement(text);
        if (foundEl) {
            return resolve(foundEl);
        }

        const observer1 = new MutationObserver(mutations => {
            let foundEl = foundElement(text);
            if (foundEl) {
                resolve(foundEl);
                observer1.disconnect();
            }
        });

        observer1.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

function foundElement(text) {
    for (var i = 0, len = document.links.length; i < len; i += 1) {
        if (document.links[i].textContent === "Configuration ") {

            return document.links[i];
        }
    }
    return null;
}

[SLAWI MAHDI]

Thank you Vũ Thảo Nguyên,

unfortunately it did not work after click 1 click 2 still does not wait for the display of the element, thank you very much you are very kind.

[HSSAINI MAHDI]

For more details about this subject, here is the source code with screenshots of the 4 buttons

Button 1 “Rechercher”

Button 2 “Editer”

Button 3 “Configuration”

Button 4 “checkbox M and D”

I manage to click the buttons with the following code but I can’t manage to configure a setTimeout to wait for the buttons are displayed before the clicks.

//Button 1 "Rechercher" var list = document.getElementsByName("filter"); for (var i=0; i<list.length; i++) list[i].click(); //Button 2 "Editer" var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip"); for (var i=0; i<list.length; i++) list[i].click(); //Button 3 "Configuration" for(var i = 0, len = document.links.length; i < len; i += 1) { if(document.links[i].textContent === "Configuration ") { document.links[i].click(); } } //Button 4 "checkbox M and D" var x = document.getElementsByName("configurations[]"); var i; for (i = 0; i < x.length; i++) { if (x[i].type == "checkbox") { x[i].checked = true; } }

--

[Stefan Van Damme]

Hi there,

You can use a mutation observer to detect when the button is available. Then execute the click action.

Example code:
https://jsfiddle.net/a64c8pk1/

Or with a delay
setTimeout(() => { console.log("Delayed for 1 second."); }, 1000)
Source: https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

Thanks,
Stefan vd

[SLAWI MAHDI]

Hi Stefan,

Sorry to have bothered you too much, is there a way to adapt my code with this exemple  :

https://jsfiddle.net/mahdiweb/L2o8nrwq/9/ 

my Code:

[Stefan Van Damme]

Hi Mahdi,

I am not sure what you mean here. If you know the ID of that selectbox, you can do the same as your jsfiddle link.

|| I manage to click the buttons with the following code but I can’t manage to configure a setTimeout to wait for the buttons are displayed before the clicks.

That is where  this event come in "DOMContentLoaded". It will will only fire when it have the HTML document content (-> your buttons, image, input, textarea). So then you can set a delay (=> setTimeout) for 10 seconds to remove the disabled arugement.

document.addEventListener('DOMContentLoaded', () => {
     select1.addEventListener('change', () => {
        select2.removeAttribute('disabled');
        select3.removeAttribute('disabled');
        select4.removeAttribute('disabled');
     });
     setTimeout(() => {
        select1.value = 3;
        select1.dispatchEvent(new Event("change"));
     }, 1E4);
});

Thanks,
Stefan vd

[SLAWI MAHDI]

I don't know why when I do the following method only the first click is triggered and I have to run the function four times to make the four clicks

function (){

setTimeout(() => {
//bouton 1 "Recherche"

var list = document.getElementsByName("filter");
for (var i=0; i<list.length; i++) list[i].click();

}, 1E3);

setTimeout(() => {
//bouton 2 "Editer"

var list = document.getElementsByClassName("ui-icon ui-icon-pencil tiptip");
for (var i=0; i<list.length; i++) list[i].click();

}, 2E3)

setTimeout(() => {
//bouton 3 "Configuration"

for(var i = 0, len = document.links.length; i < len; i += 1) {
    if(document.links[i].textContent === "Configuration ") {
        document.links[i].click();
    }
}

}, 3E3)

setTimeout(() => {
//bouton 4 "checkbox M et D"

var x = document.getElementsByName("configurations[]");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }

}, 4E3)
},

on the other hand I have this function which works with the same principle I think

function (){

const select1 = document.getElementById('select1');
const select2 = document.getElementById('select2');
const select3 = document.getElementById('select3');
const select4 = document.getElementById('select4');

 
select1.addEventListener('change', () => {
select2.removeAttribute('disabled');
select3.removeAttribute('disabled');
select4.removeAttribute('disabled');
});

setTimeout(() => {

select1.value = 2;
select1.dispatchEvent(new Event("change"));
}, 1);
setTimeout(() => {
select2.value = 1;
select2.dispatchEvent(new Event("change"));
}, 1);
setTimeout(() => {
select3.value = 3;
select3.dispatchEvent(new Event("change"));
}, 1);
setTimeout(() => {
select4.value = 4;
select4.dispatchEvent(new Event("change"));
}, 1);

},

[Stefan Van Damme]

Hi Mahdi,

Try debugging your code with "console.log(list[i].innerhtml)", and see if it contains a value. And check if the class name is already there (and not added dynamically later in your code, because see here no HTML contain to check it).

A tip:

If you have any vanilla javascript questions that are not specific to the Chrome extension. Use StackOverflow, many other web developers can help you.
https://www.stackoverflow.com

Thanks,
Stefan vd

[SLAWI MAHDI]

Hi  Everybody,

I'm trying to be more clear and so I've simplified things as follows

Here is the content of my Chrome extension:

manifest.json

{
    "name": "Zero",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Auto fill form GRC",
    "action": {
        "default_popup": "popup.html",
        "default_icon": "icon/icon.png"
    },
    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["extension.js"]
    }],
    "permissions": [
        "activeTab",
        "scripting"
    ]

}

popup.html

<!doctype html>
<html>
    <head>

        <style>
            body {
            min-width: 120px;
            overflow-x: hidden;
            font-family: Arial, sans-serif;
            font-size: 12px;
            }
           
            input, textarea {
            width: 140px;
            }
           
            input#save {
            font-weight: bold;
            width: auto;
           
            }
        </style>
       
    </head>
    <body>
        <h1>GRC</h1>
        <center>
            <div>
                <label><b>Veuillez saisir un code</b></label>
                <input name="inpt" id="inpt" autocomplete="off"/>
                <p>
                    <button id="btn">Enter</button>
                </p>
            </div>
        </center>
    </body>
    <script src="popup.js"></script>
</html>

popup.js

window.addEventListener('DOMContentLoaded', setUpStuff, false);
function setUpStuff(){

    let optionsButton = document.getElementById('btn');
    optionsButton.addEventListener('click', function() {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            chrome.tabs.sendMessage(tabs[0].id, {functionnum: document.getElementById("inpt").value.toUpperCase()});
        });
      });
}

extension.js

chrome.runtime.onMessage.addListener(
  function(request, sender) {
    let functions = {
    1: function () {
document.getElementById("topsearch-text").value += "google";
var list = document.getElementsByClassName("go");

for (var i=0; i<list.length; i++) list[i].click();

document.querySelector('img[src="https://fdn2.gsmarena.com/vv/bigpic/google-pixel7-pro-new.jpg"]').click();
},
    2: function () { alert(2); },
    3: function () { alert(3); },
    }
    functions[request.functionnum]();
});

as you can see on the extension.js file I have the number 1 function which is executed for example on the website: https://www.gsmarena.com/
I have to write in the search field the word google then press the go button and I have to wait for the result then press the model google_pixel_7_pro.

I used the setTimeout method but without success the code stops after the second click here is a demonstration video in gif format

A demonstration video in gif format

I hope I have explained my need well and thank you for your help.

[PhistucK]

In this specific case, you might be able to use the popstate event on window because it seems like the website is changing the URL once the results appear.

☆PhistucK

[SLAWI MAHDI]

Ok but how please?