Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Utiliser JavaScript pour hacker le web

Par Thomas GONET Publié le 16/03/2018 à 17:24:22 Noter cet article:
(0 votes)
Avis favorable du comité de lecture

Tout piratage n'est pas un mal. Voici comment vous pouvez utiliser JavaScript pour améliorer votre navigateur. Les noms des menus peuvent varier selon le navigateur que vous utilisez.

Les ressources en ligne sur le JavaScript ne manquent pas, des cours qui vous enseignent les bases aux tutoriels sur la création d'applications. Dans cet article, j'expliquerai comment utiliser JavaScript pour créer des hacks de navigateur utiles qui améliorent vos expériences Web et booster votre productivité.

Rappels

Chaque page web est composée de trois types de code source:

  • Html pour le contenu
  • CSS pour le design
  • Javascript pour les animations et les fonctionnalités dynamiques sur une même page

L'inspecteur et la console

L'inspecteur du navigateur est un menu utilisé principalement par les développeurs web mais qui peut être utile à tous les bidouilleurs. Vous pouvez l'ouvrir avec le raccourci Ctrl+Maj+i ou dans le menu clic droit sur la page > inspecteur. Il permet de visualiser le code source qui compose la page.

Il permet aussi de modifier ce code source directement avec l'outil visuel ou avec du code javascript dans l'onglet console.

Vous pouvez utiliser n'importe quelle fonction javascript dans cette console, y faire des calculs et opérations plus ou moins compliquées selon vos besoins.

Par exemple j'utilise la console pour obtenir le é majuscule ( É):

"é".toUpperCase()
        

Voici un code que l'on peut utiliser pour vérifier la longueur d'une page Web et ainsi déterminer si on prends le temps de la lire ou pas:

alert(document.body.scrollHeight / window.innerHeight)
        

La puissance des marques pages

Nous savons tous à quel point les marque pages sont utiles. Ils vous permettent d'enregistrer un lien vers une page Web, de le classer par catégorie et d'ajouter des données supplémentaires (métadonnées) pour vous aider à le trouver rapidement dans le futur et le classer dans une structure facilement accessible. Ce que beaucoup de gens ne savent pas, c'est que vous pouvez également sauvegarder du code dans ces marque pages, qui sont exécutés dans le contexte de la page Web sur laquelle vous vous trouvez, y compris l'accès à sa structure et à son style.

Créez un nouveau marque page. Dans le champ adresse ou URL, Ajoutez simplement javascript: devant le code que vous auriez entré dans la console.

javascript:(function(){ [].slice.call(document.querySelectorAll('img')).forEach(function(elem) { elem.remove(); }); })()
        

Changements persistants à travers le Web à l'aide d'extentions

Cela peut devenir rébarbatif d'utiliser le même marque-page sur beaucoup de pages. Avec les extentions, vous pouvez appliquer votre script automatiquement et même filtrer sur quelles pages selon leur url ou leur contenu. Les modules complémentaires sont aussi appelés modules complémentaires, addons ou plugins

Commencez par créer un dossier pour contenir les fichiers de votre extention. Créez deux fichiers vides: manifest.json et content.js

Manifest.json

Le code de ce fichier est la partie la plus importante de tout module complémentaire. Il définit essentiellement dans quels contextes et comment l'extention fonctionne.

Voici un manifest basique:

{
  "manifest_version": 2,
  "name": "Nom du plugin",
  "description": "Description du plugin",
  "version": "2.0",
  "content_scripts": [{
    "matches": [ "*://*/*" ],
    "js": [ "content.js" ],
    "run_at": "document_end"
  }]
}
            

Il demande simplement au navigateur d'exécuter content.js sur toutes les pages web.

Content.js

Le code que vous mettez dans ce fichier est le même que celui que vous auriez mis dans la console de la page Web. Reprenons le même exemple:

javascript:(function(){ [].slice.call(document.querySelectorAll('img')).forEach(function(elem) { elem.remove(); }); })()
            

Installation

Allez dans le menu Modules complémentaires ou extentions de votre navigateur. Cliquez sur "Installer depuis un fichier" ou "charger une extention non empaquetée", selectionnez votre dossier et validez

A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels