web-dev-qa-db-fra.com

Cliquer sur un élément d'une page via Chrome Extension

J'essaie de créer une extension chrome qui cliquera sur un élément d'une page Web lorsque vous cliquez sur un bouton de l'extension, mais pour une raison quelconque, cela ne fait rien, peu importe ce que j'essaie.

Je l'ai jusqu'ici

manifest.json

{  
  "manifest_version": 2,  

  "name": "Such Activity",  
  "description": "Wow",  
  "version": "1.0",    
  "permissions": [  
        "tabs", "<all_urls>"  
    ],  

  "browser_action": {  
    "default_icon": "icon.png",  
    "default_popup": "popup.html"  
  },  
     "content_scripts": [  
        {  
            "matches": [ "<all_urls>" ],  
           "js": ["content_script.js"]  
            }  
        ]  
}

popup.html

<!doctype html>  
<html>  
  <head>  
    <title>activity</title>  
    <style>  
    </style>  
    <script src="content_script.js"></script>  
  </head>  
  <body>  
  <button id="clickactivity">click</button>  
  </body>  
</html>

content_script.js

function ClickPlanet()
    {
        var planets = document.getElementsByClassName("planet-name");
        var randomplanet = Math.floor(Math.random() * planets.length);
        var clickplanet = planets[randomplanet];
        clickplanet.click();
        setInterval(function () { ClickPlanet() }, 2000);
    }

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('clickactivity').addEventListener('click', ClickPlanet);
});

Tout ce que j'ai l'impression est cette erreur

Uncaught TypeError: Cannot read property 'click' of undefined

Je bidouille avec ça depuis des heures, mais je n'arrive pas à le faire fonctionner. Toute aide est appréciée!

javascriptgoogle-chromegoogle-chrome-extensionclick
18
Rico Clark

Problème

Il semble que vous compreniez mal le comportement du script de contenu.

Citant la documentation officielle:

Les scripts de contenu sont des fichiers JavaScript qui s'exécutent dans le contexte des pages Web. En utilisant le modèle d'objet de document (DOM) standard, ils peuvent lire les détails des pages Web visitées par le navigateur ou y apporter des modifications.

Donc, utiliser votre content_script.js Dans votre popup.html N'a pas beaucoup de sens , et il en résulte évidemment une erreur car vous n'avez aucun bouton avec class="planet-name" dans votre page popup.html.

Solution

Pour faire ce que vous voulez, vous devez créer un script différent pour votre popup.html, Et ajouter un écouteur à ce bouton, donc quand il est cliqué, vous pouvez injecter le script content_script.js Dans la page pour cliquer sur l'élément "planète".

Vous devrez donc:

  1. Modifiez votre manifest.json En supprimant le champ "content_scripts"
  2. Créez un fichier popup.js À ajouter à votre page popup.html
  3. Ajoutez un écouteur pour le bouton, cliquez à l'intérieur de popup.js Pour injecter le fichier content_script.js En utilisant chrome.tabs.executeScript()
  4. Modifiez votre content_script.js Pour le faire cliquer sur le bouton directement sur la page

  1. Tout d'abord, éditez votre manifest.json, Il devrait ressembler à ceci :

    {  
    "manifest_version": 2,  

    "name": "Such Activity",  
    "description": "Wow",  
    "version": "1.0",    
    "permissions": ["tabs", "<all_urls>"],  

    "browser_action": {  
        "default_icon": "icon.png",  
        "default_popup": "popup.html"  
    }
}

  2. Ensuite, supprimez votre content_script.js Du popup.html Et remplacez-le par le script popup.js:

    <!doctype html>  
<html>  
    <head><title>activity</title></head>  
<body>  
    <button id="clickactivity">click</button>  
    <script src="popup.js"></script> 
</body>
</html>

  3. Créez le script popup.js et ajoutez l'écouteur au bouton qui injectera le script dans la page actuelle:

    function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        // query the active tab, which will be only one tab
        //and inject the script in it
        chrome.tabs.executeScript(tabs[0].id, {file: "content_script.js"});
    });
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

  4. Maintenant, dans votre content_script.js, Vous devrez cliquer directement sur le bouton, et vous n'aurez pas non plus besoin d'utiliser DOMContentReady, car Chrome attend pour injecter le script lui-même. Ainsi, votre nouveau content_script.js sera:

    function clickPlanet() {
    var planets = document.getElementsByClassName("planet-name"),
        randomplanet = Math.floor(Math.random() * planets.length),
        clickplanet = planets[randomplanet];

    clickplanet.click();
}

clickPlanet();

Exemple de travail

Téléchargez un exemple fonctionnel de l'extension depuis [~ # ~] ici [~ # ~] .

Documentation

Je vous suggère fortement de consulter la documentation des méthodes utilisées dans mon exemple pour bien comprendre leur comportement et leurs propriétés, voici quelques liens que vous peut être utile:

32
Marco Bonelli