ADDED   gc_lang/fr/webext/gce_worker.js
Index: gc_lang/fr/webext/gce_worker.js
==================================================================
--- /dev/null
+++ gc_lang/fr/webext/gce_worker.js
@@ -0,0 +1,120 @@
+// Background script
+// for calling the grammar checker engine
+
+
+let gce = null; // module: grammar checker engine
+let text = null;
+let tkz = null; // module: tokenizer
+let lxg = null; // module: lexicographer
+let helpers = null;
+
+let oTokenizer = null;
+let oDict = null;
+let oLxg = null;
+
+function loadGrammarChecker (sGCOptions="", sContext="JavaScript") {
+    if (gce === null) {
+        try {
+            gce = require("resource://grammalecte/fr/gc_engine.js");
+            helpers = require("resource://grammalecte/helpers.js");
+            text = require("resource://grammalecte/text.js");
+            tkz = require("resource://grammalecte/tokenizer.js");
+            lxg = require("resource://grammalecte/fr/lexicographe.js");
+            oTokenizer = new tkz.Tokenizer("fr");
+            helpers.setLogOutput(console.log);
+            gce.load(sContext);
+            oDict = gce.getDictionary();
+            oLxg = new lxg.Lexicographe(oDict);
+            if (sGCOptions !== "") {
+                gce.setOptions(helpers.objectToMap(JSON.parse(sGCOptions)));
+            }
+            // we always retrieve options from the gce, for setOptions filters obsolete options
+            return gce.getOptions()._toString();
+        }
+        catch (e) {
+            console.log("# Error: " + e.fileName + "\n" + e.name + "\nline: " + e.lineNumber + "\n" + e.message);
+        }
+    }
+}
+
+function parse (sText, sLang, bDebug, bContext) {
+    let aGrammErr = gce.parse(sText, sLang, bDebug, bContext);
+    return JSON.stringify(aGrammErr);
+}
+
+function parseAndSpellcheck (sText, sLang, bDebug, bContext) {
+    let aGrammErr = gce.parse(sText, sLang, bDebug, bContext);
+    let aSpellErr = oTokenizer.getSpellingErrors(sText, oDict);
+    return JSON.stringify({ aGrammErr: aGrammErr, aSpellErr: aSpellErr });
+}
+
+function getOptions () {
+    return gce.getOptions()._toString();
+}
+
+function getDefaultOptions () {
+    return gce.getDefaultOptions()._toString();
+}
+
+function setOptions (sGCOptions) {
+    gce.setOptions(helpers.objectToMap(JSON.parse(sGCOptions)));
+    return gce.getOptions()._toString();
+}
+
+function setOption (sOptName, bValue) {
+    gce.setOptions(new Map([ [sOptName, bValue] ]));
+    return gce.getOptions()._toString();
+}
+
+function resetOptions () {
+    gce.resetOptions();
+    return gce.getOptions()._toString();
+}
+
+function fullTests (sGCOptions="") {
+    if (!gce || !oDict) {
+        return "# Error: grammar checker or dictionary not loaded."
+    }
+    let dMemoOptions = gce.getOptions();
+    if (sGCOptions) {
+        gce.setOptions(helpers.objectToMap(JSON.parse(sGCOptions)));
+    }
+    let tests = require("resource://grammalecte/tests.js");
+    let oTest = new tests.TestGrammarChecking(gce);
+    let sAllRes = "";
+    for (let sRes of oTest.testParse()) {
+        dump(sRes+"\n");
+        sAllRes += sRes+"\n";
+    }
+    gce.setOptions(dMemoOptions);
+    return sAllRes;
+}
+
+
+// Lexicographer
+
+function getListOfElements (sText) {
+    try {
+        let aElem = [];
+        let aRes = null;
+        for (let oToken of oTokenizer.genTokens(sText)) {
+            aRes = oLxg.getInfoForToken(oToken);
+            if (aRes) {
+                aElem.push(aRes);
+            }
+        }
+        return JSON.stringify(aElem);
+    }
+    catch (e) {
+        helpers.logerror(e);
+    }
+    return JSON.stringify([]);
+}
+
+
+function handleMessage (oRequest, xSender, sendResponse) {
+  console.log(`content script sent a message: ${oRequest.content}`);
+  sendResponse({response: "response from background script"});
+}
+
+browser.runtime.onMessage.addListener(handleMessage);

Index: gc_lang/fr/webext/manifest.json
==================================================================
--- gc_lang/fr/webext/manifest.json
+++ gc_lang/fr/webext/manifest.json
@@ -27,10 +27,13 @@
     "default_icon": "img/logo-32.png",
     "default_popup": "panel/main.html",
     "default_title": "Grammalecte [fr]",
     "browser_style": false
   },
+  "background": {
+    "scripts": ["gce_worker.js"]
+  },
   "web_accessible_resources": [
     "beasts/frog.jpg",
     "beasts/turtle.jpg",
     "beasts/snake.jpg"
   ],

Index: gc_lang/fr/webext/panel/main.css
==================================================================
--- gc_lang/fr/webext/panel/main.css
+++ gc_lang/fr/webext/panel/main.css
@@ -2,37 +2,17 @@
     flexbox:
     https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 */
 
 
-/* Cleaner */
+/* reset */
 
 * { margin: 0; padding: 0; }
 img { border: none; }
 
 
