Get rid of the ad wrapper that prompts users to disable their adblocker on the news page

Everyday, I visit the Norwegian news site "www.vg.no" to catch up on the latest news. However, one day while browsing on my school computer with adblock installed, I noticed that the ads were removed but an ad wrapper appeared asking to turn off adblock. Being a student of information technology, I decided to develop a chrome extension to completely eliminate these ad wrappers.

After creating the extension and using a content_script that executed a script once the page loaded, which I named script.js

My script successfully removed the ad wrappers, but I encountered a new challenge. The div that wrapped around the ad wrapper changed its class name on every page load due to a script on the site that randomized it.

The randomization script looked complicated with various styles and elements being generated dynamically. I needed to find a way to target the div containing the ad even with the changing class names. Additionally, within the div, there was a paragraph <p class="t1"> that I attempted to remove, but it didn't work.

Any suggestions on how I could identify the class name of the div to delete it? Perhaps converting the entire script into a string and searching for the dummy variable may help. I also wondered if there's a way to create an uneditable function to prevent it from being overridden once the page fully loads.

javascripthtmlcss

Answer №1

It's been nearly 2 years now, and during that time I have delved into the world of JavaScript and learned a plethora of new skills. I decided to revisit this project, and surprisingly, it only took me less than 10 minutes to come up with a solution, which turned out to be quite simple.

I opted to completely disregard the "dummy" script provided and removed the first 3 child div elements of the container div. While this solution may be somewhat hardcoded, it works like a charm. Now, I have successfully implemented the extension :)

For those who are curious, here is the straightforward .js code snippet:

window.addEventListener("load", function(){
var topAdWrapper = document.querySelector(".reg-grid-container");

for(var i = 0; i < 6; i++)
{
    topAdWrapper.removeChild(topAdWrapper.childNodes[0]);
}

var body = document.querySelector("body");
body.style.backgroundImage = "";
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dragging the identical li element from the div for the second time should not trigger a drag and drop action

After successfully dragging and dropping an element from <div id="catalog" > into a box, specifically <div id="dialogIteration">, on the first attempt everything works as expected. However, upon attempting to drag and drop the same element for ...

jqueryhtmljquery-ui-draggablejquery-ui-droppable

Utilize the onChangeText function in React Native to filter out each individual value within a nested array

I currently have an array with nested children in it, where the children can range from one to multiple values. I am working on implementing a local filter within my component. Whenever a user types anything into the textInput, the application will display ...

javascriptangularjsreact-native

Using JavaScript's regular expressions to identify a code block that commences with a specified pattern

Currently, I am working on a JavaScript script and I am in need of a Regex pattern to quickly match "JSDocs". The specific pattern that I am trying to match looks like this: # this is block1 /// text /// text /// text /// text # this is block2 /// text // ...

javascriptregex

There appears to be a malfunction in the socket rooms, as they are not operating

I have set up a code where sockets are being sent to the wrong person, and I am unable to figure out why. Whenever I update one user's status, it also updates the other user's status. Snippet of Code io.on('connection', function(socke ...

javascriptnode.jssocket.io

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

How come an <a> tag is nabbing mouse clicks from a <canvas> element?

I have been experimenting with creating a 3D piano using three.js. Here is a snippet of the code I am currently working on: let renderer, camera, scene, light, keys, selectedKey; init(); render(); function init() { // Code for initializing renderer, ...

javascripthtmlcanvasthree.jsanchor

CSS sidebars are failing to display on the website

Working on a supposedly simple template turned out to be more challenging than expected. The template lacked sidebars, so I attempted to add them myself. However, my test text isn't displaying as intended. Could someone please help me identify the mi ...

htmlcss

Designing a customizable header/banner for user personalization

Is it possible to create a custom feature header generator that allows users to personalize it with colors, images, and text, then save and add it to their website? Check out the feature banner demo I created to get an idea of what I'm aiming for. (T ...

phpjqueryhtmlcss

Can we set a restriction on the maximum number of children a particular div can contain?

I'm trying to find a way to restrict the number of children in a div. The concept is that there is a selected commands div where you can drag and drop available commands (essentially buttons) from another div called available commands. However, I wan ...

javascriptjquerycssdrag-and-drop

The Quintessential Bootstrap 5 Hero

I'm struggling to determine which classes to add or remove in order to achieve the same image positioning as shown in the preview of the Bootstrap Border hero with cropped image and shadows. My image isn't aligned with the edge of the hero conta ...

htmlcssbootstrap-5

animations are not triggering when using ng-click inside ng-repeat, is there a reason why the event is not firing?

Check out the code in jsFiddler here After reviewing the code, it's clear that when the add button is clicked, a new item is pushed to the $scope.p. Each item in the ng-repeat loop has an event-binding and everything functions correctly. However, onc ...

javascriptangularjsangularjs-animation

Exploring the functionalities of can-deactivate without incorporating routing

I'm facing an issue with a parent component and multiple child components. The parent component contains a form, while each child component also has its own form. Unfortunately, all child components share the same route as the parent component and hav ...

javascriptnode.jsangularmean-stack

What will the relationships be like between the models using Sequelize?

Hello there, I'm seeking assistance in establishing the correct associations between models using Sequelize. In my project, I have three types of products, each with unique attributes as well as shared attributes. ...

javascriptnode.jsmodelsequelize.jsnode-modules

Tips for transforming intricate JavaScript arrays into a unified array and iterating through to create a table

I need help combining two arrays that contain objects and reassigning the values in a standard format. Can anyone provide some guidance? Thank you. Here is my current situation: array1 = [{Apple: Ken, Orange: Mary, Melon: Tina, Strawberry: Jessica, Mango ...

javascriptarraysloopsobject

Use JavaScript to sift through an array and exclusively retrieve items that match a specific value

I am working with an array of objects that contain a phase key, and I want to filter out only the ones that have a specific phase value. Additionally, I need to map some other key/value pairs into the final return. Here is my current code: phaseToBlocks ( ...

javascriptarraysfiltervue.jsecmascript-6

What is the best way to integrate properties subsets into your classes?

In my code, I am working with 3 classes ... class1 { constructor(a, b, c) { this.a = a; this.b = b; this.c = c; this.toClass2 = function() { // TODO: return this as an instance of class2; // the conversion would remove the un ...

javascriptdesign-patternstypescriptecmascript-6

Is there a way to update a data element within a $.get request by utilizing information from a JSON array?

Is there a way to dynamically change a data element in a $.get request using values from a JSON array? Let's take a look at an example code snippet that achieves this: $.get(url, { 'p': testerName, ...

javascriptjqueryarraysjson

Customizing the JavaScript Calendar in Qualtrics

I came across a JavaScript code snippet that allows you to embed a calendar into a Qualtrics question. Specify a date for the survey: <link href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css" rel="stylesheet" type="text/css" /> <script sr ...

javascriptqualtrics

Detecting server errors in Nuxt.js to prevent page rendering crashes: A Vue guide

Unique Context This inquiry pertains to a previous question of mine, which can be found at this link: How to handle apollo client errors crashing page render in Nuxt?. However, I'm isolating the focus of this question solely on Nuxt (excluding apollo ...

javascriptvue.jsnuxt.jsapollo

Creating a drawImg function on the HTML/JavaScript canvas

Attempting to duplicate a specified section of an image onto a canvas below, but finding that the mirrored section is resizing unexpectedly. For example, if given a map image and trying to replicate a building from it exactly below, why does the mirrored s ...

javascripthtmlhtml5-canvas