javascript - $(document).ready() doesn't always fire in Content Script for Chrome Extension -

this question has answer here:

• chrome extension not loading on browser navigation @ youtube 1 answer

i making chrome extension interacts pages loaded youtube.com. want reorder related videos largest smallest on page, content script has talk background page information first. content script starts sorting following event:

content_script.js:

$(document).ready(function() {     chrome.runtime.sendmessage({message: "getrecentsorttype"}, function(response) {         performsortaction(response.sorttype);     }); }); 

the background.js script listens, , executes code based off request:

chrome.runtime.onmessage.addlistener(function(request, sender, sendresponse) {     if(request.message === "getrecentsorttype")     {         var recentsorttype = localstorage.getitem("sorttype");         if(recentsorttype === null)         {             recentsorttype = "sortbyviews";         }          sendresponse({"sorttype": recentsorttype});     } }); 

when run when reloading page i'm on, of works fine. however, when click related video in youtube, $(document).ready() event doesn't fired in content script. if refresh page again, works.

can explain me going on? prefer have event in content script fire when page done loading.

right have background.js script listening chrome.tabs.onupdated event, , sending message content script, onupdated event occurs more once per page load, messing messaging.

you have use jquery .on() method bind event.