Dev Faq
1
votes

Comment créer un bouton qui exécute ma fonction javascript?

Je m'excuse à l'avance d'être un débutant, mais je souhaite implémenter un bouton dans mon extension chrome qui exécute une fonction javascript que j'ai créée.

Fichier manifeste: 

function supremeBot() 
{
var ";
var email = "";
var tel = "";
var address = "";
var zip = "";
var city = "";
var state = "";
var country = "USA";
var ccn = "1111 1111 1111 1111";
var ccm = "04";
var ccy = "2021";

// Name
document.getElementById("order_billing_name").value= full_name;
// Email
document.getElementById("order_email").value= email;
// Phone #
document.getElementById("order_tel").value= tel;
// Address
document.getElementById("bo").value= address;
// Zip Code
document.getElementById("order_billing_zip").value= zip;
// City
document.getElementById("order_billing_city").value= city;
// State
document.getElementById("order_billing_state").value= state;
// Country
document.getElementById("order_billing_country").value= country;
// Credit Card Num
document.getElementById("nnaerb").value= ccn;
// Credit Card Month
document.getElementById("credit_card_month").value= ccm;
// Credit Card Year
document.getElementById("credit_card_year").value= ccy;

}

1 commentaires

Vous faites référence à de nombreux éléments HTML dans votre code JS qui n'existent pas dans votre HTML.

4 Réponses :

0
votes 

 <button id='supremebot' >Click me</button>
function supremebot(){
alert("Hii")
}
document.addEventListener('DOMContentLoaded', function() {
var supremebot = document.getElementById('supremebot');
  
supremebot.addEventListener('click', function() {
    supremebot()
});
});

2 commentaires

Juste pour clarifier, où placerais-je l'appel de la fonction?

remplacez simplement ceci dans votre code.

2
votes

Il semble que vous deviez ajouter quelques éléments supplémentaires à votre configuration. Voici un aperçu de ce que je pense de votre extension:

Tout d'abord , vous souhaitez cliquer sur un bouton dans une fenêtre contextuelle. Votre fichier manifest.json semble avoir été configuré pour afficher une fenêtre contextuelle avec un bouton, via le fichier popup.html (je suppose que c'est là que vous stockez votre code HTML avec le bouton, non?) donc aucune modification n'est nécessaire.

Ensuite , vous voulez que votre bouton appelle du javascript qui interagira avec le html sur la page que vous consultez. Pour ce faire, vous devez en fait faire interagir votre popup avec un Script de contenu . Voici quelques modifications que vous devrez apporter:

  1. Dans votre fichier manifest.json , injectez un script de contenu de manière déclarative , comme ceci:
    • "content_scripts": [{ "correspond": ["http: //*.YOUR-URL.com/*"], "js": ["CHEMIN / VOTRE-FICHIER-JS.js"] }],
    • Vous devrez modifier la partie YOUR-URL.com pour qu'elle corresponde à l'URL sur laquelle vous souhaitez que votre script de contenu s'exécute. Cela devrait même fonctionner avec localhost: 3000 si vous le souhaitez.
    • Vous devrez également remplacer PATH / YOUR-JS-FILE.js par l'emplacement exact où vous stockez votre fichier de script de contenu
    • Vous devriez probablement lire la documentation que j'ai liée ci-dessus pour découvrir toutes les options disponibles;)
  2. Dans votre fichier popup.html , ajoutez une balise locale avec du code qui vous permettra de communiquer entre le Popup et le script de contenu. Cela s'appelle Message Passing .
    • Comme indiqué dans la documentation, "L'envoi d'une requête depuis l'extension [le Popup] vers un script de contenu ressemble ... [comme ceci] ... vous devez spécifier l'onglet auquel l'envoyer [le message / la requête] à. Cet exemple illustre l'envoi d'un message au script de contenu dans l'onglet sélectionné "
      • chrome.tabs.query ({active: true, currentWindow: true}, function (tabs) { chrome.tabs.sendMessage (tabs [0] .id, {salutation: "bonjour"}, fonction (réponse) { console.log (response.farewell); }); });
      • C'est essentiellement ce dont vous aurez besoin dans la balise