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'essaye.
J'ai ça jusqu'à présent
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 je semble obtenir est cette erreur
Uncaught TypeError: Cannot read property 'click' of undefined
Je tripote ça depuis des heures, mais je n'arrive pas à le faire fonctionner. Toute aide est appréciée!
Il semble que vous ne comprenez pas bien 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 de pages Web. En utilisant le modèle d'objet de document (DOM) standard, ils peuvent lire les détails des pages Web consultées par le navigateur ou y apporter des modifications.
Donc, utiliser votre content_script.jsdans votre popup.htmln'a pas beaucoup de sens, et entraîne évidemment une erreur car vous n'avez aucun bouton class="planet-name"dans votre popup.htmlpage.
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 on clique dessus, vous pouvez injecter le content_script.jsscript dans la page pour cliquer sur l'élément "planète".
Vous devrez donc:
manifest.jsonsuppression du "content_scripts"champpopup.jsfichier à ajouter dans votre popup.htmlpagepopup.jspour injecter le content_script.jsfichier en utilisantchrome.tabs.executeScript()content_script.jspour le faire cliquer sur le bouton directement sur la pageTout d'abord, modifiez 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"
}
}
Ensuite, supprimez votre content_script.jsde popup.htmlet remplacez-le par le popup.jsscript:
<!doctype html>
<html>
<head><title>activity</title></head>
<body>
<button id="clickactivity">click</button>
<script src="popup.js"></script>
</body>
</html>
Créez le popup.jsscript et ajoutez l'écouteur au bouton qui injectera le script dans la page en cours:
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);
Maintenant, dans votre content_script.js, vous devrez cliquer directement sur le bouton, et vous n'aurez pas non plus besoin de l'utiliser DOMContentReady, car Chrome attend d'injecter le script par lui-même. Ainsi, votre nouveau content_script.jssera:
function clickPlanet() {
var planets = document.getElementsByClassName("planet-name"),
randomplanet = Math.floor(Math.random() * planets.length),
clickplanet = planets[randomplanet];
clickplanet.click();
}
clickPlanet();
Téléchargez un exemple fonctionnel de l'extension ICI .
Je vous suggère fortement de jeter un œil à la documentation des méthodes utilisées dans mon exemple pour bien comprendre leur comportement et leurs propriétés, voici quelques liens qui pourraient vous être utiles:
Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.
En cas d'infraction, veuillez [email protected] Supprimer.
laisse moi dire quelques mots