Access page's selector or JQuery instance from a Chrome Extension

Question

I'll try to explain as briefly as possible.

I developed a Chrome extension and I have problems with some of the functionalities.

The problem I'm having is I need to trigger some events on the website the extension has access to but some scripts that work on the console, don't work the same way if executed from my content js of the Chrome extension (even if I use my own version of jQuery that I can add to my extension if needed).

Example:

If I execute window.$ or jQuery on the console it returns ƒ (a,b){return new n.fn.init(a,b)}. If I run that on my script, even if I wait until everything is loaded, even if I set a wait of 10 seconds before checking to make sure everything is loaded, it tells me that "$ is undefined" when I don't have jQuery on my Chrome extension.

Also, console.log(window.$.fn) executed from the console returns Object [jquery: "1.12.4", selector: "", constructor: ƒ, toArray: ƒ, get: ƒ, …] but if I run that from my content script having jQuery activated returns Object [jquery: "3.5.0", constructor: ƒ, toArray: ƒ, get: ƒ, pushStack: ƒ, …] since I have that version installed on the extension.

I need to do this (which works from the console but not from the content script of the extension):

$("#id").val(123).val());
$("#id").trigger('keyup');

I've also tried the native .dispatchEvent() way of doing this but nothing happens, it returns true when executed but nothing happens.

That's why I'm asking: Is there a way to access the page's jQuery instance from an external file (in this case my content.js script of the chrome extension)?

I can change the DOM but that's not enough, even if I change the value of the inputs of the form for some reason the page doesn't recognize the change. The only working way I've found is triggering manually the keyup event after changing the value with jQuery, but only works if I do it from the console.

Any clue?

Yes, [Insert code into the page context using a content script](https://stackoverflow.com/a/9517879) — wOxxOm, Apr 17 '20 at 17:09
I know with regards to userscript addons like greasemonkey and tampermonkey, to acces the window you sometimes have to configure it to allow unsafe window, before you can access it. — Taplar, Apr 17 '20 at 17:31
@wOxxOm this looks interesting, but it seems like you need to be the owner of both the page and the extension. I can only modify my extension's code since the page is not mine. The extension is trying to automate some stuff so the page is easier to use. — Jose Climent, Apr 17 '20 at 17:37
That method works on any page so you don't need to own it. The answer contains an exact solution for this task to be used in your extension. If you elaborate on why you thought that I'll try to edit the answer to clarify the confusing part. — wOxxOm, Apr 17 '20 at 17:44
@wOxxOm In comment https://stackoverflow.com/a/19312198/7206287 they point out you need a receiver and an initiator, it doesn't matter who is who but you need to either dispatch and event from the page or add an event listener. And I can do this on the content script but not directly on the page since I don't have access to the code. Maybe I'm wrong. — Jose Climent, Apr 17 '20 at 17:53
No, that answer says "page script" to mean the "code that was added into the page context by the content script". — wOxxOm, Apr 17 '20 at 17:59

score 0 · Accepted Answer · answered Apr 18 '20 at 14:50

Following @wOxxOm's advice I managed to achieve what I wanted. I have my previous js file added as accessible on the manifest:

"web_accessible_resources": ["cont.js"]

Then I added another content script that loads the first one I had into the DOM this way:

let url = chrome.runtime.getURL('cont.js');
$("head").first().append("<script src='" + url + "' type='text/javascript'></script>");

Variables can also be defined and accessed from the page if you JSON.stringify them:

let configData = {'obj1':1, 'obj2':2}
$("head").first().append(
    "<script type='text/javascript'>let config = " + JSON.stringify(configData) + "</script>"
);

Access page's selector or JQuery instance from a Chrome Extension

1 Answers1