[Débutant] pour faire un script greasemonkey

pour faire un script greasemonkey [Débutant] - Javascript/Node.js - Programmation

Marsh Posté le 29-09-2015 à 22:26:49    

Bonjour à tous
 
Alors voila, je me mets un peu au javascript à mes heures perdues en autodidacte.
 
Je viens ici pour vous demander un petit éclaircissement sur certaines fonction.
Je vais essayer d'expliquer au mieux le tableau  
 
j'aimerais afficher des valeurs qui sont cachés sur la page. Afin de les dévoiler, il faut faire un survol avec la souris sur "Energie" et "Crédits"
j'aimerais donc afficher ces valeurs sans avoir besoin de faire un survol avec la souris.
Le tableau :
 

Code :
  1. <table class="menuRight" cellspacing="0" cellpadding="0" border="0">
  2. <tbody>
  3. <tr>
  4. <td class="menuTop">Vos Infos </td>
  5. </tr>
  6. <tr>
  7. <td class="menuRightItem">29/09/2015 21:43</td>
  8. </tr>
  9. <tr>
  10. <td class="menuTitleRight">
  11. <a href="prochain_niveau.php">Niveau</a>
  12. </td>
  13. </tr>
  14. <tr>
  15. <td class="menuRightItem">0 (0 xp) </td>
  16. </tr>
  17. <tr>
  18. <td class="menuTitleRight">Tours</td>
  19. </tr>
  20. <tr>
  21. <td class="menuRightItem">2500 / 250 </td>
  22. </tr>
  23. <tr>
  24. <td class="menuTitleRight">Tours utilisés </td>
  25. </tr>
  26. <tr>
  27. <td class="menuRightItem">0 </td>
  28. </tr>
  29. <tr>
  30. <td class="menuTitleRight">Puissance</td>
  31. </tr>
  32. <tr class="menuRightItem">
  33. <td class="menuRightItem">1,050,340</td>
  34. </tr>
  35. <tr>////////////////////////////
  36. <td class="menuTitleRight">           
  37. <a class="bulle_blanc" href="#">   
  38. Énergie                             
  39. <span>501,000 /tour</span>         
  40. </a>                     
  41. </td>                   
  42. </tr>             
  43. <tr class="menuRightItem">     
  44. <td class="menuRightItem">   
  45. <span class="greenItem">100,000,000</span>
  46. </td>               
  47. </tr> ////////////////////////////
  48. <tr>
  49. <td class="menuTitleRight">Capacité Energie </td>
  50. </tr>
  51. <tr class="menuRightItem">
  52. <td class="menuRightItem">100,000,000</td>
  53. </tr>
  54. <tr>///////
  55. <td class="menuTitleRight">
  56. <a class="bulle_blanc" href="#">
  57. Crédits
  58. <span>2,839,215 /tour</span>
  59. </a>
  60. </td>
  61. </tr>
  62. <tr class="menuRightItem">
  63. <td class="menuRightItem">
  64. <span id="aff_menu_credit" class="greenItem">1,000,000,000</span>
  65. </td>
  66. </tr>///////
  67. <tr>
  68. <td class="menuTitleRight">Population</td>
  69. </tr>
  70. <tr class="menuRightItem">
  71. <td class="menuRightItem">151,000</td>
  72. </tr>
  73. <tr>
  74. <td class="menuTitleRight">Capacité Population </td>
  75. </tr>
  76. <tr class="menuRightItem">
  77. <td class="menuRightItem">151,000</td>
  78. </tr>
  79. <tr>
  80. <td class="menuTitleRight">Civils</td>
  81. </tr>
  82. <tr class="menuRightItem">
  83. <td class="menuRightItem">134,243</td>
  84. </tr>
  85. <tr>
  86. <td class="menuTitleRight">Unités</td>
  87. </tr>
  88. <tr class="menuRightItem">
  89. <td class="menuRightItem">16,757</td>
  90. </tr>
  91. <tr>
  92. <td class="menuTitleRight">Parsecs</td>
  93. </tr>
  94. <tr class="menuRightItem">
  95. <td class="menuRightItem">5,000 </td>
  96. </tr>
  97. <tr>
  98. <td class="menuTitleRight">Parsecs Libres</td>
  99. </tr>
  100. <tr class="menuRightItem">
  101. <td class="menuRightItem">100 </td>
  102. </tr>
  103. <tr>
  104. <td class="menuTitleRight">Planètes</td>
  105. </tr>
  106. <tr>
  107. <td class="menuRightItem">2</td>
  108. </tr>
  109. <tr>
  110. <td class="menuDown"></td>
  111. </tr>
  112. </tbody>
  113. </table>


 
