Extension Chrome : le code fonctionne manuellement mais pas automatiquement
Bonjour,
Je suis en train de tenter de faire une mini application Chrome afin de modifier le design d'une page web. Toutefois, je me heurte à un problème dont je n'arrive pas à comprendre la source. Et je n'arrive pas à trouver les bons mots clefs pour faire une recherche fructueuse dans un moteur de recherche.
Pour expliquer le contexte, j'ai donc un fichier manifest.json ordinaire :
Code:
1
2
3
4
5
6
7
8
9
10
| ...........
"content_scripts": [
{
"matches": [ "*://*" ],
"css": [ "content.css" ],
"js": [ "jquery-3.5.1.min.js", "content_css.js" ]
}
],
"permissions": [ "activeTab" ]
......... |
Dans mon css, juste du css ordinaire qui s'exécute sans problème.
Et enfin mon content_css.js qui pose quelques problèmes :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| "use strict"; // je l'utilisais pas au début, je sais pas trop ce que ca fait en fait, pas vu de changement
//................................
//du jquery qui fonctionne très bien
//...............................
// solution 1
let div_forth_settings = '<div id="forth_onlineplayers"><button style="width:130px;" onclick="showOnlinePlayers()">Show online players</button></div>';
$("cloud_save_info_template").insertAdjacentHTML("beforebegin",div_forth_settings);
// solution 2
var div_forth_settings = document.createElement("div");
div_forth_settings.setAttribute("id","forth_onlineplayers");
div_forth_settings.innerHTML = '<button style="width:130px;" onclick="showOnlinePlayers()">Show online players</button>';
$("cloud_save_info_template").before('<div id="forth_onlineplayers"><button style="width:130px;" onclick="showOnlinePlayers()">Show online players</button></div>');
jQuery("#cloud_save_info_template").parent().attr("id","links_connect");
$("links_connect").insertBefore(div_forth_settings,$("#cloud_save_info_template")); |
Que ce soit la solution 1 ou 2, les 2 fonctionnent lorsque je les exécute via la console. Cela rejoute bien mon bouton afin l'effet escompté. Mais... Aucune des 2 ne fonctionne lors de l'exécution du script. Je n'arrive pas à voir d'où peut venir le problème. Pour la solution 1 par exemple celà me dit que insertAdjacentHTML() n'est pas une fonction. Or dans la console ça fonctionne parfaitement... Pourquoi ?
Dans la solution 2, j'arrive enfin à exécuter sans erreur, mais sans effet non plus :s.
Je me demande si celà vient du fait que la page ne soit pas chargée complètement ou un truc du genre. J'ai donc tenté des bouts de code pour se lancer que lorsque la page est chargée sans succès. De même dans le manifest, par défaut c'est run_at document idle. J'ai tenté avec document end etc. Sans succès.
J'espère que quelqu'un a quelques pistes sur lesquelles je pourrai travailler, car là je sèche complètement. Sinon un module ou un truc du genre pour débugger un code javascript afin de voir à quel moment cela pose problème. J'ai tenté des console.log mais sans réussir à trouver le problème.
Merci d'avance pour les réponses à venir.
Forth.
