Refined Neko-Sama.fr

A propos

Cette extension web permet principalement de corriger et d'améliorer la page des animés du site Neko-Sama.fr.

Voici la liste des fonctionnalités qu'elle apporte:

• La recherche et la navigation entre les pages sont maintenant complètement dynamiques
• Les filtres Type, Status et Genres sont maintenant fonctionnels
• Ajout d'un filtre par année
• Vos filtres de recherche ainsi que la page sont sauvegardé dans l'URL pour vous permettre de les garder en favoris ou à transmettre ce lien à une tierce personne
• Bonus: Un anti-pub est intégré pour les deux hébergeurs vidéos présent sur le site:
  • pStream (Stream): Plus aucune PopUp et ajoute une compatibilité avec les autres bloqueurs de pub (Vous n'êtes donc plus dans l'obligation de les désactiver)
  • MyStream: Les PopUps sont retirées ainsi que les publicités intrusives sur le lecteur mais il n'est pas compatible avec certains bloqueurs de publicités. Si le lecteur ne réagit pas, essayez de désactiver vos anti-publicités pour Neko-Sama.fr

Build/Run

Prérequis

Extension web

• Node.js v14+ et npm.js v6+
• Un navigateur comme Firefox, Chrome ou Edge

Web API

• Python 3+
• Docker + docker-compose (optionnel mais chaudement recommandé). Pour Windows vous avez Docker Desktop
• Elasticsearch si vous ne comptez pas utiliser Docker

Lancer l'API de recherche

Si vous disposez de Docker avec docker-compose, vous pouvez lancer simplement l'API comme ceci:

$ cd webapi
$ docker-compose up

Attention pour faire fonctionner le moteur ElasticSearch vous devez impérativement modifier le paramètre kernel vm.max_map_count et le mettre à au moins 262144. Cliquez sur ce lien pour connaitre la manipulation nécessaire selon votre environnement.

L'api est disponible à l'adresse http://127.0.0.1:8000/api/animes
l'api d'ElasticSearch est disponible à l'adresse http://127.0.0.1:9200

Populer la base de données Elasticsearch

Actuellement la base de documents est vide par défaut, pour y ajouter les animés présent sur Neko-Sama, vous devez utiliser la commande Flask populate-animes, avec Docker il vous suffit d'entrer l'a commande suivante

$ docker-compose run webapi flask populate-animes

💡 Tips: La commande pour rajouter les animés dans Elasticsearch supporte l'envoi d'email si l'opération à réussi ou échouée. Dans le cas d'une réussite elle renvoi les informations sur les animés rajoutés/modifiés/supprimés ainsi qu'un rapport d'health-check du cluster. Dans le cas d'une erreur vous recevrez la stacktrace de l'exception.

Pour activer et configurer l'envoi de mail, vous devez définir les variables d'environnement suivantes

• MAIL_ACTIVE_LOGS : Mettez cette valeur à true pour activer l'envoi des mails
• MAIL_SERVER : Il s'agit du serveur mail à contacter (Généralement le serveur SMTP qui gère l'email que vous voulez utiliser)
• MAIL_PORT : Il s'agit du port à utiliser pour contacter le serveur mail. Il s'agit souvent du port 587 ou 465 pour une communication chiffrée
• MAIL_USE_TLS : Mettez cette valeur à true pour utiliser le protocol TLS
• MAIL_USE_SSL : Mettez cette valeur à true pour utiliser le protocol SSL
• MAIL_USERNAME : Il s'agit de votre identifiant d'authentification au serveur mail
• MAIL_PASSWORD : Renseignez ici votre mot de passe d'authentification si c'est nécessaire
• MAIL_LOGS_RECIPIENT : Il s'agit de l'adresse email qui recevra les mails de l'API

Voici un exemple d'une configuration pour utiliser votre adresse Gmail pour envoyer les mails

MAIL_ACTIVE_LOGS=true
MAIL_SERVER=smtp.gmail.com
MAIL_PORT=465
MAIL_USE_TLS=false
MAIL_USE_SSL=true
MAIL_USERNAME=votre-adresse@gmail.com
MAIL_PASSWORD=votre-mot-de-passe
MAIL_LOGS_RECIPIENT=je-recois-les-emails@*****.***

Vous pouvez soit les définir de plusieurs manières

• Via la commande export sous Unix ou set pour Windows (Peu recommandé car il faut le faire à chaque nouvelle session)
• Vous pouvez les ajouter dans le docker-compose.yml dans la rubrique environment de webapi (Vous n'avez qu'à le faire une fois mais vos identifiants seront exposé sur Git si vous les incluez dans un commit)
• Vous pouvez définir un fichier .env dans le dossier webapi dans lequel vous mettez vos variables d'environment. Il sera lu automatiquement par Flask lorsque vous utiliserez la commande populate-animes. Et il ne sera pas pris en compte dans vos commit car il à été ajouté au .gitignore

Compiler / Lancer l'extension Web

Pour compiler l'extension

$ cd webextension/
$ npm install
$ npm run build

Un dossier distribution/ est maintenant créé contenant tous les fichiers pour l'extension web.
Il vous suffit maintenant de charger l'application dans votre navigateur web.

Vous pouvez utilisez les commandes suivantes pour ouvrir une instance de Firefox ou Chrome sur un profil séparé avec directement l'extension chargée et avec le site Neko-Sama.fr ouvert au démarrage:

# Pour lancer une instance de Chrome
$ npm run start

# Pour lancer une instance de Firefox
$ npm run start:firefox

Sinon vous pouvez charger manuellement l'extension avec les instructions suivantes:

• Firefox

  • Tapez about:debugging dans votre barre d'adresse
  • Allez dans l'onglet à gauche Ce Firefox
  • Dans la rubrique Extensions temporaires cliquez sur Charger un module complémentaire temporaire... et naviguez dans le dossier distribution/ et choisissez le fichier manifest.json puis Ouvrir
  • L'extension est maintenant chargée et utilisable

• Chrome / Edge

  • Rendez-vous sur l'adresse chrome://extensions/ pour Chrome ou edge://extensions/ pour Edge
  • Activer le Mode développeur
  • Cliquez sur Charger l'extension non empaquetée / Charger l'élément décompressé puis naviguez jusque dans le dossier distribution/ et faites OK
  • L'extension est maintenant chargée et utilisable

L'extension utilise l'API hébergée, pour la faire utiliser votre API locale, rendez-vous dans le fichier webextension/animes/better-filters.js et changez le hostname par 127.0.0.1:8000 en HTTP

Pour mettre à jour automatiquement l'extension quand vous modifiez un fichier, utilisez la commande

$ npm run watch

Licence

MIT - Fichier LICENSE

---

Yohann Martin  ·  2020