Capture d'écran de la page web du tableau
http://img15.hostingpics.net/pics/390495sansscript.png
 
Après moulte lectures de divers forum et cours javascript, j'en tire un petit script comme ceci
 

Code :
  1. // ==UserScript==
  2. // @name         ngswingScript
  3. // @namespace    http://your.homepage/
  4. // @version      0.1
  5. // @description  enter something useful
  6. // @author       You
  7. // @include     *ngswing.com*
  8. // @grant        none
  9. // ==/UserScript==
  12. // On va chercher l'element avec la class "bulle_blanc" puis l'element span a l'interieur. Et on passe l'affiche en inline
  14. var bulle = document.getElementsByClassName('bulle_blanc')[0]
  15. //puis l'element span a l'interieur. Et on passe l'affiche en inline
  16. var spanBulle=bulle.getElementsByTagName('span')[0]
  17. //Et on passe l'affiche en inline
  18. spanBulle.style.display="inline";
  20. //On met le reste du css (visible dans le fichier css a droite dans le truc "inspecté l'element" )
  21. spanBulle.style.position="absolute";
  22. spanBulle.style.whiteSpace= "nowrap";
  23. spanBulle.style.top= "-3px"; 
  24. spanBulle.style.left= "50px";
  25. spanBulle.style.background= "black";
  26. spanBulle.style.color= "white"; // couleur de la police
  27. spanBulle.style.padding= "2px"; // taille générale de l'encadrement
  28. spanBulle.style.border= "1px solid red"; // taille + couleur des bordures
  29. spanBulle.style.borderLeft= "1px solid red"; // taille + couleur de la bordure gauche


 
et avec le script activé, ça donne ça
 

