nothus

Attention : l'ajout de méthodes automatiques ou semi-automatiques sur des sites sans leur consentement n'est pas autorisé, particulièrement lorsque la finalité s'apparente à un crawling (cf droits de la propriété et droits voisins).

Objectifs

Dans le cadre de ma WebExtension, je cherche à ajouter des flux à la sauce XML (notamment RSS) et non-XML aux items, de manière automatique (surveillance de page et de ressources), comme de récupération manuelle par action de l'utilisateur (capture du tweet, etc).

Il est important, pour la pérennité de l'outil, que l'impact de la WebExtension soit la plus mineure possible : pas de ralentissements, pas de détérioration des sites visités et, dans mon cas, pas d'impact sur la vie privée ou d'utilisation d'API distante.

Méthode et Performances

Pour l'ajout d'un bouton sur Twitter par exemple, sans l'utilisation de son API, cela impose :
- l'injection d'un script sur le domaine Twitter.com, avant l'exécution de la page (en prenant garde à certains changements dans l'environnement : par exemple console.log fonctionne différemment sur Twitter et ne doit pas être utilisé),
- l'insertion de nouveaux menus d'actions aux tweets au démarrage de la page,
- optionnellement, l'affichage des nouveaux tweets disponibles (un lien est généré pour se faire, qui serait "virtuellement" cliqué),
- l'insertion de nouveaux menus d'actions aux tweets ainsi ajoutés.

L'utilisation des Events (et particulièrement les Mutations Events, par addEventListener détériore fortement les performances, particulièrement lorsque le site utilise un affichage dynamique intensif, tel Facebook ou Twitter, ou simplement l'utilisation d'outils comme Vue.js qui permettent des rafraîchissements performants mais intensifs.

En lieu et place des événements, le MDN propose le constructeur MutationObserver, qui permet de créer des "observatoires" pouvant surveiller des éléments, sélectionnés auparavant dans le DOM par les méthodes traditionnelles (dont la fonction querySelector).

La navigateur transmet à l'observatoire la série sélectionnée d'éléments modifiés et leurs modifications à écouter, par le biais de l'observatoire, qui en sort un objet spécifique à la recommandation du script par le biais des événements classiques. Cela évite donc une étape longue et fastidieuse comme le bouillonnement et l'exécution de fonctions de rappel par addEventListener.

L'utilisation de MutationObserver peut donc être jugée mineure - et la plus adaptée - sur des pages où la fréquence de rafraîchissement des informations contenues est importante.

Exemple

Ci-dessous un exemple à exécuter sur une page Twitter grâce à la console ou à l'ardoise Javascript : chaque tweet verra au-dessus un petit "coucou" s'afficher.

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
window.ajout = document.createElement("p"); 
window.ajout.appendChild( 
  document.createTextNode( 
    "coucou"
  )
); 
 
var observateur = new MutationObserver(
  (mutations) => {
    mutations.forEach(
      (mutation) => { 
        if (mutation.type!="childList") 
          return; 
        mutation.addedNodes.forEach(
          (element) => { 
            element.insertBefore( 
              window.ajout.cloneNode(true), 
              element.firstElementChild 
            ); 
          } 
        ); 
      } 
    ); 
  } 
);
 
observateur.observe( 
  document.querySelector('#stream-items-id'), 
  { 
  	childList: true 
  }
);
 
/*setTimeout( 
  observer.disconnect(), 
  1000000 
 ); */

A noter

Le menu par défaut des actions de Tweet est un élément "liste" ul sous le format suivant, où l'on peut également insérer ses boutons, sans "détériorer" l'interface habituelle de Twitter, renforçant la discrétion des modifications :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul tabindex="-1" role="menu" aria-labelledby="menu-0" aria-hidden="false">
      <li class="copy-link-to-tweet js-actionCopyLinkToTweet" role="presentation">
        <button type="button" class="dropdown-link" role="menuitem">Copier le lien du Tweet</button>
      </li>
      <li class="embed-link js-actionEmbedTweet" data-nav="embed_tweet" role="presentation">
        <button type="button" class="dropdown-link" role="menuitem">Intégrer le Tweet</button>
      </li>
(...)