-/* Generic classes */
-
-.fleft { float: left; }
-.fright { float: right; }
-.fleftm { float: left; margin-right: 10px; }
-.frightm { float: right; margin-left: 10px; }
-.clearer { clear: both; font-size: 0; height: 0; }
-.center { text-align: center; }
-
-
-a:link, a:visited {
-    color: hsl(210, 70%, 40%);
-    /*text-decoration: none;*/
-}
-a:hover, a:active {
-    text-shadow: 0 0 2px hsl(210, 80%, 60%);
-}
-
-a.extlink:hover:after {
-    content: " >";
-}
+/* Selection */
 
 ::-moz-selection {
     background-color: hsl(210, 50%, 60%);
     color: hsl(210, 20%, 100%);
     text-shadow: 0 0 2px hsl(210, 80%, 20%);
@@ -43,22 +23,60 @@
     color: hsl(210, 20%, 100%);
     text-shadow: 0 0 2px hsl(210, 80%, 20%);
     border-radius: 2px;
 }
 
+
+/* Generic classes */
+
+.fleft { float: left; }
+.fright { float: right; }
+
+.center { text-align: center; }
+.right { text-align: right; }
+.left { text-align: left; }
+.justify { text-align: justify; }
+
+.hidden { display: none; }
+.clearer { clear: both; font-size: 0; height: 0; }
+
+.red {          background-color: hsl(0, 50%, 50%);   color: hsl(0, 0%, 96%); }
+.red:hover {    background-color: hsl(0, 60%, 40%);   color: hsl(0, 0%, 100%); }
+.cyan {         background-color: hsl(180, 50%, 50%); color: hsl(0, 0%, 96%); }
+.cyan:hover {   background-color: hsl(180, 60%, 40%); color: hsl(0, 0%, 100%); }
+.green {        background-color: hsl(120, 50%, 40%); color: hsl(120, 10%, 96%); }
+.green:hover {  background-color: hsl(120, 60%, 30%); color: hsl(120, 10%, 96%); }
+.blue {         background-color: hsl(210, 50%, 50%); color: hsl(210, 10%, 96%); }
+.blue:hover {   background-color: hsl(210, 60%, 40%); color: hsl(210, 10%, 96%); }
+
+
+/* links */
+
+a:link, a:visited {
+    color: hsl(210, 70%, 40%);
+    /*text-decoration: none;*/
+}
+a:hover, a:active {
+    text-shadow: 0 0 2px hsl(210, 80%, 60%);
+}
+
+a.extlink:hover:after {
+    content: " >";
+}
+
 
 /* Main classes */
 
 html {
     box-sizing: border-box;
     width: 530px;
-    height: 600px;
+    height: 880px;
     font-family: "Trebuchet MS", "Liberation Sans", sans-serif;
 }
 body {
     width: 530px;
-    height: 600px;
+    height: 880px;
 }
 
 #main {
     display: flex;
     flex-direction: row;
@@ -65,26 +83,375 @@
     flex-wrap: nowrap;
     align-items: stretch;
     background-color: hsl(210, 0%, 100%);
     min-height: 100%;
 }
+
 #left {
-    width: 30px;
-    padding: 20px;
+    width: 54px;
     background-color: hsl(210, 10%, 96%);
     border-right: solid 1px hsl(210, 0%, 70%);
     color: hsl(210, 10%, 96%);
 }
+#logo {
+  padding: 10px;
+}
+#left li {
+  padding: 10px 5px;
+  border-bottom: 1px solid hsl(210, 10%, 90%);
+  text-align: center;
+  cursor: pointer;
+  color: hsl(210, 10%, 50%);
+  list-style-type: none;
+}
+#left li:hover {
+  background-color: hsl(210, 10%, 92%);
+
+}
 
 #page {
     background-color: hsl(210, 0%, 100%);
-    padding: 10px;
 }
-
+#page h1 {
+    margin: 0 0 10px 0;
+    color: hsl(210, 70%, 70%);
+    font: bold 30px 'Yanone Kaffeesatz', "Liberation Sans Narrow", sans-serif;
+}
 #page p {
     margin: 10px 0 5px 0;
 }
