Kevin Powell - Community•12mo ago

jQuery Library Conflict (TamperMonkey)

Hello all! I'm writing a short little script for a website I use frequently using TamperMonkey. I'm coding in jQuery, but the site uses a different library. These two libraries conflict and break some of the site's built-in coding (all my customizations work). I went through this https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/ and it seemed perfect for what I was trying to do, but TamperMonkey insists that jQuery is an undefined function and cannot be used. When I force it to run on the site, it throws a console error as well. This is what I have so far, with the main code snipped since it's not relevent.

// ==UserScript==
// @name         {snipped}
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  {snipped}
// @author       You
// @match        {snipped}
// @require      http://code.jquery.com/jquery-3.7.1.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pokefarm.com
// @grant        none
// ==/UserScript==

/* global jQuery */

jQuery.noConflict();

jQuery( document ).ready(function( $ ) { ... });

// ==UserScript==
// @name         {snipped}
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  {snipped}
// @author       You
// @match        {snipped}
// @require      http://code.jquery.com/jquery-3.7.1.min.js
// @icon         https://www.google.com/s2/favicons?sz=64&domain=pokefarm.com
// @grant        none
// ==/UserScript==

/* global jQuery */

jQuery.noConflict();

jQuery( document ).ready(function( $ ) { ... });

15 Replies

Jochem•12mo ago

what are you using jQuery for?

Zach..OP•12mo ago

The code itself modifies the buttons on the site to stack over one another and disappear on click. The site is a petsim clicker game ^^

Jochem•12mo ago

but what specifically are you using jquery for? Just the $(css selector) functionality?

Zach..OP•12mo ago

I can paste the full code if you want it. I didn't think it would be needed :0

Jochem•12mo ago

most of what jquery was classically used for has been implemented in JS now, so you may not need it at all

Zach..OP•12mo ago

I couldn't get it to work in JavaScript classic at ALL. Likely because the selector was more confusing and i was doing it wrong.

Zach..OP•12mo ago

message.txt

Jochem•12mo ago

so just to pick a random bit:

$("#notice").css({
    display: "none",
    userSelect: "none"
});

$("#notice").css({
    display: "none",
    userSelect: "none"
});

can be translated to

const notice = document.querySelector('#notice')
notice.style.display = 'none';
notice.style.userSelect = 'none';

const notice = document.querySelector('#notice')
notice.style.display = 'none';
notice.style.userSelect = 'none';

document.querySelector and document.querySelectorAll are pretty much drop in replacements for $()

Zach..OP•12mo ago

Is there no way to resolve a conflict though? I'd rather not translate it all if I can help it I definitely could if theres no way to resolve a conflict easily, but I'd be surprised if there wasn't

Jochem•12mo ago

hm, you probably can, but I don't personally know how

Zach..OP•12mo ago

Okay, thanks for letting me know! If I dont have anyone else figure it out I may come back for some help translating it all back to JS from jQuerry

Jochem•12mo ago

if there's a conflict, is $ just available in the tampermonkey script without including it?

Zach..OP•12mo ago

I don't think so, it rejects it unless you add /* global $*/

Jochem•12mo ago

hm, then I hope someone else who does know comes along 🙂 sorry I couldn't help

Zach..OP•12mo ago

It's okay! I still appreciate it ❤️

Gaming

Programming

jQuery Library Conflict (TamperMonkey)