Une extension pour modifier des pages : Page Hacker

[nico@nc]

Bonjour,

J'ai découvert il y a quelques temps qu'on peut éditer la page actuellement consultée en tapant dans la barre d'adresse :

Code : Tout sélectionner

javascript: document.designMode='on'; void 0

Avec JavaScript activé bien sûr. Une page bien pour essayer : http://www.google.fr/firefox (la page d'accueil par défaut de Firefox).

Les modifications ne sont évidemment pas “permanentes”, mais c'est assez intéressant, on peut par exemple transformer Firefox en un bloc-notes avec un onglet vierge, modifier des pages avec cette méthode puis les enregistrer par exemple pour les imprimer comme ça, et bien d'autres choses, notamment pour s'amuser (ça vous dit Geckozone à la une du Monde ? ).

Et voulant garder ça sous la main, j'ai pensé à un bouton dans la barre personnelle. Mais ayant un écran pas très haut je ne l'utilise pas. Et j'ai trouvé la page Custom Toolbar Button sur le developpers wiki de Mozilla. Je n'ai donc pas hésité et ai réalisé ma petite extension, que je vous soumet aujourd'hui, vous pouvez la télécharger :

• http://nicopensource.free.fr/pages/pagehacker.php

C'est évidemment quelque chose de tout simple (et donc sans grand “risque” pour Firefox), mais permettant de faire des choses intéressantes. Ça ne fonctionne pour l'instant que pour Firefox, mais j'essaierai de le rendre compatible avec SeaMonkey, de voir ce qu'on peut en faire avec Thunderbird par exemple, et si possible trouver un moyen de “sortir” du designMode.

J'attend donc vos opinions et critiques sur l'extension. Notamment le nom : mon imagination débordante m'a suggéré Page Hacker, mais on doit pouvoir faire plus original et plus sympa. Pour le logo/icône également, j'ai pris ce qu'il y avait de proposé dans le tuto, mais je n'arrive pas à faire quelque chose de bien... si vous avez quelque chose à me proposer, c'est bienvenu !

Merci d'avance !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[Goofy]

Bravo, c'est assez amusant (et peut-être utile, à voir), j'arrive assez facilement à supprimer des trucs et en écrire d'autres sur la page hackée, mais pas forcément partout... mais bon je n'ai que quatre doigts de goofy comme tous les toons...

Je suis sûr que tu mets le tien (de doigt) dans des mois de développement avec des requêtes du genre "et si on pouvait enregister la page modifiée avec un clic ce serait bien...et si on pouvait mettre la page modifiée en mémoire pour la ressortir automatiquement à la place de l'originale à chaque fois qu'on demande l'adresse (ça doit être faisable, l'extension My Image Here peut conserver les images modifiées dans leur page autant qu'on le veut, voir le Captain Caveman...)

Pour ce qui est de l'icône, tu peux toujours demander à efdur dans la graphic stuff zone de bz, et pour les traducteurs tu sais où aussi...


Il me semble que tu pourrais pêcher des idées dans Platypus et Aardvark aussi, qui permettent également d'éditer des pages en direct...

Ah au fait, un détail : pas de dossier content, c'est exprès ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[nico@nc]

Bravo, c'est assez amusant (et peut-être utile, à voir), j'arrive assez facilement à supprimer des trucs et en écrire d'autres sur la page hackée, mais pas forcément partout... mais bon je n'ai que quatre doigts de goofy comme tous les toons...

Je suis sûr que tu mets le tien (de doigt) dans des mois de développement avec des requêtes du genre "et si on pouvait enregister la page modifiée avec un clic ce serait bien...

