Multiple document.onload functions in chrome extension

Question

I am developing a chrome extension and i have a requirement as below.

There are 2 content scripts that has to be executed and both the content scripts has document.onload function. when the extension is loaded only one among the 2 content scripts are executing.

In Detail: say 1.js is a content script that has to be extecuted when xyz.com page is opened. 2.js is another content script that has to be executed on xyz.com,abc.com,..and so on.

Issue : When xyz.com page is loaded, if 2.js gets triggered initailly, content in 1.js is not getting executed and vice versa.

Is there any workaround for this situation ?

Please let me know if any other information is needed.

Answer 1

Only one is being triggered because one is overriding the other. Try using addEventListener instead:

document.body.addEventListener('load', function() {
   // your code
});

Setting this multiple times should not override the previous reference like the onLoad function did.

In your script files, you may need to wrap this in a self invoking function to ensure it is set before the body is loaded.

(function() {
    document.body.addEventListener('load', function() { 
        console.log('Inside the 1.js page'); 
        fillDetails(); 
    }); 
})();