Branden Ham Branden Ham - 1 month ago 7
jQuery Question

opening window and navigating through page

I am trying to navigate a webpage with a content script. However the function keeps running because every time the page changes it runs through the script. I was wondering if there was a better way to do this as it is a resource hog and also disallows the user to interact with the page because of the constant refreshing.

Here's the code in question, sorry if it looks weird. I do not have more then a few weeks of knowledge in jQuery.

$(document).ready(function(){
console.log("Made it here" + window.location.href);

loc = window.location.href;
match = loc.match('http://url.com/uc/');
if (match) {

window.location = "http://url.com/uc/health/index/1";
console.log("2 here");

window.location = "http://url.com/uc/health/communication/createSelectTemplate";


console.log("3 here");
chrome.storage.local.get('formOption', function(result) {
document.getElementById('formTemplate').value = result.formOption;
document.forms[0].submit();
});



}
});


The reason i have to navigate three windows before using values because whoever made this website has timeout cookies and the pages can not be called before the previous one loads.
It is a content script tho, so all the code is on the next page. Maybe if there was a way to check exact url? But when i was playing with that awhile back the computer didn't distinguish between.

urlhere.com/uc/


and

urlhere.com/uc/health/index/1

Xan Xan
Answer

Every time you navigate (e.g. immediately after assigning window.location), your script stops executing is unloaded with the page, and when the next page loads, the content scripts are indeed loaded again. If the same script is loaded, with the same initial state, it will of course execute the same operation.

Possible solutions (there are many):

  1. Be more precise with your matching (= better notice the actually changing state).

    loc.match('http://url.com/uc/') will only check that the address includes that string - which all URLs you show do. Why not just use loc == 'http://url.com/uc/' (and check for intermediate pages)?

  2. Use fine-grained content scripts (= load different scripts).

    Manifest defines which pages get what scripts on load. I assume you have something like this:

    "content_scripts" : [{
      "js" : ["jquery.js", "content1.js"],
      "matches": ["http://*"]
    }]
    

    You can make several scripts and let Chrome parse the URLs. For example, content1.js will do the first redirect, content2.js will do the second.

    "content_scripts" : [{
      "js" : ["jquery.js", "content1.js"],
      "matches": ["http://url.com/uc/"]
    }, {
      "js" : ["jquery.js", "content2.js"],
      "matches": ["http://url.com/uc/health/index/1"]
    }]
    
  3. Use some persistent state (that persists between navigation) to indicate which stage of redirect are you on (= control changing state yourself).

    The page's sessionStorage is ideal for this, as it's only persistent within the tab:

    if (match) {
      switch (sessionStorage.redirectStage) {
        case 3:
          // We're at the final page, do actual work
          break;
        case 2:
          sessionStorage.redirectStage = 3;
          window.location = "http://url.com/uc/health/communication/createSelectTemplate";
          break;
        default: // Includes initial state when it's unset
          window.location = "http://url.com/uc/health/index/1";
      }
    }
    
Comments