A simple ad blocker that removes specific DOM elements using CSS selectors

Latest Version

Version
0.5.0
Update
November 18, 2024
Size
219KiB
Developer
byc1999.com
Category
Users
19
Rating
0 ★
Manifest Version
3
Web Store Status
Languages Support
English (United States)
See more
Permissions
ActiveTab
Storage
WebNavigation
See more

Noads Extension

Noads: A Powerful and Customizable Ad Blocker

Tired of intrusive ads ruining your browsing experience? Noads is here to help! This lightweight yet powerful Chrome extension puts you in control of your online environment by efficiently removing unwanted advertisements and sponsored content from web pages.

Key Features:

1. Effective Ad Blocking:
Noads uses a sophisticated system of CSS selectors to identify and remove a wide range of advertisements from web pages. Our default list of selectors targets common ad formats, including:

- Banner ads
- Sidebar ads
- In-content ads
- Video ads and pre-roll advertisements
- Sponsored content
- Pop-ups and overlays

By removing these elements, Noads creates a cleaner, more focused browsing experience, allowing you to concentrate on the content that matters most.

2. Customizable Blocking Rules:
While Noads comes pre-configured with an extensive list of ad-blocking selectors, we understand that every user's needs are unique. That's why we've made it incredibly easy to add your own custom CSS selectors:

- Open the Noads popup by clicking the extension icon
- Enter your desired CSS selectors in the provided textarea
- Click \"Add Selectors\" to implement your custom rules

This flexibility allows you to target specific ad elements that might slip through the default filters or to block any other page elements you find distracting.

3. User-Friendly Interface:
Noads features a clean, intuitive popup interface that makes managing your ad-blocking settings a breeze:

- Toggle the extension on/off with a single click
- View all active blocking rules at a glance
- Add new selectors quickly and easily
- Remove individual selectors with a simple click

4. Real-Time Ad Removal:
Noads doesn't just work when a page first loads. It continuously monitors for changes to the webpage, ensuring that dynamically loaded ads are caught and removed as they appear. This proactive approach means you won't be surprised by ads that pop up as you scroll or interact with a page.

5. Performance Optimized:
We've designed Noads with efficiency in mind. By using CSS selectors and lightweight JavaScript, the extension has minimal impact on your browsing speed. In fact, by removing resource-heavy ads, Noads can often improve page load times and reduce bandwidth usage.

6. Privacy Focused:
Unlike some ad blockers that may track your browsing habits or sell your data, Noads is committed to your privacy. The extension operates entirely on your local machine and doesn't send any of your browsing data to external servers.

7. Works Across Websites:
Noads is designed to function effectively across a wide range of websites. Whether you're browsing news sites, blogs, video platforms, or social media, Noads works diligently to remove unwanted advertisements and create a more pleasant browsing experience.

8. Iframe Protection:
Noads goes the extra mile by injecting its content script into iframes. This ensures that ads embedded within iframes (a common technique used by advertisers to bypass simpler ad blockers) are also removed, providing more comprehensive ad blocking.

9. Persistent Settings:
Your ad-blocking preferences are automatically saved and synced across your Chrome installations. This means your custom selectors and on/off state will be consistent whether you're using Chrome on your desktop, laptop, or other devices.

10. Open Source:
Noads is an open-source project, which means its code is publicly available for review. This transparency allows security-conscious users to verify the extension's functionality and even contribute improvements to the project.

Technical Details:

Noads is built using modern web technologies to ensure robust performance and easy maintenance:

- Core functionality written in TypeScript, providing strong typing and improved code quality
- Styles defined using Sass, allowing for more maintainable and organized CSS
- Bundled and optimized using a custom build process for maximum efficiency
- Leverages Chrome's storage API for seamless syncing of user preferences
- Utilizes the MutationObserver API to dynamically respond to page changes

How Noads Works:

1. When you visit a webpage, Noads springs into action. It retrieves the list of ad-blocking selectors from Chrome's storage.

2. These selectors are then used to identify ad elements on the page. Any matching elements are immediately removed from the DOM, effectively making them disappear from your view.

3. Noads sets up a MutationObserver to watch for any changes to the page's structure. If new elements are added that match the ad selectors, they are promptly removed.

4. For pages with iframes, Noads injects its content script into each iframe, ensuring that ads can't hide in these embedded contexts.

5. When you add new selectors through the popup interface, they are immediately saved to Chrome's storage and applied to the current page. The page is then reloaded to ensure the new rules take effect.

6. If you toggle the extension off, Noads will stop removing elements, allowing the page to display normally. Toggling it back on will reapply the ad-blocking rules.

Default Ad-Blocking Selectors:

Noads comes pre-configured with a carefully curated list of CSS selectors designed to target common ad elements across a wide range of websites. These include:

- #ad, #ads, .adsbygoogle
- Various permutations of \"ad\" and \"ads\" in id and class attributes
- Iframe-based ads
- Video ad containers
- Elements with \"Advertisement\" in their aria-label
- And many more...

This default list provides a strong foundation for ad blocking right out of the box, while still allowing for easy customization to suit your specific needs.

Customization Examples:

Here are a few examples of how you might use custom selectors to enhance your browsing experience:

1. Block a specific annoying element on your favorite news site:
#annoying-newsletter-signup

