Kevin Powell - Community•13mo 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•13mo ago

what are you using jQuery for?

Zach..OP•13mo 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•13mo ago

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

Zach..OP•13mo ago

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

Jochem•13mo 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•13mo 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•13mo ago

message.txt

Jochem•13mo 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•13mo 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•13mo ago

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

Zach..OP•13mo 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•13mo ago

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

Zach..OP•13mo ago

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

Jochem•13mo ago

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

Zach..OP•13mo ago

It's okay! I still appreciate it ❤️

Gaming

Programming

jQuery Library Conflict (TamperMonkey)