-#page h2 {
-    margin: 20px 0 10px 0;
-    color: hsl(210, 70%, 70%);
-    font: bold 42px 'Yanone Kaffeesatz', "Liberation Sans Narrow", sans-serif;
+
+#home_page {
+  display: block;
+  padding: 20px;
+}
+
+#tf_page {
+  display: none;
+  padding: 20px;
+}
+#gc_page {
+  display: none;
+  padding: 20px 20px 30px 20px;
+}
+#gc_options_page {
+  display: none;
+  padding: 20px;
+}
+#sc_options_page {
+  display: none;
+  padding: 20px;
+}
+#lxg_page {
+  display: none;
+  padding: 20px;
+}
+
+
+/*
+  Conjugueur page
+*/
+
+#conj_page {
+  display: none;
+  padding: 10px;
+}
+
+#conj_page h2 {
+    margin: 5px 0 2px 0;
+    color: hsl(210, 50%, 50%);
+    font: bold 30px Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
+}
+#conj_page h3 {
+    margin: 5px 0 2px 0;
+    color: hsl(0, 50%, 50%);
+    font: bold 16px Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
+}
+#conj_page h4 {
+    margin: 5px 0 2px 0;
+    color: hsl(210, 50%, 50%);
+    font: bold 14px Tahoma, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
+}
+
+#conj_page .colonne {
+    float: left;
+    width: 240px;
+}
+#conj_page .colsep {
+    float: left;
+    width: 20px;
+}
+
+#conj_page .colonne p {
+    font-size: 12px;
+}
+
+
+#conj_page input#verb {
+    display: inline-block;
+    width: 230px;
+    margin-left: 5px;
+    padding: 5px 10px;
+    border: 2px solid hsl(0, 0%, 80%);
+    border-radius: 3px;
+    height: 24px;
+    background: transparent;
+    font: normal 20px Tahoma, "Ubuntu Condensed";
+    color: hsl(0, 0%, 30%);
+}
+#conj_page input[placeholder]#verb {
+    color: hsl(0, 0%, 70%);
+}
+
+#conj_page a#conjugate {
+    display: inline-block;
+    padding: 7px 10px;
+    font-size: 20px;
+    background-color: hsl(0, 30%, 30%);
+    color: hsl(0, 30%, 60%);
+    border-radius: 3px;
+    text-transform: uppercase;
+    text-align: center;
+    text-decoration: none;
+}
+#conj_page a#conjugate:hover {
+    background-color: hsl(0, 60%, 40%);
+    color: hsl(0, 60%, 70%);
+    box-shadow: 0 0 2px hsl(0, 60%, 50%);
+}
+
+#conj_options {
+    margin: 10px 5px 0 5px;
+    font-size: 16px;
+    text-align: center;
+}
+
+#conj_smallnote {
+    float: right;
+    width: 190px;
+    margin: 15px 0 0 0;
+    padding: 0 5px;
+    font-size: 8.5px;
+    color: hsl(0, 0%, 60%);
+    text-align: center;
+}
+
+
+/*
+  Test page
+*/
+
+#test_page {
+  display: none;
+}
+#test_cmd {
+    padding: 15px;
+    background-color: hsl(0, 0%, 92%);
+    border-bottom: 1px solid hsl(0, 0%, 86%);
+}
+#test_cmd textarea {
+    width: 100%;
+    border: 2px solid hsl(0, 0%, 89%);
+    border-radius: 3px;
+    resize: vertical;
+}
+
+#test_results {
+    padding: 15px;
+    background-color: hsl(0, 0%, 96%);
+}
+
+#test_page .button {
+    display: inline-block;
+    padding: 5px 10px;
+    width: 120px;
+    border-radius: 3px;
+    font-size: 12px;
+    text-align: center;
+    cursor: pointer;
+}
+
+
+/*
+  Text formatter
+*/
+
+#tf_options {
+    
+}
+
+#tf_options fieldset {
+    margin: 5px 0;
+    padding: 5px 10px 10px 10px;
+    background-color: hsl(0, 0%, 92%);
+    border-radius: 3px;
+}
+
+#tf_options legend {
+    font-size: 20px;
+    color: hsla(210, 20%, 50%, .8);
+    font-weight: bold;
+}
+#tf_options legend span {
+    display: none;
+}
+
+#tf_options fieldset h2 {
+    color: hsl(210, 80%, 40%);
+}
+
+#tf_options fieldset .blockopt {
+    padding: 2px 3px;
+    font-size: 12.5px;
+}
+#tf_options fieldset .underline:hover {
+    background-color: hsl(180, 10%, 86%);
+    border-radius: 2px;
+}
+
+#tf_options fieldset .option {
+    margin: 1px 3px 0 0;
+    float: left;
+}
+#tf_options legend .option {
+    margin: 7px 5px 0 3px;
+    float: left;
+}
+
+#tf_options fieldset .opt_lbl {
+    display: inline-block;
+    color: hsl(0, 0%, 20%);
+}
+
+
+#tf_options fieldset .largew {
+    width: 300px;
+}
+#tf_options fieldset .reducedw {
+    width: 200px;
+}
+#tf_options fieldset .smallw {
+    width: 90px;
+}
+
+#tf_options fieldset .secondoption {
+    display: inline-block;
+}
+
+#tf_options fieldset label span {
+    display: none;
+}
+
+#tf_options .groupblock {
+    opacity: 0.3;
+}
+
+#tf_options .inlineblock {
+    display: inline-block;
+}
+#tf_options .indent {
+    margin-left: 15px;
+}
+
+#tf_actions {
+    background-color: hsl(120, 10%, 92%);
+    padding: 15px;
+    border-top: 1px solid hsl(120, 20%, 86%);
+}
+
+#tf_options .button {
+    display: inline-block;
+    padding: 5px 10px;
+    width: 100px;
+    border-radius: 3px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    cursor: pointer;
+}
+
+#tf_progressbarbox {
+    display: inline-block;
+    padding: 10px 20px;
+}
+
+
+/* 
+  Other elements
+*/
+
+#movewindow {
+    position: fixed;
+    right: 0;
+    top: 50;
+    width: 16px;
+    margin-top: 60px;
+    z-index: 100;
+}
+#movewindow .arrow {
+    background-color: hsl(180, 60%, 50%);
+    cursor: pointer;
+    padding: 1px 3px;
+    font-size: 10px;
+    font-weight: bold;
+    text-align: center;
+    color: hsl(180, 50%, 90%);
+}
+#movewindow .arrow:hover {
+    background-color: hsl(180, 70%, 40%);
+    cursor: hsl(180, 50%, 96%);
+}
+
+#rightcorner {
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+a.rightcornerbutton1 {
+    float: right;
+    padding: 2px 10px 5px 10px;
+    border-radius: 0 0 0 3px;
+    font-size: 18px;
+    text-decoration: none;
+}
+a.rightcornerbutton {
+    float: right;
+    padding: 2px 10px 5px 10px;
+    font-size: 18px;
+    text-decoration: none;
+}
+
+
+/*
+    CSS Spinner
+    Double bounce
+    http://tobiasahlin.com/spinkit/
+*/
+.spinner {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    top: 2px;
+    right: 120px;
+}
+.double-bounce1, .double-bounce2 {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: hsl(180, 50%, 75%);
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: sk-bounce 2.0s infinite ease-in-out;
+}
+.double-bounce2 {
+    animation-delay: -1.0s;
+}
+
+@keyframes sk-bounce {
+    0%, 100% { 
+        transform: scale(0.0);
+    } 50% { 
+        transform: scale(1.0);
+    }
 }

Index: gc_lang/fr/webext/panel/main.html
==================================================================
--- gc_lang/fr/webext/panel/main.html
+++ gc_lang/fr/webext/panel/main.html
@@ -9,31 +9,484 @@
   <body>
     <div id="main">
 
       <header id="left">
         <nav id="menu">
