module sur firefox

**vaneck** · 27/08/2018, 17h37

bonjour
j'ai crée un petit script pour un module que j'ai crée pour firefox . En suivant ce tuto, je peux activer le script chaque fois que je clique sur "about:debugging">actualiser.
Maintenant j'aimerais ameliorer un peux ca et activer le script des que je click sur le bouton du module sur la barre du navigateur, mais je n'ai pas la moindre idée de comment le faire. Pourtant c'est le truc con: appuyer sur ce bouton enclenche automatiquement la page moncode.js.
merci pour votre aide

**Shampra** · 28/08/2018, 09h50

Bonjour,

C'est l'étape suivante dans les tutoriaux proposés sur le site : https://developer.mozilla.org/fr/doc...d_WebExtension.

Comme tu dis : il faut que le script s'exécute sur click => il faut donc écouter l'évènement pour le lancer et non plus l'exécuter au chargement (onload?).
Ton fichier moncode.js ressemblera à ça.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function toncode()
{
// ce que tu veux faire
}
 
browser.browserAction.onClicked.addListener(toncode.js);

Il faut aussi modifier le manifest en conséquence...
Un exemple très simple est dispo ici : https://developer.mozilla.org/fr/doc...barre_d_outils

**vaneck** · 28/08/2018, 19h24

merci, visiblement un truc m’échappe.
Je teste avec ce manifest:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
 
  "description": "Demonstrating toolbar buttons",
  "manifest_version": 2,
  "name": "button-demo",
  "version": "1.0",
 
  "browser_action": {
    "browser_style": true,
    "default_popup": "popup/popup.html",
    "default_icon": {
      "32": "icons/icone.png"
    }
  }
 
}

le html cité ci dessus est:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
 
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="popup.css"/>
  </head>
 
  <body>
    <button id="test" onclick="myFunction()"> reserver ca </button>
    <script>
    function myFunction() {
 
     document.getElementById("test").style.color = "red";
   }
</script>
  </body>
 
</html>

ca ne fonctionne pas. J'ai l'impressions que #test ne fait pas partie du dom, ou alors n'est pas dans document. D’ailleurs même un test simple comme script du style alert(), ou console.log() ne renvoie rien.

**Shampra** · 29/08/2018, 11h37

Attention pour le console.log() : étant dans l'environnement du "browser" et non de la page, les logs sont visible via la console spécifique, à activer via le lien "Deboguer" du module.

Avec la console, il y a un message d'erreur.
Et dans ce cas, l'erreur vient d'une restriction de sécurité : le code js ne peut pas être inline (pour les raisons et les explications précises, je passe mon tour, les restrictions de sécurités me posent souci trop souvent ^^).

Il faut donc créer un fichier popup.js avec le code dans ce style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
document.addEventListener("onload",document.getElementById("test").addEventListener('click', myFunction));
function myFunction() 
{
     document.getElementById("test").style.color = "red";
}

Puis l'appeler dans le fichier html.
Dans cet exemple, l'écoute de l'évènement click a été mis dans le code js, pour éviter aussi les erreurs de sécurité.

**vaneck** · 04/10/2018, 22h18

merci pour ton aide, désolé de la lenteur de ma réponse, j'étudie la doc de Mozilla a mon rythme à coté.
J’essaie donc de faire communiquer mon script de contenue de mon module avec celui d’arrière plan. Comme ca ne vas pas arrêter de tchatcher, je veux utiliser du flux continu. Je m’appuie donc sur MDN pour cuisiner ça:
depuis le script de contenue

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
console.log("demarage contenu");
var myPort = browser.runtime.connect({name:"port-from-cs"});
console.log(myPort);

depuis le script d'arriere plan

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
console.log("demarage arriere");
function connected(p) {
  console.log("connected");
}
browser.runtime.onConnect.addListener(connected);

y a rien a faire, c'est comme si le script d'arriere plan ne recevait jamais rien...
quand au contenue, console.log(myPort) me donne ceci:

Object { name: "port-from-cs", disconnect: disconnect(), postMessage: postMessage(), onDisconnect: {…}, onMessage: {…}, error: Getter }

on dirait que le probleme vient du script de contenue, qui ne veut rien envoyer. Des pistes?
merci

module sur firefox

JavaScript

Discussions similaires

Partager

Partager