Chrome extension- How to have your main script run every time a page loads

Question

So my main content script runs when i refresh the page however when I click on a new page of the webpage it doesnt run again; only once when I refresh the page. I want it to rerun every time the page changes or when the url changes. The main function in the main content script is called "runExtension()"

This is my background.js

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete') {

    alert("LOADED");
    setTimeout(runExtension, 1000);

  }
})

And this is my manifest.json

{
 "manifest_version": 2, 
  "name": "RateMyBull",
  "description": "View professor ratings from RateMyProfessor when signing up for classes on the USF schedule planner", 
   "version": "1.0",

 "permissions": ["https://usf.collegescheduler.com/*"],
 "background": {
     "scripts":  ["background.js"]
  },

  "content_scripts": [
  {
  "matches": ["https://usf.collegescheduler.com/*"],
  "js": ["RateMyBull.js", "jquery-3.3.1.min.js", "jquery-3.3.1.js"],
  "run_at": "document_idle",
   }
   ]
}

Here is the main script

setTimeout(runExtension, 1000);


function runExtension(){

  var tableElementNode = document.querySelectorAll(".section-detail-grid.table-bordered-wrap>tbody>tr>td>div");
  console.log(tableElementNode);


  for (var i = 0; i < tableElementNode.length; i++) {
  if(tableElementNode[i].children.length < 1 && tableElementNode[i].innerText != "Not Assigned") {
   tableElementNode[i].className = "professor";
  }
 }
 var professorsArray = [];
 var professorElementNode = document.querySelectorAll(".professor");
  for (var i = 0; i < professorElementNode.length; i++) {
   professorElementNode[i].id = i;
   var professorName = professorElementNode[i].innerText;
   professorName = professorName.trim();
   professorName = professorName.replace(/,/g, "");
   professorName = professorName.split([' ']);
   var firstName = professorName[1];
   var lastName = professorName[0];
   var professorObj = {
    first: firstName,
    last: lastName,
    ID: i
   };
   professorsArray[i] = professorObj;
   console.log(professorsArray[i].first);
 }
 alert("this just ran");
}
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg === 'url-update') {
        alert("TEST");
    }
});

See [this answer](https://stackoverflow.com/a/39508954). – wOxxOm Aug 14 '18 at 17:26 — wOxxOm, Aug 14 '18 at 17:26
Yeah it still doesnt run my main function again – Dp4897 Aug 14 '18 at 18:01 — Dp4897, Aug 14 '18 at 18:01

jgaul · Answer 1 · 2018-08-14T22:58:56.750

Content scripts like RateMyBull.js run in a totally separate environment from the background page (on, but somewhat isolated from, a webpage).

If you want your background page to cause code in a content script to run, use message passing.

In your case, try changing background.js to:

chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
  if (changeInfo.status == 'complete') {

    chrome.tabs.sendMessage(tab.id, {type: "runExtension"});

  }
})

And adding a listener to your RateMyBull.js content script:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.type === "runExtension")
      runExtension();
  });

Of course, there are lots of ways a webpage can "change". See the question and associated answers wOxxOm referenced in the comments for more insight on detecting various types of changes.

Chrome extension- How to have your main script run every time a page loads

1 Answers1