Discussion :

[hublot78]

Bonjour,
Voici mon problème:
je suis en train de faire un plugin qui est censé rendre tous les numéros de téléphones présents sur la page web cliquables. Cependant mon extension contient des pages html et quand je fais:

Code :

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

var htmlString = document.getElementsByTagName('body')[0].innerHTML;

j'obtiens le code de la page du plugin et non celui de la page web, donc ma question est comment faire la différence entre la page html de mon extension et celle du navigateur?

Merci d'avance pour vos réponses.

[eleydet]

Bonjour,

Vous avez écrit :

Cependant mon extension contient des pages html

Comment insérez-vous votre extension dans la page html? A quoi ressemble cette extension?

[hublot78]

Bonjour,

Comment insérez-vous votre extension dans la page html? A quoi ressemble cette extension?

Quand je parle d'extension, je veux dire que je suis en train de faire une extension que l'on peut ajouter à Google Chrome comme celles que l'on peut télécharger dans le web store. Donc les pages html font parties de l'extension.

[Watilin]

quand je fais:

Code :

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

var htmlString = document.getElementsByTagName('body')[0].innerHTML;

j'obtiens le code de la page du plugin et non celui de la page web

Pour qu’un script de ton extension ait accès aux pages web visitées, tu dois le déclarer en tant que content script. Exemple, dans ton manifest.json :

Code json :

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

1
2
3
4
5
6
"content_scripts": [
  {
    "matches": [ "http://*/*", "https://*/*" ],
    "js": [ "script-de-contenu.js" ]
  }
]

[hublot78]

Bonjour,
C'est déjà fait, j'ai essayé de changer l'ordre dans lequel j'appel mais fichiers mais cela ne résout pas mon problème initial.
J'ai essayé de stocker les informations que je voulais communiquer dans le localStorage mais même là je n'arrive pas à récupérer les informations stockées.

[hublot78]

Pour plus de détails: je dois pouvoir cliquer sur un numéro de téléphone sur une page web quelconque, ensuite je dois récupérer le numéro de téléphone dans mon extension Chrome pour ensuite passer l'appel. C'est donc cette récupération de donnée qui me pose problème.
J'ai essayé d'utiliser le localStorage mais la page web et l'extension ne communiquent pas.

Merci d'avance pour vos réponses.

[Watilin]

Chez moi ça marche.
manifest.json

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
{
  "manifest_version": 2,
  "name": "phonenums",
  "version": "1.0",
 
  "content_scripts": [
    {
      "matches": [ "*://localhost/*" ],
      "js": [ "content.js" ]
    }
  ]
}

content.js

Code :

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

1
2
3
console.log(document.body.innerHTML);
document.body.insertAdjacentHTML("afterbegin",
  '<p style="color: red">Contenu injecté par l’extension</p>');

Si tu veux utiliser le stockage, là on part sur autre chose. Tu vas d’abord devoir en demander la permission en ajoutant une clé dans le manifest :

Code :

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

  "permissions": [ "storage" ],

Ensuite, dans ton content script, tu peux utiliser browser.storage.local. Voici un exemple :

Code :

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

1
2
3
4
5
browser.storage.local.set({ "machin": "truc" })
  .then(() => console.log("storage set successful"));
 
browser.storage.local.get("machin")
  .then((data) => console.log("storage get:", data);

Les données seront stockées dans un espace dédié à l’extension, seront accessibles de tous les domaines web, et persisteront jusqu’à la désinstallation de l’extension. Voir WebExtensions/API/storage.

Note : je développe avec Firefox (à l’aide de l’outil web-ext) car c’est beaucoup plus pratique ; l’API chrome a des années de retard (cf. ce bug qui date de 2013) et, notamment, ne supporte pas les promesses. Si tu veux développer pour Chrome, tu devras faire une petite adaptation de syntaxe. Ce n’est pas très compliqué, mais je n’ai pas envie de t’aider pour ça.

[hublot78]

Bonjour,
Merci de ta réponse ça marche comme tu me l'as montré.
Merci

[hublot78]

Maintenant le problème c'est que l'extension ne s'applique pas sur tous les onglets du navigateur, il faut chaque fois refaire la démarche de connexion pour pouvoir rendre les liens cliquables, donc ma question est: comment faire pour que l’extension s'applique sur tous les onglets du navigateur.
Merci d'avance pour vos réponses.

[Watilin]

Je ne comprends pas où est le problème. D’après mes tests, le script de contenu est automatiquement injecté (ou réinjecté) dans toutes les pages correspondant au match pattern indiqué dans le manifest, et ce dans deux situations :

• l’extensions est installée (ou, en phase de développement, rechargée) ;
• la page est chargée ou actualisée.

C’est d’ailleurs un problème selon moi que le script puisse s’exécuter plusieurs fois sur une même instance de page, car tu risques de te retrouver avec des numéros de téléphone transformés plusieurs fois.

[hublot78]

Je viens de me rendre compte du problème: je n'avais pas mis le bon fichier à charger dans le content scripts.

Merci de ton aide.