Code :
  1. <table class="menuRight" cellspacing="0" cellpadding="0" border="0">
  2. <tbody>
  3. <tr>
  4. <td class="menuTop">Vos Infos </td>
  5. </tr>
  6. <tr>
  7. <td class="menuRightItem">29/09/2015 22:16</td>
  8. </tr>
  9. <tr>
  10. <td class="menuTitleRight">
  11. <a href="prochain_niveau.php">Niveau</a>
  12. </td>
  13. </tr>
  14. <tr>
  15. <td class="menuRightItem">21 (2315 xp) </td>
  16. </tr>
  17. <tr>
  18. <td class="menuTitleRight">Tours</td>
  19. </tr>
  20. <tr>
  21. <td class="menuRightItem">151 / 860 </td>
  22. </tr>
  23. <tr>
  24. <td class="menuTitleRight">Tours utilisés </td>
  25. </tr>
  26. <tr>
  27. <td class="menuRightItem">20,292 </td>
  28. </tr>
  29. <tr>
  30. <td class="menuTitleRight">Puissance</td>
  31. </tr>
  32. <tr class="menuRightItem">
  33. <td class="menuRightItem">19,825,677</td>
  34. </tr>/////////////////////
  35. <tr>
  36. <td class="menuTitleRight">
  37. <a class="bulle_blanc" href="#">
  38. Énergie
  39. <span style="display: inline; position: absolute; white-space: nowrap; top: -3px; left: 50px; background: black none repeat scroll 0% 0%; color: white; padding: 2px; border: 1px solid red;">14,093,482 /tour</span>
  40. </a>
  41. </td>
  42. </tr>
  43. <tr class="menuRightItem">
  44. <td class="menuRightItem">
  45. <span class="greenItem">1,892,119,550</span>
  46. </td>
  47. </tr>/////////////////////
  48. <tr>
  49. <td class="menuTitleRight">Capacité Energie </td>
  50. </tr>
  51. <tr class="menuRightItem">
  52. <td class="menuRightItem">2,165,000,000</td>
  53. </tr>
  54. <tr>///////
  55. <td class="menuTitleRight">
  56. <a class="bulle_blanc" href="#">
  57. Crédits
  58. <span>5,982,507 /tour</span>
  59. </a>
  60. </td>
  61. </tr>
  62. <tr class="menuRightItem">
  63. <td class="menuRightItem">
  64. <span id="aff_menu_credit" class="greenItem">15,878,359,117</span>
  65. </td>
  66. </tr>///////
  67. <tr>
  68. <td class="menuTitleRight">Population</td>
  69. </tr>
  70. <tr class="menuRightItem">
  71. <td class="menuRightItem">1,578,237</td>
  72. </tr>
  73. <tr>
  74. <td class="menuTitleRight">Capacité Population </td>
  75. </tr>
  76. <tr class="menuRightItem">
  77. <td class="menuRightItem">1,726,000</td>
  78. </tr>
  79. <tr>
  80. <td class="menuTitleRight">Civils</td>
  81. </tr>
  82. <tr class="menuRightItem">
  83. <td class="menuRightItem">323,236</td>
  84. </tr>
  85. <tr>
  86. <td class="menuTitleRight">Unités</td>
  87. </tr>
  88. <tr class="menuRightItem">
  89. <td class="menuRightItem">1,235,729</td>
  90. </tr>
  91. <tr>
  92. <td class="menuTitleRight">Parsecs</td>
  93. </tr>
  94. <tr class="menuRightItem">
  95. <td class="menuRightItem">48,268 </td>
  96. </tr>
  97. <tr>
  98. <td class="menuTitleRight">Parsecs Libres</td>
  99. </tr>
  100. <tr class="menuRightItem">
  101. <td class="menuRightItem">238 </td>
  102. </tr>
  103. <tr>
  104. <td class="menuTitleRight">Planètes</td>
  105. </tr>
  106. <tr>
  107. <td class="menuRightItem">12</td>
  108. </tr>
  109. <tr>
  110. <td class="menuDown"></td>
  111. </tr>
  112. </tbody>
  113. </table>


 
capture d'écran de la page web du tableau avec le script activé
 
http://img15.hostingpics.net/pics/643282avecscript.png
 
Cependant il existe dans le tableau 2 fois la valeur "bulle_blanc" et ainsi mon script n'agit que sur la première (encadré par /////////////////////)
J'ai bien "14,093,482 /tour" qui s'affiche directement sur la page à droite de "Energie"
 
Le deuxième élément (encadré par ///////) ne s'affiche pas car le script n'agit pas dessus
 
Comment faire?
 
 
Et deuxième question si jamais quelqu'un veut bien me donner un peu plus de son temps :)
 
la question se pose sur cette partie.
 

Code :
  1. <tr>////////////////////////////
  2. <td class="menuTitleRight">           
  3. <a class="bulle_blanc" href="#">   
  4. Énergie                             
  5. <span>501,000 /tour</span>         
  6. </a>                     
  7. </td>                   
  8. </tr>             
  9. <tr class="menuRightItem">     
  10. <td class="menuRightItem">   
  11. <span class="greenItem">100,000,000</span>
  12. </td>               
  13. </tr>


 
Là c'est un peu tronqué car l’énergie est dans le positif (501.000 / tour)
explications  
 
Admettons :
tu as 100.000.000 d'energie
tu perds 20.000.000 d'energie par tour.
tu arriveras donc à 0 energie en 5 tours.
 
comment faire ce calcul dans le script (sachant que les chiffre change bien évidemment) et afficher le chiffre "5" dans cette partie du tableau? sachant qu'à 0, tout est perdu (donc il ne faut jamais arrivé à zéro)
 
 
Merci pour votre aide.

Code :
  1. Je précise direct que je sais absolument que je suis un noob et que si quelqu'un passe pour me faire une réponse du style "va prendre des cours" ou "retourne sur les forums déjà existants", je m'en contrefou :)
  2. Je recherche juste un peu d'aide pour me lancer dans javascript et greasemonkey dans la bonne humeur et le brainstorming :)


 
