How to remove/replace Google Ads div with a custom div
I'm building a Chrome extension for educational purposes that removes/replaces a GoogleAds div with my custom div.
How do I locate the google-ad divs? Is there a specific id or class associated with it?
This is how I'm injecting my code into the website:--
content-script.js
var div=document.createElement("div"); // is there any specific divID associated with it? document.body.appendChild(div); div.innerText="test123"; EDIT 1
Updating the structure as requested by @rabsom
<div class="q-box qu-pb--small" style="box-sizing: border-box;"> <div class="q-box qu-cursor--pointer dom_annotate_google_ad" id="div-gpt-ad-1633993162946-0-init-a" style="box-sizing: border-box;" data-google-query-id="CNy0k-Dxiv8CFYCFZgId2jkKvA"> <div id="google_ads_iframe_/21680945556/li_stick_home_and_ad_react_0__container__" style="border: 0pt none; margin: auto; text-align: center; width: 300px; height: 250px;"> <iframe frameborder="0" src="https://515625e180dff516c1055c5fa3af1b19.safeframe.googlesyndication.com/safeframe/1-0-40/html/container.html" id="google_ads_iframe_/21680945556/li_stick_home_and_ad_react_0" title="3rd party ad content" name="" scrolling="no" marginwidth="0" marginheight="0" width="300" height="250" data-is-safeframe="true" sandbox="allow-forms allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation" role="region" aria-label="Advertisement" tabindex="0" data-google-container-id="1" style="border: 0px; vertical-align: bottom;" data-load-complete="true"></iframe> </div> </div> </div> EDIT 2
I'm able to use the googletag now. However, it shows up after the ads have been loaded. So, I wait for the DOM to be loaded completely.
document.addEventListener('readystatechange', event => { if (event.target.readyState === "complete") { for (i = 0; i < googletag.pubads().getSlots().length; i++) { var slotDomId = googletag.pubads().getSlots()[i].getSlotElementId(); document.getElementById(slotDomId).innerHTML = '<h1>yourcustomInnerHTML</h1>'; } } }); I try the above code, but even after the DOM has been loaded, it shows googletag as undefined.