Ma première exten­sion pour Chrome : no-no-select

Ma première exten­sion pour Chrome : no-no-select

Je n’en suis pas à ma première exten­sion pour navi­ga­teur, ma première exten­sion c’est HTML5 Button pour Opera. Elle affi­chait un bouton dans la barre d’ex­ten­sion lorsque le site utilise le HTML5.

Ma nouvelle exten­sion, sera la première pour le navi­ga­teur Chrome, elle s’ap­pelle no-no-select.

Son but est d’acti­ver la sélec­tion là ou des sites l’on désac­ti­vée. Par exemple, rendez-vous sur cette page : http://trend­stop.levif.be/fr/detail/463478965/emakina.aspx, impos­sible de sélec­tion­ner quoi que ce soit.

Causes du problème

J’écris causes au pluriel parce qu’il y a plusieurs méca­nismes pour empê­cher la sélec­tions.

Blocage via les CSS

La première mesure de blocage utilise CSS, il existe une propriété suppor­ter par tous les navi­ga­teurs courants qui permet de désac­ti­ver la sélec­tion, il s’agit de user-select, placé à « none », il rend la sélec­tion impos­sible.

CSS user-select
Classe CSS avec blocage de la sélec­tion via la propriété user-select.

Comme nous le voyons ci-dessus, les alter­na­tives pour chaque moteur de rendu ont été prévu sauf pour Inter­net Explo­rer : -ms-user-select.

Blocage via Javas­cript

L’autre moyen de blocage utilise Javas­cript, lorsque l’uti­li­sa­teur commence une sélec­tion, la Javas­cript la bloque.

Balise Body avec Javascript onDragStart et onSelectStart.
Balise body avec Javas­cript onDragS­tart et onSe­lectS­tart.

Nous pouvons voir sur la copie d’écran ci-dessus, les éléments ondrag­start et onse­lects­tart.

 

Solu­tions

CSS

Concer­nant le blocage par CSS, la solu­tion est simple appliquer la propriété user-select à tous les éléments

Pour ceci, j’uti­lise le code suivant :

* {
 -webkit-user-select : auto !important ;
 -khtml-user-select : auto !important ;
 -moz-user-select : auto !important ;
 -ms-user-select : auto !important ;
 -o-user-select : auto !important ;
 user-select : auto !important ;
}

J’ai repris tous les préfixes de navi­ga­teur, pourquoi puisque c’est une exten­sion Chrome, par prin­cipe, la porta­bi­lité en est amélio­rer même si dans l’im­mé­diat ce n’est pas utile.

De même, j’au­rais pu me limi­ter à la classe « nosel » utilisé sur la page que je montre en exemple, mais j’ai préfé­rer opter pour une solu­tion plus univer­selle.

Javas­cript

Pour la partie Javas­cript, j’ai créé deux fonc­tions, une pour chaque éléments de blocage :

function enableSelect(){
   var snapshot = document.evaluate('//@onselectstart',
   document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null),
   numItems = snapshot.snapshotLength - 1;
   for (var i = numItems; i >= 0; i--) {
      snapshot.snapshotItem(i).nodeValue = '';
   }
}

function enableDrag(){
   var snapshot = document.evaluate('//@ondragstart',
   document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null),
   numItems = snapshot.snapshotLength - 1;
   for (var i = numItems; i >= 0; i--) {
      snapshot.snapshotItem(i).nodeValue = '';
   }
}

Le tout empaqueté dans une exten­sion pour Chrome.

 

Créa­tion de l’icone

Que serait une exten­sion sans une (belle) icone. Je n’ai pas la préten­tion du beau, je vais me conten­ter d’une simple icone. Puisque l’ap­pli­ca­tion réac­tive la sélec­tion, j’ai choi­sis un mot, « text » à moitié sélec­tionné avec un curseur de sélec­tion à droite, ce qui nous donne ceci :

Icone no-no-select
Icone de l’ex­ten­sion No-no-select.

J’ai réalisé cette icone à l’aide d’Inks­cape, un logi­ciel de dessin vecto­riel (comme Illus­tra­tor) mais libre et gratuit.

 

Instal­ler l’ex­ten­sion

Pour vous permettre d’ins­tal­ler l’ex­ten­sion, le plus simple aurait été de la dépo­ser sur le Chrome Web Store, mais pour cela il faut débour­ser 5$, pour mettre une exten­sion gratuite à dispo­si­tion de la commu­nauté, c’est abusé !

J’ai donc décidé de mettre cette exten­sion à dispo­si­tion sur mon blog. Télé­char­ger l’ex­ten­sion no-no-select

Pour l’ins­tal­ler, il vous suffira de l’ou­vrir (double-clic sur le fichier ou clic direc­te­ment depuis Chrome).

Support

Vous avez des ques­tions, des remarques, des sugges­tions, lais­sez moi un commen­taire et je vous répon­drais.

Articles simi­laires :

    None Found

Tagués avec : , ,

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.