-          <header id="title">
+          <header id="logo">
             <img src="../img/logo-32.png">
           </header>
           <ul>
-            <li><a href="#home" onclick="loadHtml('home');"><i class="fa fa-home icon"></i> 1.</a></li>
-            <li><a href="#conj" onclick="loadHtml('conj');"><i class="fa fa-star icon"></i> CJ</a></li>
-            <li><a href="#tf" onclick="loadHtml('tf');"><i class="fa fa-photo icon"></i> TF</a></li>
-            <li><a href="#cg" onclick="loadHtml('cg');"><i class="fa fa-question-circle icon"></i> CG</a></li>
-            <li><a href="#op1" onclick="loadHtml('op1');"><i class="fa fa-coffee icon"></i> OP1</a></li>
-            <li><a href="#op2" onclick="loadHtml('op2');"><i class="fa fa-keyboard-o icon"></i> OP2</a></li>
-            <li><a href="#lxg" onclick="loadHtml('lxg');"><i class="fa fa-keyboard-o icon"></i> LXG</a></li>
-            <li><a href="#tests" onclick="loadHtml('lxg');"><i class="fa fa-keyboard-o icon"></i> TST</a></li>
+            <li class="select" data-page="home_page"><i class="fa fa-home icon"></i> 1.</li>
+            <li class="select" data-page="conj_page"><i class="fa fa-star icon"></i> CJ</li>
+            <li class="select" data-page="tf_page"><i class="fa fa-photo icon"></i> TF</li>
+            <li class="select" data-page="gc_page"><i class="fa fa-question-circle icon"></i> CG</li>
+            <li class="select" data-page="gc_options_page"><i class="fa fa-coffee icon"></i> OP1</li>
+            <li class="select" data-page="sc_options_page"><i class="fa fa-keyboard-o icon"></i> OP2</li>
+            <li class="select" data-page="lxg_page"><i class="fa fa-keyboard-o icon"></i> LXG</li>
+            <li class="select" data-page="test_page"><i class="fa fa-keyboard-o icon"></i> TST</li>
           </ul>
         </nav>
       </header> <!-- #left -->
 
+      <div id="movewindow">
+        <div id="resize_h_bigger" class="arrow" style="border-radius: 2px 0 0 0">↓</div>
+        <div id="resize_h_smaller" class="arrow">↑</div>
+        <div id="resize_w_bigger" class="arrow">←</div>
+        <div id="resize_w_smaller" class="arrow" style="border-radius: 0 0 0 2px">→</div>
+      </div>
 
       <div id="page">
