So, I followed the tutorial here : https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
Where you create a simple extension that modifies the DOM injecting a script.
But then I added these lines on borderify.js (a content script) :
console.log(window); //Prints an object that has a "$" property;
console.log(window.$); //Undefined
console.log($); //Error, "$" is undefined
And then I enabled it in a website I knew had JQuery in its script tags.
Which is very confusing for me, why is it that when I print the window object, it shows me an object that has the $ property, but then I try to access it, it doesn't exist?
And how do I access it?
There are some similar questions but they are all very old and it's a rapidly changing subject.
(Please note this is unrelated to JQuery, it's just an example)
You might want to read Sharing objects with page scripts on MDN, especially the warning!
This should work for your use-case:
console.log(window.wrappedJSObject.$)