Pourquoi ce plugin Axure RP pour Chrome mérite une attention particulière ?

La création et la validation de prototypes peuvent être chronophages. Par exemple, après avoir modifié une page haute fidélité, il faut souvent exporter le prototype en HTML, le transférer sur un serveur interne et ajuster les paramètres de configuration avant que les développeurs puissent voir les interactions. Ce plugin permet de charger directement le fichier .rp ou le dossier HTML généré par Axure dans Chrome, rendant immédiatement disponible la prévisualisation complète avec toutes ses interactions.

Son avantage va au-delà de la facilité d'utilisation. Il transforme la manière dont les prototypes sont partagés et collaboratifs au sein de l'équipe : les producteurs peuvent inclure des liens interactifs dans leurs documents, les designers peuvent tester les modifications sans intervention des développeurs, et les testeurs peuvent vérifier les comportements attendus sans effort supplémentaire.

Pourquoi choisir un chargement hors ligne avec vérification d'intégrité plutôt qu'un service en ligne ?

Un service web pourrait sembler une solution évidente, mais il soulève des problèmes tels que la maintainance des versions, la complexité pour les utilisateurs et les contraintes de sécurité. Ce plugin adopte donc une approche basée sur l'extension Chrome, qui charge les ficheirs localement sans nécessiter de serveur.

• Chargement sans contact: Lorsqu'un dossier de projet Axure est déposé dans Chrome, l'extension capture l'événement et convertit le chemin du fichier en une URL sécurisée.
• Environnement d'exécution déterministe: Un moteur de bac à sable est utilisé pour éviter les erreurs de rendu causées par les différences de version de Chrome.
• Vérification de l'intégrité: Les fichiers de contrôle de hachage garantissent que les ressources n'ont pas été altérées.

Analyse des fichiers clés et conseils pratiques

background.html: le cerveau de l'extension

Ce fichier, bien que simple, joue un rôle crucial en gérant les événements globaux, la persistance de l'état et la coordination entre les modules.

<html>
<head><meta charset="utf-8"></head>
<body>
  <script src="chrome-state-manager.js"></script>
  <script src="axurerp_extension.js"></script>
</body>
</html>

Il agit comme un processus de surveillance permanent, répondant aux messages des autres scripts et assurant la cohérence de l'état entre les différentes pages.

chrome-state-manager.js: gestion de l'état pour plusieurs onglets

Ce fichier assure que chaque onglet conserve son propre état indépendamment des autres.

class GestionnaireEtats {
  constructor() {
    this.cacheMemoire = new Map(); // Cache en mémoire, clé est tabId
    this.initialiserStockage(); // Chargement initial depuis chrome.storage
  }

  // Récupération de l'état d'un onglet, priorité au cache
  async obtenir(tabId) {
    if (this.cacheMemoire.has(tabId)) return this.cacheMemoire.get(tabId);
    const donnees = await chrome.storage.local.get(`etat_${tabId}`);
    return donnees[`etat_${tabId}`] || this.etatParDefaut();
  }

  // Définition de l'état, mise à jour du cache et du stockage
  async definir(tabId, etat) {
    this.cacheMemoire.set(tabId, etat);
    await chrome.storage.local.set({ [`etat_${tabId}`]: etat });
    chrome.tabs.query({}, onglets => {
      onglets.forEach(onglet => {
        if (onglet.id !== tabId) {
          chrome.tabs.sendMessage(onglet.id, { 
            action: "synchroniserEtat", 
            payload: { tabId, etat } 
          });
        }
      });
    });
  }
}

axurerp_extension.js: traducteur des interactions Axure

Ce script adapte les fonctions JavaScript générées par Axure pour qu'elles fonctionnent dans le bac à sable de l'extension.

window.definirVariableGlobale = function(nom, valeur) {
  chrome.runtime.sendMessage({
    action: "mettreAJourVarGlobale",
    nom: nom,
    valeur: valeur,
    tabId: chrome.devtools.inspectedWindow.tabId
  }, reponse => {
    if (reponse.reussi) {
      console.log(`Variable globale ${nom} définie à ${valeur}`);
    }
  });
};

Cela permet de synchroniser les variables entre les différents onglets et de maintenir la cohérence des interactions.

manifest.json: déclaration des permissions

Ce fichier définit ce que l'extension peut faire et ne peut pas faire.

{
  "manifest_version": 3,
  "nom": "Prévisualisation Axure RP",
  "version": "0.6.3.0",
  "permissions": ["storage", "runtime"],
  "host_permissions": ["<tous_urls>"],
  "scripts_contenus": [{
    "correspondances": ["<tous_urls>"],
    "js": ["axurerp_extension.js"],
    "execution_a": "document_start",
    "toutes_fenetres": true
  }],
  "ressources_accessibles_web": [{
    "ressources": ["vue_previsualisation.html", "axurerp-*.png"],
    "correspondances": ["<tous_urls>"]
  }]
}

Il est essentiel pour la sécurité et le bon fonctionnement de l'extension.

verified_contents.json et computed_hashes.json: vérification d'intégrité

Ces fichiers garantissent que les ressources de l'extension n'ont pas été modifiées.

async function verifierIntegrite() {
  const verifie = await fetch(chrome.runtime.getURL('verified_contents.json')).then(r => r.json());
  const calcule = await calculerTousLesHachages(); // Fonction personnalisée pour calculer les hachages
  for (const fichier in verifie.fichiers) {
    if (calcule[fichier] !== verifie.fichiers[fichier].hachage) {
      throw new Error(`Fichier ${fichier} corrompu: attendu ${verifie.fichiers[fichier].hachage}, obtenu ${calcule[fichier]}`);
    }
  }
}

Ils protègent contre les modifications malveillantes ou accidentelles.

Processus complet : de la téléchargement à l'utilisation quotidienne

Téléchargement et décompression

Téléchargez le plugin à partir d'une source officielle et décompressez-le en veillant à utiliser un outil de décompression compatible UTF-8.

Chargement dans Chrome

Activez le mode développeur dans les paramètres des extensions Chrome et chargez le dossier décompressé.

Prévisualisation du prototype

Faites glisser le dossier du prototype dans un onglet Chrome pour le charger et le visualiser.

Techniques d'utilisation quotidienne

Utilisez les raccourcis clavier pour accéder rapidement aux fonctionnalités de l'extension.

Résolution des problèmes courants et astuces de dépannage

Liste rapide des problèmes

Exemple détaillé : résolution d'un problème de police

Un client a signalé que les polices chinoises ne s'affichaient pas correctement. Après investigation, nous avons découvert que le répertoire polices/ n'était pas déclaré dans manifest.json. Une fois ce problème résolu, les polices s'affichaient correctement.

Optimisation des performances pour des prototypes volumineux

Des techniques telles que la suppression des ressources inutiles, la compression des images et le chargement incrémental peuvent grandement améliorer les performances.

Étape 1 : Suppression des ressources inutiles

Supprimez les dossiers inutiles comme lib/ qui contiennent des bibliothèques redondantes.

Étape 2 : Compression des images

Utilisez des outils comme ImageOptim pour réduire la taille des images sans perte de qualité.

Étape 3 : Chargement incrémental

Chargez uniquement les ressources nécessaires lors du défilement de la page.

window.addEventListener('scroll', debonder(() => {
  const pagesVisibles = obtenirPagesVisibles(); // Fonction personnalisée
  prechargerPages([...pagesVisibles, ...obtenirPagesAdjacentes(pagesVisibles)]);
}, 200));

Extension avancée et intégration à l'équipe

Équipe petite (<10 personnes)

Utilisez des liens de prévisualisation au lieu de captures d'écran pour faciliter la collaboration.

Équipe moyenne (10-50 personnes)

Intégrez le plugin avec des outils comme Jira et Confluence pour une meilleure gestion des prototypes.

Organisation large (>50 personnes)

Créez un centre de prototypes centralisé avec des contrôles stricts de sécurité et de conformité.