Pour l'instant on peut enregistrer la page et ses modifications avec Enregistrer sous (ou CTRL+S), c'est bien cela que tu voudrais attribuer à un clic (c'est dans mes capacités ! ) ?

et si on pouvait mettre la page modifiée en mémoire pour la ressortir automatiquement à la place de l'originale à chaque fois qu'on demande l'adresse (ça doit être faisable, l'extension My Image Here peut conserver les images modifiées dans leur page autant qu'on le veut, voir le Captain Caveman...)

Comme je l'ai dit, j'ai réalisé l'extension à partir d'un tuto qui explique tout de A à Z, mais je n'ai pas beaucoup de notions de xul ni de javascript. Donc je peux essayer de bricoler, mais ça reste assez limité.

Et si à la limite on peut enregistrer une page puis la restituer, les changements qui ont eu lieu sur la page depuis ne seront plus visible... enfin on doit complètement remplacer la page pour modifier seulement une partie. Je pense donc que ce n'est pas vraiment ce qu'on peut tirer de la fonctionnalité exploitée ici ; Nuke Anything et quelques autres extensions me semblent plus adaptées pour ça.

Pour ce qui est de l'icône, tu peux toujours demander à efdur dans la graphic stuff zone de bz

Merci de l'info, je ne suis jusque là pas beaucoup passé par cette section du forum, mais je vais en profiter !

Il me semble que tu pourrais pêcher des idées dans Platypus et Aardvark aussi, qui permettent également d'éditer des pages en direct...

Je vais y jeter un coup d'œil. Mais je pense que je vais rester à quelque chose de relativement simple... je ne sais pas si par rapport à d'autres ça donnera un intérêt à l'extension... enfin je verrais comment tout ça va évoluer !

Ah au fait, un détail : pas de dossier content, c'est exprès ?

J'ai corrigé ça, c'est vrai que c'est plus “propre” ainsi.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6

[Omnisilver]

Je viens de tester rapidement juste le code javascript, c'est super intéressant

Je teste ton extension demain

[Omnisilver]

Hello,

Je l'ai testée, et elle est vraiment sympathique ! Je te fais un petit feedback :

• Ca serait pratique de rajouter une astérisque dans le nom de la page pour signaler qu'elle a été éditée et qu'il faut la sauvegarder sous peine de perdre le travail effectué. Comme dans les édieurs de texte en fait (enfin gedit fait comme ça).
• Un raccourci clavier serait pratique également, pour ceux qui ne veulent une interface très light et qui travaillent en plein écran, ou tout simplement qui ne veulent pas ajouter d'icône (symptome anti-superbrowser)
• Pour la page web tu as mis ton blog mais http://nicopensource.free.fr/dotclear/i ... age-Hacker serait plus pertinent pour le moment non ?
• Pour sortir du mode édition pour le moment, on peut se contenter de valider l'URL de la page web
• POur le nom ... Firefox HTML editor ? Pas terrible non plus ... pas facile de trouver un nom qui rende bien compte de son action. En tout cas avec Page Hacker on aura l'impression qu'il s'agit d'un outil de pirate (je sais, hacker ne veut pas dire pirate) alors que je le vois plus comme un outil ... destiné à Mr tout le monde

Je vais l'utiliser pour éditer des pages avant de les imprimer je pense, et il y a une autre utilité à cette extension : faire des canular plus facilement (on édite la page, on fait une capture et hop)

[nico@nc]

Hello,

Je l'ai testée, et elle est vraiment sympathique ! Je te fais un petit feedback :

• Ca serait pratique de rajouter une astérisque dans le nom de la page pour signaler qu'elle a été éditée et qu'il faut la sauvegarder sous peine de perdre le travail effectué. Comme dans les édieurs de texte en fait (enfin gedit fait comme ça).

Dans certains c'est une coloration (rouge par exemple avec Geany), ou la mention (modifié). Je vais voir ce que je peux faire, mais ça dépasse peut-être mes capacités de bricoleur.

• Un raccourci clavier serait pratique également, pour ceux qui ne veulent une interface très light et qui travaillent en plein écran, ou tout simplement qui ne veulent pas ajouter d'icône (symptome anti-superbrowser)

C'est fait, avec CTRL (command sous mac) +F2. L'association n'a pas l'air utilisée et me semble plutôt accessible.

• Pour la page web tu as mis ton blog mais http://nicopensource.free.fr/dotclear/i ... age-Hacker serait plus pertinent pour le moment non ?

Corrigé aussi, j'ai en fait fait la page après l'extension.

• Pour sortir du mode édition pour le moment, on peut se contenter de valider l'URL de la page web

Ah oui, ça ne m'a pas l'air trop dur à faire, j'essaierai ça demain ou ce week-end.

• POur le nom ... Firefox HTML editor ? Pas terrible non plus ... pas facile de trouver un nom qui rende bien compte de son action. En tout cas avec Page Hacker on aura l'impression qu'il s'agit d'un outil de pirate (je sais, hacker ne veut pas dire pirate) alors que je le vois plus comme un outil ... destiné à Mr tout le monde

J'ai pensé la même chose, mais c'est assez dur de trouver quelque chose de bien...

Les nouveautés sont en tout cas dans l'alpha 3, disponible ici : http://nicopensource.free.fr/pages/pagehacker.php. Il y a notamment un nouveau logo, plus coloré que le mien, un grand merci à efdur de BabelZilla !

[Axes]

Sorry, I don't speak French !
I installed the Page hacker adds, but it doesn't work. I would like to know whether any known adds that is conflicted with it ? I am using FF.2 portable ver. with a bundle of adds, and I can't live without these.
Thanks for the add, and hope that I can use it soon .

[nico@nc]

Hi,

Which one of the 2 versions did you tried? And what is your version of Firefox?

By the way, I'm preparing a new version for Firefox 3, allowing to exit the edit mode, with no more bug and much more!

[Axes]

I click on the skull, and nothing happens....
The 3.0rc1 is the portable version.
Some advices, plz. Many thanks.

[nico@nc]

You can try this pre-version (but it is still impossible to exit the edition mode) : http://dl.free.fr/dV61AEY8I/pagehacker-1.0b1-fx.xpi

------
Au passage, quelqu'un saurait ce qui ne va pas dans ce qui suit :

Code : Tout sélectionner

PageHacker = {

1: function () {
	hackeron = "off";
	if(hackeron == "on") {
		hackeron = "off";
		const offurl = "javascript:document.body.contentEditable='false'; void 0"

		document
		.getElementById("content")
		.webNavigation
		.loadURI(offurl, 0, null, null, null)
	}
	
	else {
		hackeron = "on";
		const onurl = "javascript:document.body.contentEditable='true'; void 0"

		document
		.getElementById("content")
		.webNavigation
		.loadURI(onurl, 0, null, null, null)
	 }

}
}

Au clic sur le bouton, urlon se charge pour passer en contenu éditable, mais en recliquant dessus, pas de urloff (rien ne change).

[martin]

Au passage, quelqu'un saurait ce qui ne va pas dans ce qui suit :

Code : Tout sélectionner

PageHacker = {

1: function () {
	hackeron = "off";
	if(hackeron == "on") {
		hackeron = "off";
		const offurl = "javascript:document.body.contentEditable='false'; void 0"

		document
		.getElementById("content")
		.webNavigation
		.loadURI(offurl, 0, null, null, null)
	}
	
	else {
		hackeron = "on";
		const onurl = "javascript:document.body.contentEditable='true'; void 0"

		document
		.getElementById("content")
		.webNavigation
		.loadURI(onurl, 0, null, null, null)
	 }

}
}

Au clic sur le bouton, urlon se charge pour passer en contenu éditable, mais en recliquant dessus, pas de urloff (rien ne change).

Il faut que tu rendes ta variable hackeron globale, ou au moins extérieure au scope de ta fonction .
Actuellement elle est locale à ta function, donc chaque fois que tu appelles ta fonction (à chaque clic sur le bouton d'après ce que je comprend), elle est initialisée à "off".

exemple :

Code : Tout sélectionner

var pageHacker = {
    hackerOn: false,
    
    toggle: function pageHacker_toggle() {
        if (this.hackerOn) {
            this.hackerOn = false;
            // ton traitement pour désactiver
        } else {
            this.hackerOn = true;
            // ton traiement pour activer
        }
    }
};

et tu appelles pageHacker.toggle() sur ton bouton.

[nico@nc]

Génial, génial ! Je t'ai ajouté à la liste des contributeurs.

Voici donc la version 1.0 dans le bac à sable d'AMO à tester : https://addons.mozilla.org/firefox/addon/5753

(et il va falloir que je me pense sur le JS cet été !)

[martin]

Génial, génial ! Je t'ai ajouté à la liste des contributeurs.

Ma réponse n'impliquait pas forcément autant d'égards , mais c'est bien sympathique .

(et il va falloir que je me pense sur le JS cet été !)

je penche donc j'essuie
...->

[nico@nc]

Voilà déjà quelque chose de plus sérieux : Page Hacker 2.0α1

Pour la traduction, ça se passe ici : http://www.babelzilla.org/forum/index.p ... topic=3526.

[bormat]

je ne vois plus le bouton dans la version bêta ni de bar d'outil

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1