Klicken Sie auf ein element auf einer Seite durch Chrome-Erweiterung

Ich bin versuchen, um eine chrome-Erweiterung, die wird klicken Sie auf ein element auf einer Webseite wenn Sie auf eine Schaltfläche klicken, auf die Erweiterung, aber für einige Grund es tut sich nix egal was ich versuche.

Habe ich dieses bisher

manifestieren.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);
});

Alle ich scheine zu bekommen, ist dieser Fehler

Uncaught TypeError: Cannot read property 'click' of undefined

Ich habe schon hantieren mit dieser für Stunden, aber ich kann nicht ankommen es zu wirken. Jegliche Hilfe wird sehr geschätzt!

InformationsquelleAutor Rico Clark | 2014-10-15
  1. 30

    Problem

    Sieht aus wie Sie sind Missverständnis, das content-Skript-Verhalten.

    Zitieren die offizielle Dokumentation:

    Content scripts sind JavaScript-Dateien, die in den Kontext von web-Seiten. Durch die Verwendung der standard-Document Object Model (DOM), Sie können Lesen details des web-Seiten, die der browser besucht, oder änderungen vornehmen.

    So, mit Ihrem content_script.js in Ihrem popup.html macht nicht viel Sinn, und natürlich zu einem Fehler führt, weil Sie nicht haben eine Taste, mit class="planet-name" in Ihrem popup.html Seite.

    Lösung

    Tun, was Sie wollen, müssen Sie ein anderes Skript für Ihre popup.html, und fügen Sie einen listener hinzu, um diese Schaltfläche, so dass, wenn geklickt haben, können Sie Spritzen den content_script.js Skript in die Seite, um auf das "Planeten" - element.

    So müssen Sie:

    1. Bearbeiten Sie Ihre manifest.json entfernen der "content_scripts" Feld
    2. Erstellen Sie eine popup.js Datei, die Sie hinzufügen in Ihrem popup.html Seite
    3. Fügen Sie einen listener für den button, klicken Sie in popup.js zu injizieren, die content_script.js - Datei mit chrome.tabs.executeScript()
    4. Bearbeiten Sie Ihre content_script.js zu machen, klicken Sie auf die Schaltfläche direkt auf der Seite

    1. Zunächst Bearbeiten Sie Ihre manifest.json es sollte so Aussehen:

      {  
    "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. Dann, entfernen Sie Ihre content_script.js von der popup.html und ersetzen Sie es mit der popup.js Skript:

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

    3. Erstellen der popup.js Skript und fügen den listener an den button, füllt das Skript in der aktuellen Seite:

      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. Nun, in Ihrem content_script.js, müssen Sie klicken Sie auf die Schaltfläche direkt, und auch Sie müssen nicht verwenden DOMContentReady, da Chrome wartet, um zu injizieren, das script von selbst. Also, Ihre neue content_script.js werden:

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

    clickplanet.click();
}

clickPlanet();

    Beispiel arbeiten

    Laden Sie ein funktionierendes Beispiel für die Erweiterung von HIER.

    Dokumentation

    Ich empfehle Ihnen, einen Blick in die Dokumentation für die Methoden, die bei meinem Beispiel zu verstehen, Ihr Verhalten und Ihre Eigenschaften, hier sind einige links, die Sie nützlich finden können:

    • Wow, vielen Dank. Ich verstehe die Art und Weise, die Sie injizieren müssen das Skript jetzt vollständig, während zuvor es war alles nur... vage. Doch, es funktioniert immer noch nicht. Ich bin nicht immer der Fehler nicht mehr auf, aber das element wird nicht geklickt, die entweder
    • Dann fügen Sie eine Warnung wie alert('CONTENT SCRIPT: I am running!') in Ihrem content_script.js, so können Sie sehen, ob es wird gespritzt korrekt...
    • Keine Warnung. Als Referenz, dies ist die website, die ich bin versucht, diese zu: dl.dropboxusercontent.com/u/17879954/EN%20Betelgeuse.htm Der Planeten, die müssen angeklickt werden, sind auf der rechten Seite
    • Ich bearbeitet die Frage gestellt und es getestet, indem ich mich auf die Seite, die Sie zur Verfügung gestellt. Jetzt funktioniert es, es gab ein kleines problem, weil mit run_at: "document_end" in eine Seite bereits geladen ist muss eigentlich gar nichts mehr laufen. Laden Sie Ihre Erweiterung mit der neuen code meiner Antwort und sehen, ob es funktioniert.
    • Ich habe auch einen download-link zum herunterladen der Beispiel, wenn Sie wollen.
    • Dank einer Tonne! Es funktioniert perfekt. Ich habe auch jetzt verstehen, wie die Einspritzung funktioniert, so dass ich weiß für die Zukunft. Du bist der beste
    • danke, du bist willkommen 🙂
    • Jetzt habe ich nur noch ein verbleibendes Problem, wenn das Skript ausgeführt wird, und es klickt, und die Seite wechselt zu einer anderen URL. Ich brauche das Skript hartnäckig sein, so wird es auf alle 2 Sekunden. Auch, was ist die Funktion der background.js dass Sie im manifest deklariert?
    • oh, vergessen den background.js kopiert habe ich das manifest einer meiner extensions, Sie brauchen es nicht. By the way, wenn Sie möchten, dass das Skript auf alle zwei Sekunden und die Seite änderungen, die Sie haben, um den hintergrund, aber es ist ein bisschen kompliziert: Sie verwenden sollten, message passing und hören Sie die Registerkarten.onUpdated Veranstaltung zu injizieren, das Skript mehrfach...
    • Danke, ich habe es auf Arbeit mit onUpdated. background.js: chrome.tabs.onUpdated.addListener(function(id, info, tab){ if (tab.status !== "complete"){ return; } chrome.tabs.executeScript(null, {"file": "content_script.js"}); }); Funktioniert perfekt mit einem Timeout in der content_script

    InformationsquelleAutor Marco Bonelli
Schreibe einen Kommentar