Remplacez les annonces Google par des extensions chromées
Cet article décrit comment cibler et remplacer Google Ads sur les pages Web par l'extension Chrome en utilisant les fonctionnalités de Google Publisher Tag (GPT) et AdSense. Le tutoriel explique en détail comment trouver et remplacer les emplacements publicitaires via le code JavaScript, et fournit des exemples complets d'extension de chrome, y compris les codes pour manifeste.json, service-worker.js et pagescript.js, pour aider les développeurs à créer rapidement des fonctions de remplacement d'annonces personnalisées.
Remplacez les annonces Google AD Manager
Si le site Web utilise Google AD Manager (anciennement DoubleClick pour les éditeurs) pour diffuser des annonces, vous pouvez utiliser l'API Googletag pour cibler et remplacer les emplacements publicitaires.
pour (i = 0; i <googletag.pubaads getslots length i var slotdomid="googletag.pubaads" .getsloteelementid document.getelementbyid .innerhtml="'yourCustomInnerHtml';"><p> Ce code traverse tous les emplacements publicitaires obtenus via googletag.pubads (). GetSlots (), puis utilise getSLoteElementId () pour obtenir le dom de l'emplacement AD, et trouve enfin l'élément DOM correspondant via document.getElementyId () et remplace son innerhtml.</p> <p> <strong>Notes:</strong></p> <ul> <li> Cette méthode ne s'applique qu'aux sites à l'aide de Google Publisher Tag (GPT).</li> <li> Assurez-vous que ce code est exécuté une fois l'objet Googletag disponible, généralement une fois le DOM chargé.</li> </ul> <h3> Remplacer les annonces AdSense</h3> <p> Si un site Web utilise AdSense pour diffuser des annonces, vous pouvez utiliser différentes méthodes pour cibler les emplacements publicitaires. En règle générale, les annonces AdSense sont enveloppées dans un élément INS.ADSBYGOOGLE.</p> <pre class="brush:php;toolbar:false"> var adsenseblocks = document.QuerySelectorAll ('ins.adsbygoogle'); for (i = 0; i <adsenseblocks.length i var slotdomid="adsenseblocks" .parentnode.id document.queryselector .innerhtml="'YourCustomInnerHtml';"><p> Ce code utilise d'abord Document.QuerySelectorAll ('ins.adsbygoogle') pour trouver les éléments INS de toutes les annonces AdSense, puis obtenir l'ID de son élément parent, et enfin trouver l'élément DOM correspondant via Document.QuerySelector () et remplacer son innerhtml.</p> <p> <strong>Notes:</strong></p> <ul> <li> Cette méthode suppose que l'emplacement AD AdSense est inclus dans un élément parent avec un ID.</li> <li> Assurez-vous d'exécuter ce code après le chargement de l'annonce AdSense, sinon la fente AD ne peut être trouvée.</li> </ul> <h3> Exemple d'extension chromée</h3> <p> Afin d'exécuter le code ci-dessus dans l'extension Chrome, les scripts doivent être injectés dans le dom de la page de destination. Voici un exemple complet d'extension chromée:</p> <p> <strong>manifeste.json</strong></p> <pre class="brush:php;toolbar:false"> { "nom": "votre nom d'extension", "action": {}, "manifeste_version": 3, "Version": "0.1", "Description": "blablabla", "Autorisations": [ "activetab", "webnavigation", "script" ], "host_permissions": [ "https: // * /" ], "arrière-plan": { "Service_Worker": "Service-worker.js" }, "web_accessible_resources": [{{{ "ressources": ["pagescript.js"], "Matches": ["<all_urls>"] }] }</all_urls>
service-travailleur.js
chrome.tabs.onupdate fonction insertScript () { var s = document.CreateElement ('script'); s.src = chrome.runtime.getUrl ('pagescript.js'); s.onload = function () {this.remove (); }; (document.head || document.DocumentElement) .APPEndChild (s); } chrome.webnavigation.oncompleted.addListener ((tab) => { chrome.scripting.executescript ( { Target: {Tabid: Tabid}, func: insertScript }); }); });
pagescript.js
fonction customHtml () { pour (i = 0; i <googletag.pubaads getslots length i var slotdomid="googletag.pubaads" .getsloteelementid document.getelementbyid .innerhtml="'<H1"> yourCustomInnerHtml '; } } // Ajouter GPT EventListeners pour détecter les annonces de rafraîchissement et de paresseux googletag.pubads (). addEventListener ("slotonload", (événement) => { const slot = event.slot; CustomHtml (); });</googletag.pubaads>
Explication du code:
- Manifest.json: définit les métadonnées de l'extension, y compris le nom, la version, les autorisations, etc. Le champ d'autorisations déclare les autorisations requises par l'extension, telles que ActiveTab, webnavigation et script. Le champ host_permissions spécifie le nom de domaine auquel l'extension peut accéder. Le champ Web_Accessible_Resources permet aux pages Web d'accéder aux ressources dans l'extension, telles que pagescript.js.
- Service-Worker.js: est un script d'arrière-plan utilisé pour écouter les événements de chargement des pages Web. chrome.tabs.onupdated.addListener écoute l'événement de mise à jour de la page onglet et exécute la fonction InsertScript une fois la page Web chargée. La fonction insertScript crée un élément
, définit l'URL de pagescript.js à l'attribut SRC et ajoute l'élément à l'élément ou de la page Web. - pagescript.js: contient le code de remplacement de l'annonce réel. La fonction CustomHTML implémente la logique de remplacer les emplacements AD. googletag.pubads (). addEventListener ("slotonload", (événement) => {...}); Ajoutez un écouteur d'événements GPT pour détecter les annonces rafraîchies et chargées paresseuses, en vous assurant que la fonction CustomHTML est exécutée après le chargement de l'annonce.
Comment utiliser:
- Enregistrez le code ci-dessus dans un autre fichier pour vous assurer que le nom de fichier est cohérent avec la référence dans le code.
- Chrome ouvert: // Extensions / dans le navigateur Chrome.
- Activer le "mode développeur".
- Cliquez sur "Chargez l'extension dézippé" et sélectionnez le dossier contenant les fichiers ci-dessus.
Maintenant, lorsque vous visitez une page Web contenant Google ADS, l'extension remplace automatiquement l'annonce par votre contenu personnalisé.
Résumer:
Avec les méthodes ci-dessus, vous pouvez cibler et remplacer efficacement les publicités Google dans vos pages Web. Choisissez la méthode appropriée pour cibler les emplacements publicitaires en fonction du service publicitaire (Google AD Manager ou AdSense) utilisé par le site Web. Les extensions de chrome vous permettent d'intégrer ces méthodes dans votre navigateur pour permettre le remplacement de l'annonce automatisée. Assurez-vous de noter que la modification du contenu des sites Web d'autres personnes peut impliquer des problèmes juridiques et moraux, veuillez donc l'utiliser avec prudence.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Les types de conditions avancées de TypeScript implémentent le jugement logique entre les types via TextendU? X: Y Syntaxe. Ses capacités de base se reflètent dans les types de conditions distribuées, l'inférence de type inférieure et la construction d'outils de type complexe. 1. Le type conditionnel est distribué dans les paramètres de type nu et peut automatiquement diviser le type de joint, tel que pour obtenir la chaîne [] | nombre []. 2. Utiliser la distribution pour construire des outils de filtrage et d'extraction: exclut exclut les types via TextendU? Never: T, extraire extrait les points communs via TextendU? T: jamais, et des filtres non nuls nuls / non définis. 3

MicrofronttendSSolvescalingCallegengeSInLargeTeamsByAnabled indépendante développement et élaboration de choOsanIntegrationsStrategy: UseModuleFederationInwebpack5ForruntimeLoadingAndTrue Independence, Build-Time IntegrationForsIpleSetups, Oriframes / webcomponents webcomponents

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

FacultatifChaining (?.) Injavascriptsafely accessifiedProperties enrituration

Cet article explore en profondeur comment générer automatiquement des puzzles solvables pour le jeu de puzzle à double choco. Nous introduirons une structure de données efficace - un objet cellulaire basé sur une grille 2D qui contient des informations limites, des couleurs et de l'état. Sur cette base, nous développerons un algorithme récursif de reconnaissance de blocs (similaire à la recherche en profondeur-première) et comment l'intégrer dans le processus de génération de puzz itérative pour garantir que les énigmes générées respectent les règles du jeu et sont résolubles. L'article fournira un exemple de code et discutera des considérations clés et des stratégies d'optimisation dans le processus de génération.

La méthode la plus courante et recommandée pour supprimer les classes CSS des éléments DOM à l'aide de JavaScript est via la méthode Suppor () de la propriété ClassList. 1. Utilisez Element.ClassList.Remove ('ClassName') pour supprimer en toute sécurité une seule ou plusieurs classes, et aucune erreur ne sera signalée même si la classe n'existe pas; 2. La méthode alternative consiste à utiliser directement la propriété ClassName et à supprimer la classe par remplacement de chaîne, mais il est facile de causer des problèmes en raison d'une correspondance régulière ou d'un traitement d'espace incorrect, donc il n'est pas recommandé; 3. Vous pouvez d'abord juger si la classe existe, puis la supprimer via element.classList.Contains (), mais ce n'est généralement pas nécessaire; 4.Classlist

La syntaxe de classe de JavaScript est un sucre syntaxique hérité par les prototypes. 1. La classe définie par la classe est essentiellement une fonction et des méthodes sont ajoutées au prototype; 2. Les instances recherchent les méthodes à travers la chaîne prototype; 3. La méthode statique appartient à la classe elle-même; 4. s'étend dans la chaîne prototype et la couche sous-jacente utilise toujours le mécanisme du prototype. La classe n'a pas changé l'essence de l'héritage du prototype JavaScript.

Tout d'abord, utilisez npxstoryBookInit pour installer et configurer le livre de contes dans le projet React, exécutez npmrunstorybook pour démarrer le serveur de développement local; 2. Organisez la structure des fichiers de composants en fonction des fonctions ou des types et créez des fichiers .stories.js correspondants pour définir différents états dans chaque répertoire de composants; 3. Utilisez les systèmes Args and Controls de Storybook pour réaliser des ajustements d'attribut dynamiques pour faciliter les tests de divers états interactifs; 4. Utilisez des fichiers MDX pour écrire des documents texte riches contenant des spécifications de conception, des instructions d'accessibilité, etc., et prendre en charge le chargement MDX via la configuration; 5. Définissez le jeton de conception via le thème.js et utilisez Aperçu.js
