Disclamer : Cet article date un peu 🙂 Vous pouvez le lire pour information, mais l’extension n’est plus disponible… En revanche, vous pouvez retrouver cette fonctionnalité dans l’extension « Wattpad Better Interface« , disponible sous chrome, firefox et opéra.

Bon grès mal gré, nous avons fini par nous faire à WattPad. Nous vous parlions de nos sentiments et retours sur les différentes  plateformes de publication. WattPad y était cité comme trop grand, trop implicite… C’est toujours le cas. Mais l’expérience aidant, on finit par s’y retrouver. Le système poussé de notifications par téléphone est bien conçu. Ça en fait la plateforme a suivre. Celle qui, des mois plus tard, nous voit passer tous les jours.

Mais bordel. C’est codé avec les pieds. Buggé, au possible ! C’est optimisé pour tablette et l’expérience PC est au bas mot dégueulasse.
Mon problème majeur vient de l’impossibilité de copier-coller le moindre texte. La sélection est simplement désactivée. Pour commenter un texte, il faut avouer que c’est juste relou.

Comment retrouver le pouvoir de copier-coller sur WattPad

L’idée est de venir, au chargement de la page, désactiver une règle css qui nous bride cette possibilité.

La règle css est la suivante :

#story-reading .page {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: max-height 1500ms ease-in-out;
-o-transition: max-height 1500ms ease-in-out;
transition: max-height 1500ms ease-in-out;
max-height: 20000px;
overflow: hidden;
}

(En rouge, les propriétés qui nous intéressent… Enfin, plutôt, qui ne nous intéressent pas ! )

Comment injecter notre code pour modifier celui de la page ?

Hannn mais t’as pas le droit sale hackeuse !

Alors oui, mais non. Je ne modifie le code que sur mon ordinateur (que sur mon navigateur, pour être plus précise). Ça n’ira pas impacter tout WattPad, juste la façon dont MA machine le traite. En gros, je suis chez moi, je fais encore ce que je veux :p. D’ailleurs si je voulais passer WattPad en bleu sur fond rouge, je pourrais. Ça serait con, mais je pourrais.

Installer l’extension « Monkey » sur son navigateur

Que ce soit sous Chrome, Opéra ou Firefox (si vous utilisez Internet Explorer, je n’aurais qu’une chose à vous dire : fuyez) il existe des extensions qui permettent d’améliorer l’expérience utilisateur en injectant des petits bouts de codes dans les pages. Cela va du bouton « Actualiser mes mails » sur Gmail au système complet de prise de note rapide… Dans notre cas, ce sera bien plus simple !

Installer TamperMonkey (Chrome)

Installer GreasMonkey (FireFox)

Une fois installée, une nouvelle icône devrait apparaître dans votre navigateur :

tuto-1

Créer un nouveau script

GreaseMonkey :

tutofg-2

A saisir dans la fenêtre de création du script :

  • Nom : Enable WattPad Selection on Desktop Application
  • Espace de nom : cestdoncvrai.fr
  • Description : Take power to copy on Wattpad
  • Inclus : https://www.wattpad.com/*

TamperMonkey :

tutoct-2

Qu’il s’agisse de Firefox ou Chrome, on arrive pour finir à une fenêtre avec du code dedans. Enfin, pour l’instant seule la déclaration du script doit être renseignée :

// ==UserScript==
// @name Enable WattPad Selection on Desktop Application
// @namespace cestdoncvrai.fr
// @description Take power to copy on Wattpad
// @include https://www.wattpad.com/*
// @version 1
// @grant none
// ==/UserScript==

La ligne réellement intéressante est la suivante :

// @include https://www.wattpad.com/*

Elle permet de dire au script de ne s’exécuter que sur le site indiqué (wattpad, donc). L’étoile indique au script de s’exécuter sur toutes les pages dont l’adresse commence par « https://www.wattpad.com/ »

Le script qui nous intéresse

// ==UserScript==
// @name Enable WattPad Selection on Desktop Application
// @namespace cestdoncvrai.fr
// @description Take power to copy on Wattpad
// @include https://www.wattpad.com/*
// @version 1
// @grant none
// ==/UserScript==

// @require http://code.jquery.com/jquery-2.1.4.min.js
$(document).ready(function () {

$('body').bind('DOMNodeInserted DOMNodeRemoved', function (event) {

$('.panel-reading').each(function () {

$(this).css('-webkit-user-select', 'text');
$(this).css('-moz-user-select', 'text');
$(this).css('-ms-user-select', 'text');
$(this).css('-k-html-user-select', 'text');
$(this).css('user-select', 'text');

});

});

});

Voilà. Vous pouvez le copier-coller dans le script Monkey, sauvegarder… Et c’est bon…  ! Vérifiez quand même que le Monkey est activé (en cliquant sur son icône)…

Attention : Sur GreaseMonkey, lors du premier copier-coller, il demande un test de sécurité. Il faut simplement écrire « autoriser le collage » (tout en minuscule) n’importe où dans la fenêtre, puis l’effacer, puis coller 🙂

tuto-3

Rendez-vous sur une fiction sur WattPad et appréciez le fait de pouvoir la surligner et en copier-coller des extraits !

tuto-4

À noter que, sur Chrome, TamperMonkey vous indique le nombre de scripts actifs sur cette page.

Edit : Sinon, sous Firefox, vous pouvez aussi utiliser le « Mode Lecture », qui en un clique rends la lecture plus simple… Et sélectionnable à souhait ! Pas d’équivalent valable sous Chrome, ce qui est bien dommage (ça semble être une fonctionnalité dont le développement a été abandonné)

 

Github