Greasy Fork is available in English.
Librairie pour l'intégration de médias sur des forums
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/554422/1688102/LecteurMedia%20API%20Library.js
Documentation de l'API LecteurMedia
Cette librairie a été conçue pour intégrer facilement des lecteurs de médias (YouTube, Twitter, TikTok, etc.) dans n'importe quel userscript, en particulier sur des sites de type forum.
L'installation se fait en deux étapes : inclure la librairie et ajouter les permissions nécessaires à votre script.
Ajoutez la directive @require suivante dans l'en-tête de votre userscript :
// @require https://update.greasyfork.icu/scripts/554422/1687762/LecteurMedia%20API%20Library.jsLa librairie est modulaire. Vous pouvez choisir de n'inclure que les permissions strictement nécessaires à votre usage.
Cette configuration active l'intégration des médias mais sans le panneau de configuration pour l'utilisateur final. C'est idéal pour une intégration discrète et légère. La librairie utilisera ses réglages par défaut.
// Permissions minimales requises
// @grant GM_addStyle
// @grant GM_xmlhttpRequestCette configuration active l'intégration des médias ET ajoute une option "Configurer le Lecteur Média" dans le menu de Tampermonkey. Cela permet à l'utilisateur de personnaliser son expérience (activer/désactiver des fournisseurs, etc.).
// Permissions complètes pour toutes les fonctionnalités
// @grant GM_addStyle
// @grant GM_xmlhttpRequest // Requis pour les requêtes réseau (Twitter, TikTok, etc.)
// @grant GM_registerMenuCommand // Requis pour afficher le menu de configuration
// @grant GM_setValue // Requis pour sauvegarder les réglages de l'utilisateur
// @grant GM_getValue // Requis pour lire les réglages de l'utilisateurGM_getValue est-il optionnel mais parfois requis ?GM_getValue. Cependant, si votre script utilise une autre directive @grant (comme GM_addStyle), il s'exécute dans un environnement "sandbox". Pour que le panneau de configuration fonctionne dans ce mode, vous devez déclarer explicitement toutes les permissions GM_* dont il a besoin.La librairie propose deux manières principales de fonctionner :
Ce mode configure tout pour vous : il détecte automatiquement les nouveaux messages sur les forums JVC/JVArchive et y intègre les médias. Il ajoute également une commande dans le menu du userscript pour la configuration (si les permissions sont accordées).
if (typeof window.LecteurMedia === 'undefined') {
console.error("Erreur : La librairie Lecteur Media n'a pas pu être chargée.");
return;
}
// Initialise la librairie avec tous les providers par défaut
const lecteurMediaInstance = new window.LecteurMedia();
// Lance le mode autonome. C'est tout !
lecteurMediaInstance.initStandalone();
Ce mode vous donne le pouvoir de décider quels éléments de la page sont analysés et à quel moment. C'est parfait pour les sites avec du contenu chargé dynamiquement (AJAX) ou pour des besoins très spécifiques.
if (typeof window.LecteurMedia === 'undefined') {
console.error("Erreur : La librairie Lecteur Media n'a pas pu être chargée.");
return;
}
// Initialise la librairie, mais ne fait rien pour l'instant
const lecteurMediaInstance = new window.LecteurMedia();
// Plus tard dans votre script, quand du nouveau contenu apparaît...
const nouveauContenu = document.getElementById('zone-de-nouveaux-messages');
if (nouveauContenu) {
lecteurMediaInstance.processNode(nouveauContenu);
}
Lors de la création d'une nouvelle instance, vous pouvez passer un objet d'options pour personnaliser les médias qui seront chargés.
const lecteurMediaInstance = new window.LecteurMedia(options);providersCette option définit quels fournisseurs de médias activer.
Valeur de providers | Description |
|---|---|
'all' (ou non spécifié) | Active tous les fournisseurs de médias disponibles. |
'base' | Active uniquement les fournisseurs qui ne nécessitent aucune directive @connect (ex: YouTube, Twitch). |
'connect' | Active les fournisseurs qui nécessitent des directives @connect spécifiques (ex: Twitter, Facebook, SoundCloud). |
'wildcard' | Active les fournisseurs qui nécessitent la directive @connect * pour fonctionner (ex: intégration d'images/vidéos génériques, aperçus d'articles). |
['YouTube', 'Twitter'] | Un tableau de noms pour n'activer que les fournisseurs spécifiés. |
['base', 'connect'] | Un tableau de catégories pour combiner plusieurs groupes. |
collapsibleCette option permet au développeur de désactiver la fonctionnalité d'en-tête réductible (collapse/expand) pour tous les médias.
Valeur de collapsible | Description |
|---|---|
true (ou non spécifié) | Les en-têtes réductibles sont activés par défaut (l'utilisateur final peut toujours les désactiver dans le menu de configuration, s'il est disponible). |
false | Désactive complètement les en-têtes réductibles. L'option n'apparaîtra pas pour l'utilisateur et les médias seront toujours affichés entièrement. |
collapsible: false, l'utilisateur ne pourra pas réactiver la fonctionnalité. C'est une désactivation globale. Sinon, c'est le choix de l'utilisateur dans le panneau de configuration qui prime.// Charger tous les providers de base et connect,
// mais désactiver les en-têtes réductibles pour un affichage plus simple.
const lecteurMediaInstance = new window.LecteurMedia({
providers: ['base', 'connect'],
collapsible: false
});
instance.processNode(node)Analyse un élément HTML spécifique et ses enfants à la recherche de liens à transformer en médias intégrés.
node (HTMLElement) : L'élément du DOM à analyser.boolean (true si le traitement a été lancé avec succès, false si le noeud est invalide).instance.addProvider(providerObject)Permet d'étendre la librairie en ajoutant votre propre fournisseur de média personnalisé.
providerObject (Object | Array<Object>) : Un objet (ou un tableau d'objets) décrivant le nouveau fournisseur.Structure d'un objet provider :
| Propriété | Type | Description |
|---|---|---|
name | string | Requis. Nom unique du provider (ex: 'MonSite'). |
selector | string | Requis. Sélecteur CSS pour trouver les liens (ex: 'a[href*="monsite.com/video/"]'). |
category | 'base' | 'connect' | 'wildcard' | Requis. La catégorie de permissions nécessaire. |
connect | string | string[] | (Optionnel) Le ou les domaines pour la directive @connect si category est 'connect'. |
createEmbedElement | function | Requis. Fonction qui reçoit le lien (HTMLAnchorElement) et doit retourner l'élément HTML à intégrer (ou une Promise qui le résout, ou null). |
postProcess | function | (Optionnel) Fonction appelée après que l'élément a été ajouté au DOM. Utile pour les librairies externes (ex: Facebook SDK). |
Ces fonctions sont accessibles directement via la classe LecteurMedia.
LecteurMedia.getRequiredConnects(options)C'est l'outil le plus utile pour vous, développeur ! Il génère automatiquement les lignes @connect que vous devez ajouter à l'en-tête de votre userscript en fonction des fournisseurs que vous avez choisis.
options (Object) : Le même objet d'options que pour le constructeur (ex: { providers: ['base', 'connect'] }).// À mettre temporairement dans votre script pour voir les @connect nécessaires
const connectsRequis = window.LecteurMedia.getRequiredConnects({ providers: ['base', 'connect'] });
console.log("Connects à ajouter à l'en-tête du script :");
console.log(connectsRequis.join('\n'));
// Affiche dans la console :
// // @connect api.vxtwitter.com
// // @connect soundcloud.com
// // @connect ...et tous les autres
LecteurMedia.compatibleHttpRequest(options)Un wrapper simple pour GM_xmlhttpRequest qui gère la compatibilité et retourne une Promise pour une utilisation facile avec async/await.
try {
const response = await window.LecteurMedia.compatibleHttpRequest({
method: "GET",
url: "https://api.example.com/data"
});
const data = JSON.parse(response.responseText);
console.log(data);
} catch (error) {
console.error("La requête a échoué :", error);
}
Le but est d'avoir tous les médias sur JVC, avec le menu de configuration, sans se compliquer la vie.
// ==UserScript==
// @name Mon Lecteur Média pour JVC
// @match https://www.jeuxvideo.com/forums/*
// @require https://update.greasyfork.icu/scripts/554422/1687762/LecteurMedia%20API%20Library.js
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @connect *
// ==/UserScript==
(function() {
'use strict';
if (typeof window.LecteurMedia === 'undefined') return;
// On active tous les providers
const lecteurMediaInstance = new window.LecteurMedia({ providers: 'all' });
// On laisse la librairie tout gérer automatiquement, y compris le menu de configuration
lecteurMediaInstance.initStandalone();
})();
L'objectif est de créer un script très léger qui n'intègre que certains médias (ici, Twitter et YouTube), sans menu de configuration et avec le minimum de permissions.
// ==UserScript==
// ==UserScript==
// @name Mini Lecteur YouTube & Twitter
// @match https://www.jeuxvideo.com/forums/*
// @require https://update.greasyfork.icu/scripts/554422/1687762/LecteurMedia%20API%20Library.js
// @grant GM_addStyle
// @grant GM_xmlhttpRequest
// @connect api.vxtwitter.com
// ==/UserScript==
(function() {
'use strict';
if (typeof window.LecteurMedia === 'undefined') return;
// Étape 1 : Initialiser la librairie avec SEULEMENT les providers choisis
const lecteurMediaInstance = new window.LecteurMedia({
providers: ['YouTube', 'Twitter']
});
// Étape 2 : On analyse le corps de la page au chargement
lecteurMediaInstance.processNode(document.body);
// Étape 3 (Optionnel) : Gérer le contenu dynamique avec un MutationObserver
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE) {
lecteurMediaInstance.processNode(node);
}
}
}
});
observer.observe(document.body, { childList: true, subtree: true });
})();