Discussion :

[Forthtilliath]

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 manifest.json :

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

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 content_css.js :

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
"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.

[Doksuri]

salut,

(
detail sans importance : tu peux mettre ca
"matches": [ "<all_urls>" ]
)

apres, je sais que pour des raisons de securite, les extensions n'ont pas le droit de faire des onclick="..."

tu peux ajouter un listener click sur tes boutons (mais il faut les creer en JS sans passer par innerHTML)

Code javascript :

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

1
2
3
4
5
6
7
8
9
const div_forth_settings = document.createElement("div");
div_forth_settings.id = "forth_onlineplayers";
$("links_connect").insertBefore(div_forth_settings,$("#cloud_save_info_template"));
 
const btn = document.createElement("button");
btn.style.width = "130px";
btn.textContent = "Show online players";
div_forth_settings.appendChild(btn);
btn.addEventListener("click", showOnlinePlayers);

=> perso, je ne suis pas fan de melanger js natif & jquery

aussi : tu injecte du css, pourquoi tu t'embete a passer du style dans les elements ?
=> tu peux donner la width du bouton dans le css


ps : est-ce que $("links_connect") = $("#links_connect") ?

[Forthtilliath]

Merci pour la réponse.

Pour le match j'ai mis une adresse web, j'ai juste évité de la mettre dans le commentaire.

Pour le mélange js natif et jquery, il est vrai que c'est pas terrible, mais actuellement je testais différente solution afin d'en avoir enfin une qui fonctionne, sans succès. Quitte à adapter par la suite.

Pour la width, en effet, ca serait mieux dans le css, je vais voir pour corriger ca.

Pour links_connect, c'est un peu bizarre.

Dans le code j'ai ca (après ma ligne pour ajouter l'id) :

Code HTML :

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

1
2
3
<td colspan="2" class="links_connect" id="links_connect">
blabla
</td>

Lorsque je fais ca :

Code :

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

$("#links_connect").insertBefore(div_forth_settings,$("#cloud_save_info_template"));

La console me sort

Uncaught TypeError: Cannot read property 'insertBefore' of null

Idem pour ca :

Code :

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

$(".links_connect").insertBefore(div_forth_settings,$("#cloud_save_info_template"));

Par contre : $("links_connect") fonctionne nickel.... J'ai du mal à comprendre pourquoi les 2 autres ne fonctionnent pas. Du moins avec la classe je peux comprendre s'il y en a plusieurs, mais avec l'id, je vois pas.

[Forthtilliath]

J'ai finalement réussi à faire ce que je voulais, après beaucoup, beaucoup de galère. Mais ca fonctionne enfin comme je le souhaitais. A présent, je vais pouvoir passer à l'étape suivante.

Voici mon code si d'autres ont le même problème :

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
// When page is loaded
jQuery(document).ready(function($) {
	// We add the button to show or hide online players  | Voici la ligne qui me permet de faire que ca fonctionne
	$('<div id="forth_onlineplayers"><button id="bt_showPlayers">Show online players</button></div>').insertBefore("#cloud_save_info_template");
 
	// We add an action to show or hide online players
	$('#bt_showPlayers').click(function(){
		$(".chat_room_template > .users_in_room").toggle(300,function(){
			if( jQuery(".chat_room_template > .users_in_room").css("display") == "none" )
				$('#bt_showPlayers').text("Show online players");
			else
				$('#bt_showPlayers').text("Hide online players");
		});
   });
});