Remove $ in JavaScript for AdGuard Scripts: A Complete Guide (2026)

When working with JavaScript, especially in environments like AdGuard, you may encounter issues with using the jQuery-specific $ syntax. AdGuard's JavaScript rules syntax does not support the dollar sign, which can lead to scripts not functioning as intended. In this guide, we will explore how to adapt your JavaScript code for AdGuard by removing the $ symbol and provide alternatives to ensure your scripts run smoothly.

Key Takeaways

• Understand why the $ symbol is not supported in AdGuard.
• Learn to adapt jQuery code to vanilla JavaScript for compatibility.
• Gain insights into AdGuard's JavaScript rule syntax limitations.
• Explore common errors and how to troubleshoot them effectively.

Introduction

AdGuard is a popular ad-blocking and privacy protection tool that allows users to create custom filtering rules using its own JavaScript rules syntax. However, this syntax does not support the $ symbol, which is commonly used in jQuery to denote the jQuery object. This limitation can be problematic for developers who are accustomed to using jQuery in their JavaScript projects. Understanding how to modify your code to work with vanilla JavaScript is crucial when writing scripts for AdGuard.

This tutorial will guide you through the process of converting jQuery-based JavaScript code to vanilla JavaScript for use within AdGuard. We will cover the reasons behind the syntax limitation, how to rewrite common jQuery patterns using vanilla JavaScript, and how to troubleshoot common issues that arise during the process.

Prerequisites

• Basic understanding of JavaScript and jQuery.
• Familiarity with web development concepts.
• AdGuard installed on your system for testing scripts.

Step 1: Understanding AdGuard's JavaScript Syntax Limitations

AdGuard's JavaScript rules syntax is designed for creating custom filtering rules but with some limitations. The main restriction is the lack of support for the $ symbol, which is commonly used in jQuery. This is because AdGuard's syntax does not support the jQuery library out of the box. Therefore, developers need to rewrite their code using vanilla JavaScript methods.

Step 2: Converting jQuery to Vanilla JavaScript

To adapt your jQuery code for AdGuard, you need to convert it to vanilla JavaScript. Let's take a look at a common jQuery pattern and how it can be rewritten:

Original jQuery Code

$(document).ready(function () {
    $(".over").each(function() {
        var el = $(this);
        var value = parseFloat(el.text());
        if (value > 1) {
            el.css("color", "red");
        }
    });
});

Converted Vanilla JavaScript Code

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll(".over").forEach(function(el) {
        var value = parseFloat(el.textContent);
        if (value > 1) {
            el.style.color = "red";
        }
    });
});

In the vanilla JavaScript version, we replace $(document).ready() with document.addEventListener("DOMContentLoaded") and $(".over").each() with document.querySelectorAll(".over").forEach(). Additionally, el.text() is changed to el.textContent, and el.css() is replaced with el.style.

Step 3: Testing and Debugging Your Script

After converting your code, test it in a live environment to ensure it functions correctly. AdGuard allows you to create user scripts for testing. If the script does not work as expected, double-check your syntax and ensure all jQuery-specific methods have been replaced with their vanilla JavaScript counterparts.

Common Errors/Troubleshooting

Here are some common issues you might encounter when converting your code and how to address them:

• Element Selection: Ensure you are using document.querySelector or document.querySelectorAll for element selection in place of jQuery selectors.
• Event Listeners: Use addEventListener instead of jQuery's on method for attaching event listeners.
• Style Manipulation: Directly modify the style property instead of using jQuery's css method.

Conclusion

By understanding the syntax limitations of AdGuard and learning how to convert jQuery to vanilla JavaScript, you can ensure your scripts run smoothly within the AdGuard environment. This process not only improves compatibility but also enhances your JavaScript skills by encouraging the use of native browser methods.

Frequently Asked Questions

Why can't I use the $ symbol in AdGuard?

The $ symbol is part of jQuery syntax, which AdGuard does not support in its JavaScript rules. You need to use vanilla JavaScript instead.

How do I select elements in vanilla JavaScript?

Use document.querySelector or document.querySelectorAll to select elements, similar to jQuery's selectors.

What is the equivalent of $(document).ready() in vanilla JavaScript?

Use document.addEventListener("DOMContentLoaded") as the equivalent in vanilla JavaScript.

Frequently Asked Questions

Why can't I use the $ symbol in AdGuard?

The $ symbol is part of jQuery syntax, which AdGuard does not support in its JavaScript rules. You need to use vanilla JavaScript instead.

How do I select elements in vanilla JavaScript?

Use document.querySelector or document.querySelectorAll to select elements, similar to jQuery's selectors.

What is the equivalent of $(document).ready() in vanilla JavaScript?

Use document.addEventListener("DOMContentLoaded") as the equivalent in vanilla JavaScript.