0

I am working on a chrome extension manifest v3 for an ecommerce website. I have spent hours trying to figure out a way to inject content script to a particular link on the website. I have tried all the combinations with different "run_at" parameters in manifest.json and checking for all the "readystates" in contentScript eg:

Manifest.json
"run_at": "document_start",
      "js": ["contentScript.js"]

contentScript.js
if(document.readyState === 'interactive'){
    document.addEventListener('readystatechange', function (event) {
    if(this.readyState === 'complete){
       console.log('loading complete');
   }
    
}

Manifest.json
"run_at": "document_end",
      "js": ["contentScript.js"]

contentScript.js
if(document.readyState !== 'complete'){
    document.addEventListener('readystatechange', function (event) {
    if(this.readyState === 'complete){
       console.log('loading complete');
   }
    
}

etc etc..

Then I tried Method 1 from this answer Use a content script to access the page context variables and functions

script.js
console.log('hello from injected script')

contentscript.js

var s = document.createElement('script');
s.src = chrome.runtime.getURL('script.js');
s.onload = function () {
  this.removeEventListener;
};
(document.head || document.documentElement).appendChild(s);


manifest.json
"web_accessible_resources": [
    {
      "resources": ["script.js"],
      "matches": ["<all_urls>"]
    }
  ]

Also tried mutation observer but no luck. After spending almost a day I realized that the reason content script only works on refresh is because navigating links on this particular website does not trigger window/document load events(because I never see the loading icon trigger while navigating links even for a split second and confirmed by pinning live expression to observe document.readystate which never changed after initial page load) which to my understanding is the entry point for content script so content script code is never reached unless I manually refresh the page which triggers the onload and content script gets injected. I looked at the network tab and when clicking links it only makes xhr requests to retrieve resources(Is it why load events never triggers?). The only options I can think of is injecting contentscript in the homepage and then use mutation observer to figure out when the user is on the link I want to modify DOM by figuring out when certain element is available or alternatively use polling to check for an element and inject my html, both of the options feel a bit hacky. So my question is, Is there a better way to achieve what I want or am I looking at the problem completely upside down? Thanks in advance!

Amrit
  • 13
  • 3
  • Definitely sounds like a Single Page App (SPA). You could try listening to [Popstate Event](https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event). Otherwise Mutation Observer doesn't sound unreasonable – charlietfl Jul 21 '21 at 00:53
  • Hi thanks for the response. By pointing out that its an SPA it led me to research more and I think I may have found the answer on another thread [link](https://stackoverflow.com/questions/68347075/how-do-i-write-a-chrome-extension-that-applies-a-content-script-to-a-single-page) which is basically what you just stated. I will report back once its working and mark your response as answer. Cheers! – Amrit Jul 21 '21 at 02:23
  • @charlietfl apparently I cant mark your comment as answer but just want to thank you for the answer as the solution you proposed worked. Cheers! – Amrit Jul 22 '21 at 01:27

0 Answers0