-        <article id="loadedpage">
-          <!-- here goes the page loaded via JS -->
-        </article>
+
+        <section id="home_page" class="page">
+          <h1>GRAMMALECTE</h1>
+        </section>
+
+        <section id="gc_page" class="page">
+          <h1>CORRECTEUR GRAMMATICAL</h1>
+          <div id="paragraphs_list"></div>
+        </section>
+
+        <section id="gc_options_page" class="page">
+          <h1>OPTIONS GRAMMATICALES</h1>
+        </section>
+
+        <section id="sc_options_page" class="page">
+          <h1>OPTIONS ORTHOGRAPHIQUES</h1>
+        </section>
+
+        <section id="lxg_page" class="page">
+          <h1>LEXICOGRAPHE</h1>
+          <div id="tokens_list"></div>
+        </section>
+
+        <section id="test_page" class="page">
+          <div id="test_cmd">
+            <h1>TESTS</h1>
+            <textarea id="text" rows="10"></textarea>
+            <div id="testall" class="button blue">Tests complets</div> <div id="parse" class="button green fright">Analyser</div>
+          </div>
+          <div id="test_results">
+          </div>
+        </section>
+
+        <section id="conj_page" class="page">
+          <h1>CONJUGUEUR</h1>
+          <p class="right" style="margin: 10px 30px 0 0">
+            <input type="text" id="verb" name="verb" maxlength="40" value="" placeholder="entrez un verbe" autofocus />
+            <a id="conjugate" href="#" onclick="return false;">Conjuguer</a>
+          <p>
+
+          <div class="clearer"></div>
+
+          <p id="conj_smallnote" hidden>Ce verbe n’a pas encore été vérifié. C’est pourquoi les options “pronominal” et “temps composés” sont désactivées.</p>
+          <p id="conj_options">
+            <label for="oneg">Négation</label> <input type="checkbox" id="oneg" name="oneg" value="ON"  /> 
+            · <label id="opro_lbl" for="opro">Pronominal</label> <input type="checkbox" id="opro" name="opro" value="ON"  />
+            · <label for="ofem">Féminin</label> <input type="checkbox" id="ofem" name="ofem" value="ON"  />
+            <br/> <label for="oint">Interrogatif</label> <input type="checkbox" id="oint" name="oint" value="ON"  />
+            · <label id="otco_lbl" for="otco">Temps composés</label> <input type="checkbox" id="otco" name="otco" value="ON"  />
+          </p>
+
+          <h2 id="verb_title" class="center">&nbsp;</h2>
+          <p id="info" class="center">&nbsp;</p>
+
+          <!-- section 1 -->
+          <div class="colonne">
+            <div id="infinitif" class="box">
+              <h3 id="infinitif_title">Infinitif</h3>
+              <p id="infi">&nbsp;</p>
+            </div>
+            <div id="imperatif" class="box">
+              <h3 id="imperatif_title">Impératif</h3>
+              <h4 id="impe_temps">Présent</h4>
+              <p id="impe1">&nbsp;</p>
+              <p id="impe2">&nbsp;</p>
+              <p id="impe3">&nbsp;</p>
+            </div>
+          </div>
+          
+          <div class="colsep">&nbsp;</div>
+          
+          <div class="colonne">
+            <div id="partpre" class="box">
+              <h3 id="partpre_title">Participe présent</h3>
+              <p id="ppre">&nbsp;</p>
+            </div>
+            <div id="partpas" class="box">
+              <h3 id="partpas_title">Participes passés</h3>
+              <p id="ppas1">&nbsp;</p>
+              <p id="ppas2">&nbsp;</p>
+              <p id="ppas3">&nbsp;</p>
+              <p id="ppas4">&nbsp;</p>
+            </div>
+          </div>
+
+          <div class="clearer"></div>
+
+          <!-- section 2 -->
+          <div class="colonne">
+            <div id="indicatif" class="box">
+              <h3 id="indicatif_title">Indicatif</h3>
+              <div id="ipre">
+                <h4 id="ipre_temps">Présent</h4>
+                <p id="ipre1">&nbsp;</p>
+                <p id="ipre2">&nbsp;</p>
+                <p id="ipre3">&nbsp;</p>
+                <p id="ipre4">&nbsp;</p>
+                <p id="ipre5">&nbsp;</p>
+                <p id="ipre6">&nbsp;</p>
+              </div>
+              <div id="iimp">
+                <h4 id="iimp_temps">Imparfait</h4>
+                <p id="iimp1">&nbsp;</p>
+                <p id="iimp2">&nbsp;</p>
+                <p id="iimp3">&nbsp;</p>
+                <p id="iimp4">&nbsp;</p>
+                <p id="iimp5">&nbsp;</p>
+                <p id="iimp6">&nbsp;</p>
+              </div>
+              <div id="ipsi">
+                <h4 id="ipsi_temps">Passé simple</h4>
+                <p id="ipsi1">&nbsp;</p>
+                <p id="ipsi2">&nbsp;</p>
+                <p id="ipsi3">&nbsp;</p>
+                <p id="ipsi4">&nbsp;</p>
+                <p id="ipsi5">&nbsp;</p>
+                <p id="ipsi6">&nbsp;</p>
+              </div>
+              <div id="ifut">
+                <h4 id="ifut_temps">Futur</h4>
+                <p id="ifut1">&nbsp;</p>
+                <p id="ifut2">&nbsp;</p>
+                <p id="ifut3">&nbsp;</p>
+                <p id="ifut4">&nbsp;</p>
+                <p id="ifut5">&nbsp;</p>
+                <p id="ifut6">&nbsp;</p>
+              </div>
+            </div>
+          </div>
+          
+          <div class="colsep">&nbsp;</div>
+          
+          <div class="colonne">
+            <div id="subjonctif" class="box">
+              <h3 id="subjontif_title">Subjonctif</h3>
+              <div id="spre">
+                <h4 id="spre_temps">Présent</h4>
+                <p id="spre1">&nbsp;</p>
+                <p id="spre2">&nbsp;</p>
+                <p id="spre3">&nbsp;</p>
+                <p id="spre4">&nbsp;</p>
+                <p id="spre5">&nbsp;</p>
+                <p id="spre6">&nbsp;</p>
+              </div>
+              <div id="simp">
+                <h4 id="simp_temps">Imparfait</h4>
+                <p id="simp1">&nbsp;</p>
+                <p id="simp2">&nbsp;</p>
+                <p id="simp3">&nbsp;</p>
+                <p id="simp4">&nbsp;</p>
+                <p id="simp5">&nbsp;</p>
+                <p id="simp6">&nbsp;</p>
+              </div>
+            </div>
+            <div id="conditionnel" class="box">
+              <h3 id="conditionnel_title">Conditionnel</h3>
+              <div id="conda">
+                <h4 id="conda_temps">Présent</h4>
+                <p id="conda1">&nbsp;</p>
+                <p id="conda2">&nbsp;</p>
+                <p id="conda3">&nbsp;</p>
+                <p id="conda4">&nbsp;</p>
+                <p id="conda5">&nbsp;</p>
+                <p id="conda6">&nbsp;</p>
+              </div>
+              <div id="condb">
+                <h4 id="condb_temps">&nbsp;</h4>
+                <p id="condb1">&nbsp;</p>
+                <p id="condb2">&nbsp;</p>
+                <p id="condb3">&nbsp;</p>
+                <p id="condb4">&nbsp;</p>
+                <p id="condb5">&nbsp;</p>
+                <p id="condb6">&nbsp;</p>
+              </div>
+            </div>
+          </div>
+
+          <div class="clearer"></div>
+        </section> <!-- conjugueur -->
+
+        <section id="tf_page" class="page">
+          <h1>FORMATEUR DE TEXTE</h1>
+          <div id="tf_options">
+
+            <!-- Supernumerary spaces -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_ssp" class="option" data-default="true" /><label for="o_group_ssp" data-l10n-en="tf_ssp">${tf_ssp}</label></legend>
+              <div id="group_ssp" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_start_of_paragraph" class="result fright"></div>
+                  <input type="checkbox" id="o_start_of_paragraph" class="option" data-default="true" />
+                  <label for="o_start_of_paragraph" class="opt_lbl largew" data-l10n-en="tf_start_of_paragraph">${tf_start_of_paragraph}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_end_of_paragraph" class="result fright"></div>
+                  <input type="checkbox" id="o_end_of_paragraph" class="option" data-default="true" />
+                  <label for="o_end_of_paragraph" class="opt_lbl largew" data-l10n-en="tf_end_of_paragraph">${tf_end_of_paragraph}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_between_words" class="result fright"></div>
+                  <input type="checkbox" id="o_between_words" class="option" data-default="true" />
+                  <label for="o_between_words" class="opt_lbl largew" data-l10n-en="tf_between_words">${tf_between_words}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_before_punctuation" class="result fright"></div>
+                  <input type="checkbox" id="o_before_punctuation" class="option" data-default="true" />
+                  <label for="o_before_punctuation" class="opt_lbl largew" data-l10n-en="tf_before_punctuation">${tf_before_punctuation}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_within_parenthesis" class="result fright"></div>
+                  <input type="checkbox" id="o_within_parenthesis" class="option" data-default="true" />
+                  <label for="o_within_parenthesis" class="opt_lbl largew" data-l10n-en="tf_within_parenthesis">${tf_within_parenthesis}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_within_square_brackets" class="result fright"></div>
+                  <input type="checkbox" id="o_within_square_brackets" class="option" data-default="true" />
+                  <label for="o_within_square_brackets" class="opt_lbl largew" data-l10n-en="tf_within_square_brackets">${tf_within_square_brackets}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_within_quotation_marks" class="result fright"></div>
+                  <input type="checkbox" id="o_within_quotation_marks" class="option" data-default="true" />
+                  <label for="o_within_quotation_marks" class="opt_lbl largew" data-l10n-en="tf_within_quotation_marks">${tf_within_quotation_marks}</label>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Missing spaces -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_space" class="option" data-default="true" /><label for="o_group_space" data-l10n-en="tf_space">${tf_space}</label></legend>
+              <div id="group_space" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_add_space_after_punctuation" class="result fright"></div>
+                  <input type="checkbox" id="o_add_space_after_punctuation" class="option" data-default="true" />
+                  <label for="o_add_space_after_punctuation" class="opt_lbl reducedw" data-l10n-en="tf_add_space_after_punctuation">${tf_add_space_after_punctuation}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_add_space_around_hyphens" class="result fright"></div>
+                  <input type="checkbox" id="o_add_space_around_hyphens" class="option" data-default="true" />
+                  <label for="o_add_space_around_hyphens" class="opt_lbl largew" data-l10n-en="tf_add_space_around_hyphens">${tf_add_space_around_hyphens}</label>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Non breaking spaces -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_nbsp" class="option" data-default="true" /><label for="o_group_nbsp" data-l10n-en="tf_nbsp">${tf_nbsp}</label></legend>
+              <div id="group_nbsp" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_nbsp_before_punctuation" class="result fright"></div>
+                  <input type="checkbox" id="o_nbsp_before_punctuation" class="option" data-default="true" />
+                  <label for="o_nbsp_before_punctuation" class="opt_lbl reducedw" data-l10n-en="tf_nbsp_before_punctuation">${tf_nbsp_before_punctuation}</label>
+                  <!--<div class="secondoption">
+                      <input type="checkbox" id="o_nnbsp_before_punctuation" class="option" />
+                      <label for="o_nnbsp_before_punctuation" class="opt_lbl smallw">fines<span>sauf avec “:”</span></label>
+                  </div>-->
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_nbsp_within_quotation_marks" class="result fright"></div>
+                  <input type="checkbox" id="o_nbsp_within_quotation_marks" class="option" data-default="true" />
+                  <label for="o_nbsp_within_quotation_marks" class="opt_lbl reducedw" data-l10n-en="tf_nbsp_within_quotation_marks">${tf_nbsp_within_quotation_marks}</label>
+                  <!--<div class="secondoption">
+                      <input type="checkbox" id="o_nnbsp_within_quotation_marks" class="option" />
+                      <label for="o_nnbsp_within_quotation_marks" class="opt_lbl smallw">fines</label>
+                  </div>-->
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_nbsp_before_symbol" class="result fright"></div>
+                  <input type="checkbox" id="o_nbsp_before_symbol" class="option" data-default="true" />
+                  <label for="o_nbsp_before_symbol" class="opt_lbl largew" data-l10n-en="tf_nbsp_before_symbol">${tf_nbsp_before_symbol}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_nbsp_within_numbers" class="result fright"></div>
+                  <input type="checkbox" id="o_nbsp_within_numbers" class="option" data-default="true" />
+                  <label for="o_nbsp_within_numbers" class="opt_lbl reducedw" data-l10n-en="tf_nbsp_within_numbers">${tf_nbsp_within_numbers}</label>
+                  <!--<div class="secondoption">
+                      <input type="checkbox" id="o_nnbsp_within_numbers" class="option" />
+                      <label for="o_nnbsp_within_numbers" class="opt_lbl smallw">fines</label>
+                  </div>-->
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_nbsp_before_units" class="result fright"></div>
+                  <input type="checkbox" id="o_nbsp_before_units" class="option" data-default="true" />
+                  <label for="o_nbsp_before_units" class="opt_lbl largew" data-l10n-en="tf_nbsp_before_units">${tf_nbsp_before_units}</label>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Deletions -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_delete" class="option" data-default="true" /><label for="o_group_delete" data-l10n-en="tf_delete">${tf_delete}</label></legend>
+              <div id="group_delete" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_erase_non_breaking_hyphens" class="result fright"></div>
+                  <input type="checkbox" id="o_erase_non_breaking_hyphens" class="option" data-default="true" />
+                  <label for="o_erase_non_breaking_hyphens" class="opt_lbl largew" data-l10n-en="tf_erase_non_breaking_hyphens">${tf_erase_non_breaking_hyphens}</label>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Typographical signs -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_typo" class="option" data-default="true" /><label for="o_group_typo" data-l10n-en="tf_typo">${tf_typo}</label></legend>
+              <div id="group_typo" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_ts_apostrophe" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_apostrophe" class="option" data-default="true" />
+                  <label for="o_ts_apostrophe" class="opt_lbl largew" data-l10n-en="tf_ts_apostrophe">${tf_ts_apostrophe}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_ellipsis" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_ellipsis" class="option" data-default="true" />
+                  <label for="o_ts_ellipsis" class="opt_lbl largew" data-l10n-en="tf_ts_ellipsis">${tf_ts_ellipsis}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_dash_middle" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_dash_middle" class="option" data-default="true" />
+                  <label for="o_ts_dash_middle" class="opt_lbl largew" data-l10n-en="tf_ts_dash_middle">${tf_ts_dash_middle}</label>
+                </div>
+                <div class="blockopt">
+                  <div class="inlineblock indent">
+                    <input type="radio" name="hyphen1" id="o_ts_m_dash_middle" class="option" data-default="false" /><label for="o_ts_m_dash_middle" class="opt_lbl" data-l10n-en="tf_emdash">${tf_emdash}</label>
+                  </div>
+                  <div class="inlineblock indent">
+                    <input type="radio" name="hyphen1" id="o_ts_n_dash_middle" class="option" data-default="true" /><label for="o_ts_n_dash_middle" class="opt_lbl" data-l10n-en="tf_endash">${tf_endash}</label>
+                  </div>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_dash_start" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_dash_start" class="option" data-default="true" />
+                  <label for="o_ts_dash_start" class="opt_lbl largew" data-l10n-en="tf_ts_dash_start">${tf_ts_dash_start}</label>
+                </div>
+                <div class="blockopt">
+                  <div class="inlineblock indent">
+                    <input type="radio" name="hyphen2" id="o_ts_m_dash_start" class="option"  data-default="true" /><label for="o_ts_m_dash_start" class="opt_lbl" data-l10n-en="tf_emdash">${tf_emdash}</label>
+                  </div>
+                  <div class="inlineblock indent">
+                    <input type="radio" name="hyphen2" id="o_ts_n_dash_start" class="option" data-default="false" /><label for="o_ts_n_dash_start" class="opt_lbl" data-l10n-en="tf_endash">${tf_endash}</label>
+                  </div>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_quotation_marks" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_quotation_marks" class="option" data-default="true" />
+                  <label for="o_ts_quotation_marks" class="opt_lbl largew" data-l10n-en="tf_ts_quotation_marks">${tf_ts_quotation_marks}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_units" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_units" class="option" data-default="true" />
+                  <label for="o_ts_units" class="opt_lbl largew" data-l10n-en="tf_ts_units">${tf_ts_units}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_spell" class="result fright"></div>
+                  <input type="checkbox" id="o_ts_spell" class="option" data-default="true" />
+                  <label for="o_ts_spell" class="opt_lbl largew" data-l10n-en="tf_ts_spell">${tf_ts_spell}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ts_ligature" class="result fright"></div>
+                  <div class="inlineblock">
+                    <input type="checkbox" id="o_ts_ligature" class="option" data-default="false" />
+                    <label for="o_ts_ligature" class="opt_lbl" data-l10n-en="tf_ts_ligature">${tf_ts_ligature}</label>
+                  </div>
+                  <div class="inlineblock indent">
+                    <input type="radio" id="o_ts_ligature_do" name="liga" class="option" data-default="false" />
+                    <label for="o_ts_ligature_do" class="opt_lbl" data-l10n-en="tf_ts_ligature_do">${tf_ts_ligature_do}</label>
+                  </div>
+                  <div class="inlineblock indent">
+                    <input type="radio" id="o_ts_ligature_undo" name="liga" class="option" data-default="true" />
+                    <label for="o_ts_ligature_undo" class="opt_lbl" data-l10n-en="tf_ts_ligature_undo">${tf_ts_ligature_undo}</label>
+                  </div>
+                </div>
+
+                <div class="blockopt">
+                  <div class="inlineblock indent"><input type="checkbox" id="o_ts_ligature_ff" class="option" data-default="true" /><label for="o_ts_ligature_ff" class="opt_lbl">ff</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_fi" class="option" data-default="true" /><label for="o_ts_ligature_fi" class="opt_lbl">fi</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_ffi" class="option" data-default="true" /><label for="o_ts_ligature_ffi" class="opt_lbl">ffi</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_fl" class="option" data-default="true" /><label for="o_ts_ligature_fl" class="opt_lbl">fl</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_ffl" class="option" data-default="true" /><label for="o_ts_ligature_ffl" class="opt_lbl">ffl</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_ft" class="option" data-default="true" /><label for="o_ts_ligature_ft" class="opt_lbl">ft</label></div>
+                  &nbsp; <div class="inlineblock"><input type="checkbox" id="o_ts_ligature_st" class="option" data-default="false" /><label for="o_ts_ligature_st" class="opt_lbl">st</label></div>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Misc -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_misc" class="option" data-default="true" /><label for="o_group_misc" data-l10n-en="tf_misc">${tf_misc}</label></legend>
+              <div id="group_misc" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_ordinals_no_exponant" class="result fright"></div>
+                  <input type="checkbox" id="o_ordinals_no_exponant" class="option" data-default="true" />
+                  <label for="o_ordinals_no_exponant" class="opt_lbl reducedw" data-l10n-en="tf_ordinals_no_exponant">${tf_ordinals_no_exponant}</label>
+                  <div class="secondoption">
+                    <input type="checkbox" id="o_ordinals_exponant" class="option" data-default="true" />
+                    <label for="o_ordinals_exponant" class="opt_lbl smallw" data-l10n-en="tf_ordinals_exponant">${tf_ordinals_exponant}</label>
+                  </div>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_etc" class="result fright"></div>
+                  <input type="checkbox" id="o_etc" class="option" data-default="true" />
+                  <label for="o_etc" class="opt_lbl largew" data-l10n-en="tf_etc">${tf_etc}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_missing_hyphens" class="result fright"></div>
+                  <input type="checkbox" id="o_missing_hyphens" class="option" data-default="true" />
+                  <label for="o_missing_hyphens" class="opt_lbl largew" data-l10n-en="tf_missing_hyphens">${tf_missing_hyphens}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_ma_word" class="result fright"></div>
+                  <input type="checkbox" id="o_ma_word" class="option" data-default="true" />
+                  <label for="o_ma_word" class="opt_lbl largew" data-l10n-en="tf_ma_word">${tf_ma_word}</label>
+                </div>
+                <div class="blockopt">
+                  <div class="inlineblock indent">
+                    <input type="checkbox" id="o_ma_1letter_lowercase" class="option" />
+                    <label for="o_ma_1letter_lowercase" class="opt_lbl" data-l10n-en="tf_ma_1letter_lowercase">${tf_ma_1letter_lowercase}</label>
+                  </div>
+                  <div class="inlineblock indent">
+                    <input type="checkbox" id="o_ma_1letter_uppercase" class="option" />
+                    <label for="o_ma_1letter_uppercase" class="opt_lbl" data-l10n-en="tf_ma_1letter_uppercase">${tf_ma_1letter_uppercase}</label>
+                  </div>
+                </div>
+              </div>
+            </fieldset>
+
+            <!-- Restructuration -->
+            <fieldset>
+              <legend><input type="checkbox" id="o_group_struct" class="option" data-default="false" /><label for="o_group_struct" data-l10n-en="tf_struct">${tf_struct}</label></legend>
+              <div id="group_struct" class="groupblock">
+                <div class="blockopt underline">
+                  <div id="res_o_remove_hyphens_at_end_of_paragraphs" class="result fright"></div>
+                  <input type="checkbox" id="o_remove_hyphens_at_end_of_paragraphs" class="option" data-default="false" />
+                  <label for="o_remove_hyphens_at_end_of_paragraphs" class="opt_lbl largew"  data-l10n-en="tf_remove_hyphens_at_end_of_paragraphs">${tf_remove_hyphens_at_end_of_paragraphs}</label>
+                </div>
+                <div class="blockopt underline">
+                  <div id="res_o_merge_contiguous_paragraphs" class="result fright"></div>
+                  <input type="checkbox" id="o_merge_contiguous_paragraphs" class="option" data-default="false" />
+                  <label for="o_merge_contiguous_paragraphs" class="opt_lbl largew" data-l10n-en="tf_merge_contiguous_paragraphs">${tf_merge_contiguous_paragraphs}</label>
+                </div>
+              </div>
+            </fieldset>
+          </div>
+
+          <div id="tf_actions">
+              <div id="tf_reset" class="button blue" data-l10n-en="Default">Par défaut</div>
+              <div id="tf_apply" class="button green fright" data-l10n-en="Apply">Appliquer</div>
+              <div id="tf_progressbarbox"><progress id="progressbar" style="width: 400px;"></progress> <span id="time_res"></span></div>
+              <!--<div class="clearer"></div>
+              <div id="infomsg" data-l10n-id="tf_infomsg"></div>-->
+          </div>
+        </section> <!-- text formatter -->
+
       </div> <!-- #page -->
 
     </div> <!-- #main -->
 
     <script src="main.js"></script>