Et oui je sais je suis un noob en javascript :) mais je persévère :)
 
Et je peux payer l'apéro pour ceux qui m'aident et qui habitent en bretagne :)


Message édité par pote2 le 29-09-2015 à 23:46:16
Reply

Marsh Posté le 29-09-2015 à 22:26:49   

Reply

Marsh Posté le 29-09-2015 à 23:29:46    

Si tu pouvais poster un tout petit code minimaliste et simpliste, on aurait peut-être une idée de ce que tu fais et cherches à faire :o

Reply

Marsh Posté le 29-09-2015 à 23:40:34    

Hello
merci de ta réponse
 
je vais mettre les captures d'écran du code du tableau
 
Sans le script activé
http://img15.hostingpics.net/pics/390495sansscript.png
 
Avec le script activé
http://img15.hostingpics.net/pics/643282avecscript.png
 
 
et on voit bien que à côté de "Energie" le script fonctionne mais que pour "Crédits" il n'y a rien affiché alors que normalement il y a une valeur lorsqu'on survol avec la souris.


Message édité par pote2 le 29-09-2015 à 23:42:32
Reply

Marsh Posté le 30-09-2015 à 00:50:26    

Code :
  1. // ==UserScript==
  2. // @name         ngswingScript
  3. // @namespace    http://your.homepage/
  4. // @version      0.1
  5. // @description  enter something useful
  6. // @author       You
  7. // @include     *ngswing.com*
  8. // @grant        none
  9. // ==/UserScript==
  10. // On va chercher l'element avec la class "bulle_blanc" puis l'element span a l'interieur. Et on passe l'affiche en inline
  12. var bulles = document.getElementsByClassName('bulle_blanc')
  13. //puis l'element span a l'interieur. Et on passe l'affiche en inline
  15. var i = 0
  16. for ( i = 0 ; i < bulles.length; i++) {
  17.    var span = bulles[i].getElementsByTagName('span');
  18. span[0].style.display="inline";
  19. span[0].style.position="absolute";
  20. span[0].style.whiteSpace= "nowrap";
  21. span[0].style.top= "-3px";
  22. span[0].style.left= "50px";
  23. span[0].style.background= "black";
  24. span[0].style.color= "white"; // couleur de la police
  25. span[0].style.padding= "2px"; // taille générale de l'encadrement
  26. span[0].style.border= "1px solid red"; // taille + couleur des bordures
  27. span[0].style.borderLeft= "1px solid red"; // taille + couleur de la bordure gauche
  28. }


Pour la deuxième question relis toi avec le doigt car c'est un charabia monstre


Message édité par caps lock le 30-09-2015 à 00:51:03
Reply

Marsh Posté le 01-10-2015 à 08:53:02    

Hello
merci caps lock :) ça fonctionne effectivement.
Mais pour comprendre le procédé, en fait tu crée des loops avec "for" et d'après ton code, tout 'bulle blanc" de la page vont agir de même?
Car si il y a plusieurs "bulle blanc" sur la page mais que je souhaite seulement modifié les 2 premiers ou alors 2 du milieu?  
 
bon après pour la deuxième question je vais voir ça :)
 
petit nouvelle question, est-ce qu'il serait simple d'ajouter une petite alerte visuelle (style un clignotement ou un surlignement) dès qu'un mot sur une page est detecté?  
C'est à dire si je navigue sur une page et que le mot "camion" est présent, celui-ci est mis en valeur.


Message édité par pote2 le 01-10-2015 à 08:54:43
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed