Librairie pour l'intégration de médias sur des forums
目前為
此腳本不應該直接安裝，它是一個供其他腳本使用的函式庫。欲使用本函式庫，請在腳本 metadata 寫上： // @require https://update.cn-greasyfork.org/scripts/554422/1687681/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.org/scripts/554422/LATEST_VERSION/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.
// 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
// @grant GM_xmlhttpRequest
// @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'utilisateurwindow.LecteurMedia. Vérifiez toujours sa présence avant de l'utiliser pour éviter les erreurs.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.
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);L'option principale est providers. Elle 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). |
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.Promise qui se résout à true si l'opération a réussi.instance.addProvider(providerObject)Permet d'étendre la librairie en ajoutant votre propre fournisseur de média personnalisé.
providerObject (Object) : Un objet décrivant le nouveau fournisseur (voir structure ci-dessous).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[] | 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). |
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, sans se compliquer la vie.
// ==UserScript==
// @name Mon Lecteur Média pour JVC
// @match https://www.jeuxvideo.com/forums/*
// @grant GM_addStyle
// @grant GM.xmlHttpRequest
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @connect *
// @require https://update.greasyfork.org/scripts/554422/1687584/LecteurMedia%20API%20Library.js
// ==/UserScript==
(function() {
'use strict';
if (typeof window.LecteurMedia === 'undefined') {
console.error("Erreur : La librairie Lecteur Media n'a pas pu être chargée.");
return;
}
// On active tous les providers, y compris ceux qui nécessitent @connect *
const lecteurMediaInstance = new window.LecteurMedia({ providers: 'all' });
// On laisse la librairie tout gérer automatiquement
lecteurMediaInstance.initStandalone();
})();
L'objectif est de créer un script minimaliste qui n'intègre que certains médias, sans demander trop de permissions.
// ==UserScript==
// @name Lecteur YouTube & Twitter
// @match https://www.example.com/*
// @grant GM_addStyle
// @grant GM.xmlHttpRequest
// @grant GM_registerMenuCommand
// @connect api.vxtwitter.com
// @require https://update.greasyfork.org/scripts/554422/1687584/LecteurMedia%20API%20Library.js
// ==/UserScript==
(function() {
'use strict';
if (typeof window.LecteurMedia === 'undefined') return;
// Étape 1 (à faire une seule fois) : trouver les @connect nécessaires
/*
const connects = window.LecteurMedia.getRequiredConnects({ providers: ['YouTube', 'Twitter'] });
console.log(connects.join('\n'));
// La console affichera : // @connect api.vxtwitter.com
*/
// Étape 2 : Initialiser la librairie avec les providers choisis
const lecteurMediaInstance = new window.LecteurMedia({
providers: ['YouTube', 'Twitter']
});
// Étape 3 : On analyse le corps de la page au chargement
lecteurMediaInstance.processNode(document.body);
// Optionnel : si le site charge du contenu dynamiquement, on peut utiliser 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 });
})();