Index: gc_lang/fr/webext/panel/main.js
==================================================================
--- gc_lang/fr/webext/panel/main.js
+++ gc_lang/fr/webext/panel/main.js
@@ -20,11 +20,51 @@
     let xElem = xEvent.target;
     if (xElem.id) {
       if (xElem.id) {
 
       }
+    } else if (xElem.className === "select") {
+      showPage(xElem.dataset.page);
     } else if (xElem.tagName === "A") {
       openURL(xElem.getAttribute("href"));
     }
   },
   false
 );
+
+function showPage (sPageName) {
+  try {
+    // hide them all
+    for (let xNodePage of document.getElementsByClassName("page")) {
+      xNodePage.style.display = "None";
+    }
+    // show the one
+    document.getElementById(sPageName).style.display = "block";
+    sendMessage("Mon message");
+    // specific modifications
+    if (sPageName === "conj_page") {
+      document.body.style.width = "600px";
+      document.documentElement.style.width = "600px";
+      document.getElementById("movewindow").style.display = "none";
+    } else {
+      document.body.style.width = "530px";
+      document.documentElement.style.width = "530px";
+      document.getElementById("movewindow").style.display = "block";
+    }
+  }
+  catch (e) {
+    showError(e);
+  }
+}
+
+function handleResponse(message) {
+  console.log(`background script sent a response: ${message.response}`);
+}
+
+function handleError(error) {
+  console.log(`Error: ${error}`);
+}
+
+function sendMessage (sMessage) {
+  let sending = browser.runtime.sendMessage({content: sMessage});
+  sending.then(handleResponse, handleError);  
+}

Index: gc_lang/fr/xpi/data/gc_panel.html
==================================================================
--- gc_lang/fr/xpi/data/gc_panel.html
+++ gc_lang/fr/xpi/data/gc_panel.html
@@ -2,19 +2,10 @@
 <html>
     <head>
         <link rel="stylesheet" type="text/css" href="gc_panel.css" />
         <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     </head>
-    <script type="text/javascript">
-        // for some reason, onclick onmouseover onmouseout can’t launch function in attached script, so here it is.
-        function showData (sIdErr) {
-            document.getElementById("data"+sIdErr).hidden = false;
-        }
-        function hideData (sIdErr) {
-            document.getElementById("data"+sIdErr).hidden = true;
-        }
-    </script>
     <body class="panel">
         <div style="position: fixed; width: 100%">
             <div id="rightcorner">
                 <a class="rightcornerbutton red" id="close" href="#" title="Fermer"><b>×</b></a>
                 <a class="rightcornerbutton cyan" id="expand_reduce" href="#" title="Réduire/Agrandir"><b>−</b></a>