Table des matières
GithubSimpleFileDownloader : Une extension liée à la structure des pages
Cette extension archivée tentait d’ajouter des boutons de téléchargement aux explorateurs de dépôts. Son implémentation GitHub montre la fragilité d’une intégration fondée sur le DOM d’un autre site plutôt que sur une interface stable.
- Langages
- 2Répartition du code
- Composants documentés
- 2Explorer les modules
- Documents source
- 2Lire les instructions
Langages du dépôtJavaScript 97.74%2
Parts calculées à partir des octets GitHub Linguist.
| Langage | % | Octets |
|---|---|---|
| JavaScript | 12 092 | |
| CSS | 279 |
1. Aperçu
1.1. Pourquoi il existe
Extension de navigateur injectant un bouton de téléchargement direct de fichier unique dans GitHub et GitLab.
1.2. Cas d’usage
Téléchargement immédiat d'un fichier isolé sans cloner le dépôt entier.
2. Cas d’utilisation
Une extension Chrome qui ajoute un lien de téléchargement et la taille de chaque fichier dans GitHub, GitLab et Bitbucket.
- Ajouter des icônes aux listes
- Visiteur de dépôtSite d’hébergement Git
manifest.json injecte inject_github.js, inject_gitlab.js ou inject_bitbucket.js selon le site ; chaque script ajoute une icône-lien à chaque ligne (td.content, td.tree-item-file-name ou tr.iterable-item).
- Télécharger un seul fichier
- Visiteur de dépôtSite d’hébergement Git
Le script réécrit le lien blob en URL brute (raw.githubusercontent.com sur GitHub, /raw/ sur GitLab), récupère le texte et pose une URL d’objet Blob avec l’attribut download.
- Afficher la taille du fichier
- Visiteur de dépôtSite d’hébergement Git
Sur GitHub, getFileURLDocument() charge la page du fichier avec XMLHttpRequest et changeFileSize() copie la ligne Bytes/KB/MB dans un span près de l’icône.
- Ouvrir un dossier par l’icône
- Visiteur de dépôtSite d’hébergement Git
Les chemins sans extension sont traités comme des dossiers : l’icône renvoie alors à la page du dossier au lieu de télécharger.
2.1. Scénario : Récupérer un seul fichier de config sur GitHub
- Charger l’extension dans Chrome (Manifest V2, scripts de contenu pour github.com, gitlab.com et bitbucket.org).
- Ouvrir la liste de fichiers d’un dépôt sur github.com ; inject_github.js attend que document.readyState soit complete.
- Une petite icône GitHub et une taille s’affichent à côté de chaque fichier.
- Cliquer sur l’icône du fichier : le contenu brut est enregistré sous le nom du fichier.
- Si les icônes n’apparaissent pas, actualiser la page comme le conseille le README ; son titre signale aussi que l’extension ne fonctionne plus.
Fichiers consultésREADME.mdmanifest.jsonsrc/inject/inject_github.jssrc/inject/inject_gitlab.jssrc/inject/inject_bitbucket.js
3. Démarrage
Ces commandes viennent de la documentation du dépôt. Elles n’ont pas été exécutées pendant cette revue.
Commandes déclarées dans les manifestes
4. Références du dépôt
Le dépôt ne fournit pas de guide détaillé pour ces étapes. Commencez par le README et les fichiers commentés ci-dessus.
5. Fonctions et composants 2
- Injection dans la page
- Le script GitHub attend que le document soit prêt, trouve les cellules td.content et insère icônes, liens et tailles. Des scripts distincts visent GitLab et Bitbucket. Chaque adaptateur dépend du balisage du site.
- Téléchargement du fichier brut
- Le script transforme un lien de fichier en lien brut, récupère le texte et crée un téléchargement Blob. Ce parcours textuel ne doit pas être supposé préserver tous les fichiers binaires.
6. Architecture
Ouvrez un composant pour suivre ses connexions, ou explorez le diagramme complet.
Page du dépôt
- Vers Script injecté
Script injecté
- Depuis Page du dépôt
- Vers Extraction des liens du DOM
Extraction des liens du DOM
- Depuis Script injecté
- Vers Requête du fichier brut
Requête du fichier brut
Lien de téléchargement Blob
- Depuis Requête du fichier brut
Mermaid Diagramme interactif
Vue générale des composants et des échanges vérifiés dans le dépôt.
flowchart LR
n0["Page du dépôt"]
n1["Script injecté"]
n2["Extraction des liens du DOM"]
n3["Requête du fichier brut"]
n4["Lien de téléchargement Blob"]
n0 --> n1
n1 --> n2
n2 --> n3
n3 --> n4
Version texte du diagramme
- Page du dépôt → Script injecté
- Script injecté → Extraction des liens du DOM
- Extraction des liens du DOM → Requête du fichier brut
- Requête du fichier brut → Lien de téléchargement Blob
Suivre un parcours dans le code
Partez de querySelectorAll('td.content') et examinez les positions des nœuds utilisés pour trouver le lien. Une modification du tableau peut casser ce parcours avant toute requête réseau.
7. Dossier technique
Établi à partir du code au commit dfdd796 (8 fichiers). Chaque élément vient d’une correspondance de motif dans le code: ouvrez le fichier lié avant de vous y fier.
7.1. Couches et modules
Les dossiers sont classés par couche selon leur nom, de l’interface utilisateur jusqu’à l’accès aux données. Comme le classement repose sur les noms seulement, le diagramme ne dit rien des appels entre couches.
Mermaid Vue en couches
flowchart TB
subgraph L_presentation["Présentation"]
direction TB
presentation_0["assets/js<br/>1 fichier"]
presentation_1["inject<br/>1 fichier"]
end
subgraph L_core["Source principale"]
direction TB
core_0["inject<br/>3 fichiers"]
end
L_presentation ~~~ L_core
7.2. Modèle C4
Du contexte du système aux déclarations du code. Chaque niveau conserve les limites des sources disponibles.
UML 1 · Contexte du système
La vue C4 la plus large : qui utilise le projet et sur quels systèmes et stockages externes il s’appuie. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Context>
LAYOUT_LEFT_RIGHT()
System(SYS, "GithubSimpleFileDownloader", "Cette extension archivée tentait d’ajouter des boutons de téléchargem…")
@enduml
UML 2 · Conteneurs
Un niveau plus près : les parties qui s’exécutent séparément dans le projet, leur langage principal et le chemin des appels entre elles. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Container>
LAYOUT_LEFT_RIGHT()
System_Boundary(SYS, "GithubSimpleFileDownloader") {
Container(APP, "GithubSimpleFileDownloader", "JavaScript")
}
@enduml
UML 3 · Composants et couches
Modules regroupés par couche du code. Les limites indiquent l’organisation, sans affirmer une isolation à l’exécution ni des appels. Rendu avec uml-mcp.
Source PlantUML
@startuml
!include <C4/C4_Component>
LAYOUT_TOP_DOWN()
System_Boundary(SYS, "GithubSimpleFileDownloader") {
Boundary(L0, "Présentation", "layer") {
Component(M0_0, "assets/js", "JavaScript", "2 fichiers")
Component(M0_1, "inject", ".css", "1 fichiers")
}
Boundary(L1, "Source principale", "layer") {
Component(M1_0, "inject", "JavaScript", "3 fichiers")
}
}
@enduml
UML 4 · Code
Déclarations, champs et méthodes sélectionnés, regroupés par fichier source. Aucun héritage ni appel n’est déduit. Rendu avec uml-mcp.
Source PlantUML
@startuml
skinparam backgroundColor transparent
skinparam shadowing false
skinparam roundCorner 10
skinparam defaultFontName Arial
skinparam defaultFontSize 13
skinparam ArrowColor #4e6070
skinparam ArrowFontColor #3d4f5f
skinparam titleFontSize 14
skinparam actorBorderColor #006a62
skinparam actorBackgroundColor #e9f3f4
skinparam usecaseBorderColor #006a62
skinparam usecaseBackgroundColor #e9f3f4
skinparam componentBorderColor #006a62
skinparam componentBackgroundColor #e9f3f4
skinparam interfaceBorderColor #006a62
skinparam interfaceBackgroundColor #ffffff
skinparam nodeBorderColor #4e6070
skinparam nodeBackgroundColor #f4f8fb
skinparam databaseBorderColor #006a62
skinparam databaseBackgroundColor #ffffff
skinparam cloudBorderColor #4e6070
skinparam cloudBackgroundColor #f0f5fa
skinparam artifactBorderColor #006a62
skinparam artifactBackgroundColor #ffffff
skinparam rectangleBorderColor #b0c2d3
skinparam activityBorderColor #006a62
skinparam activityBackgroundColor #e9f3f4
skinparam partitionBorderColor #b0c2d3
skinparam stereotypeCBackgroundColor #ffffff
top to bottom direction
hide empty members
package "GithubSimpleFileDownloader" {
object "src/inject/inject_github.js" as FN0 {
getRawLink()
fetchDownloadLink()
getFileURLDocument()
changeFileSize()
}
object "src/inject/inject_bitbucket.js" as FN1 {
getRawLink()
fetchDownloadLink()
getFileURLDocument()
}
object "src/inject/inject_gitlab.js" as FN2 {
getRawLink()
fetchDownloadLink()
getFileURLDocument()
changeFileSize()
}
}
@enduml
7.3. Interface publique
Du code extérieur peut utiliser tout ce qui est listé ici. Le projet déclare aussi 0 types publics.
Points d’entrée
mainexport du paquet./jquery.jssrc/assets/js/jquery/package.json
7.4. Logique métier
Aucune classe n’a été extraite. Voici les plus gros fichiers source et leurs fonctions.
src/inject/inject_github.jsgetRawLink, fetchDownloadLink, getFileURLDocument, changeFileSizesrc/inject/inject_bitbucket.jsgetRawLink, fetchDownloadLink, getFileURLDocumentsrc/inject/inject_gitlab.jsgetRawLink, fetchDownloadLink, getFileURLDocument, changeFileSize
7.5. Intégrations externes
Clients HTTP
Hôtes nommés dans le code
gitlab.com1 fichierssrc/inject/inject_gitlab.js:55
7.6. Stack et dépendances
PHP src/assets/js/jquery/composer.json 1 à l’exécution
Dépendances externes
1 paquets déclarés (1 à l’exécution, 0 pour le développement) dans src/assets/js/jquery/composer.json.
Tableau des paquets 1
| Paquet | Version | Usage | Rôle | Registre |
|---|---|---|---|---|
robloach/component-installer | * | exécution | Allows installation of Components via Composer. | packagist.org |
7.7. Pipeline CI/CD
Aucun pipeline CI/CD dans le dépôt. Le code se construit et se lance à la main, comme décrit plus haut.
7.8. Déploiement
Mermaid Schéma de déploiement
flowchart LR
repo[("Dépôt GitHub")]
local["Poste local<br/>PHP"]
repo -->|"cloner et lancer"| local
Le dépôt ne contient ni Dockerfile, ni fichier Compose, ni configuration d’hébergement : le code s’exécute sur le poste qui le clone.
7.9. Sécurité
Rien trouvé pour: Interface privée, Services, Entités, Base de données, Supervision, Tests automatisés.
8. Référence
8 / 8 fichiers admissibles lus (42 dans l’arbre); 0 trop volumineux, 0 échec de lecture et 0 diagnostic de syntaxe.
Ce que couvre l’analyse
Les dossiers connus de dépendances et de compilation, les fichiers d’identifiants et les binaires sont exclus. La collecte couvre les README, les manifestes reconnus et les fichiers source pris en charge.
Les statistiques Linguist couvrent l’ensemble du dépôt et peuvent inclure d’autres langages.
10. Fichiers à lire 3
11. Glossaire
Dépôt
Les fichiers source, la configuration et l’historique versionné d’un projet.
README
Le document d’entrée du dépôt, qui présente généralement son rôle et son installation.
Dépendance
Une bibliothèque, un outil ou un service nécessaire à la compilation ou à l’exécution d’un composant.
Port publié
Un port de l’hôte associé au port d’un service dans un conteneur. Sa publication peut rendre le service accessible hors du réseau des conteneurs.
Interface en ligne de commande
Une interface textuelle où les commandes et arguments choisissent les opérations. Les codes de retour permettent aux scripts de détecter un succès ou un échec.
Compilation
Les étapes qui transforment les sources et dépendances en programme exécutable ou en livrable distribuable.
12. Références
- antoinebou12. (2026, 5 novembre). GithubSimpleFileDownloader. [Software repository] github.com.
- antoinebou12. (2026, 5 novembre). GithubSimpleFileDownloader: README. [Repository documentation] github.com.
- antoinebou12. (2026, 5 novembre). manifest.json. [Source file] github.com.
- antoinebou12. (2026, 5 novembre). src/inject/inject_github.js. [Source file] github.com.
- antoinebou12. (2026, 5 novembre). src/inject/inject_gitlab.js. [Source file] github.com.
- Boucher, A. (2026, 23 octobre). GithubSimpleFileDownloader : Une extension liée à la structure des pages. [Project article] antoineboucher.info.
Les sources sans date de publication indiquent la date de leur dernière vérification, le 5 novembre 2026. Les liens des fichiers conservent la révision inspectée lorsqu’elle est disponible.