2. Remove \"recommended content\" sections that often contain disguised ads:
.recommended-content, .you-may-also-like

3. Hide social media share buttons if you find them distracting:
.social-share-buttons

4. Block cookie consent popups (use with caution and respect site policies):
#cookie-consent-popup, .gdpr-notice

5. Remove autoplay video players that often contain ads:
.autoplay-video-container

Remember, with great power comes great responsibility. While Noads gives you the ability to remove almost any element from a webpage, we encourage using this power ethically and in compliance with website terms of service.

Commitment to Improvement:

The Noads team is dedicated to continuously improving the extension. We regularly update our default selector list to keep up with evolving ad techniques, and we're always working on performance optimizations and new features.

We also highly value user feedback. If you encounter any issues, have suggestions for improvements, or want to contribute to the project, we encourage you to visit our GitHub repository and get involved.

Privacy and Permissions:

Noads requires certain permissions to function effectively, but we're committed to using these responsibly:

- \"activeTab\": Allows Noads to interact with the current tab when you invoke it.
- \"scripting\": Necessary for injecting the content script that removes ad elements.
- \"storage\": Used to save your preferences and custom selectors.
- \"tabs\": Required for reloading tabs when settings change.
- \"webNavigation\": Helps Noads work effectively with iframes.

Rest assured, Noads does not collect any personal data or browsing history. All operations are performed locally on your machine.

Conclusion:

Noads represents a new generation of ad-blocking technology - one that puts the power in your hands. By combining effective default settings with unprecedented customization options, Noads offers a personalized solution to online advertising.

Experience the web the way it was meant to be: clean, fast, and focused on content. With Noads, you're not just blocking ads; you're reclaiming your online experience.

Install Noads today and rediscover the pleasure of distraction-free browsing!
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "manifest_version": 3, "name": "Noads", "short_name": "Noads", "version": "0.5.0", "description": "A simple ad blocker that removes specific DOM elements using CSS selectors", "permissions": [ "activeTab", "storage", "webNavigation" ], "host_permissions": [ "" ], "action": { "default_popup": "dist/index.html" }, "background": { "service_worker": "dist/background.js" }, "icons": { "16": "assets/icon-2-16.png", "48": "assets/icon-2-48.png", "128": "assets/icon-2-128.png" }, "content_scripts": [ { "matches": [ "" ], "js": [ "dist/content.js" ], "all_frames": true } ]}
Read more

How to download and manually install Noads extension for Chrome

Looking for a way to install Noads extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install Noads extensions manually, this article outlines two simple methods to effortlessly install Noads extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download Noads extension and manually install through Drag &Drop

If you ever need to manually install a Noads extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the Noads Extension by clicking the "Download CRX" button on the website.

Look for the Noads extension you wish to install. Go to the website and download the Noads extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for Noads extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the Noads extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download Noads extension for Chrome and install in Developer Mode

This is another method to install Noads extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the Noads extension file

Select and download the Noads extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the Noads extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your Noads extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the Noads extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install Noads extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

DuckDuckGo Privacy Essentials Extension · Productivity 19 2067 ★ 4.95MiB

icon

Adblock for Youtube™ Extension · Productivity 19 331479 ★ 146KiB

icon

Adblock Plus - free ad blocker Extension · Productivity 19 184990 ★ 55.82MiB

icon

Adblock all advertisement - No Ads extension Extension · Accessibility 19 349 ★ 1.52MiB

icon

Popup Blocker (strict) Extension · Productivity 19 931 ★ 147KiB

icon

Eclipse Ad Blocker Extension · Productivity 19 28 ★ 1.23MiB

icon

AdBlocker Ultimate Extension · Productivity 19 57001 ★ 19.1MiB

icon

Block Websites on Chrome Extension · Productivity 19 6 ★ 356KiB

icon

Adblock for Chrome Extension · Productivity 19 15628 ★ 2.94MiB

icon

Stands AdBlocker Extension · Productivity 19 150224 ★ 1.1MiB

icon

Total Adblock Extension · Productivity 19 0 ★ 91.26KiB

icon

Ad Blocker Chrome extension - block ads Extension · Productivity 19 67 ★ 7.11MiB

icon

Bulk URL Opener Extension · Productivity 19 46 ★ 242KiB

icon

AdGuard AdBlocker Extension · Productivity 19 62460 ★ 32.01MiB

icon

Ad blocker Chrome - Total Adblock Extension · Productivity 19 48 ★ 14.78MiB

icon

User JavaScript and CSS Extension · Developer Tools 19 564 ★ 1.62MiB

icon

Adblock for Youtube - ad blocker tool Extension · Productivity 19 1600 ★ 68.71KiB

icon

Click to Remove Element Extension · Productivity 19 532 ★ 28.63KiB

icon

Ads Blocker Extension · Accessibility 19 591 ★ 2.85MiB

icon

Clear cookies for one site Extension · Productivity 19 18 ★ 192KiB

icon

Ad Dimmer Extension · Productivity 19 2 ★ 1.39MiB

icon

Clutter Free - Prevent duplicate tabs Extension · Productivity 19 203 ★ 411KiB

icon

Smart Adblocker Extension · Productivity 19 28 ★ 4.02MiB

icon

Site Blocker - Block Site & Focus Mode Extension · Productivity 19 1178 ★ 61.47MiB