chapeau/blog-static
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
blog-static/2024/07/27/firefox-minimal.html

155 lines
7.2 KiB
HTML
Raw Normal View History

Build
2024-07-27 20:39:39 +00:00
<!DOCTYPE html>
<html lang="en" class="html" data-theme="light"><head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
Utiliser Firefox comme lecteur minimaliste
</title>
<link rel="stylesheet" href="/assets/css/main.css" />
<script type="text/javascript">
window.addEventListener('load', themeChange);
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme)
document.documentElement.setAttribute('data-theme', currentTheme);
function themeChange() {
let button = document.querySelector('.theme-toggle');
button.addEventListener('click', function (e) {
let currentTheme = document.documentElement.getAttribute('data-theme');
if (currentTheme === 'dark') {
transition();
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
} else {
transition();
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
});
let transition = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
document.documentElement.classList.remove('transition');
}, 1000);
}
}
</script>
</head>
<body>
<main class="page-content" aria-label="Content">
<div class="w">
<header>
<ul class="horizontal-list">
<li>
<a href="/">
accueil
</a>
&nbsp;&nbsp;
</li>
<li>
<a href="/blog.html">
blog
</a>
&nbsp;&nbsp;
</li>
Build
2024-09-09 17:25:32 +00:00
<li>
<a href="/infra.html">
infra
</a>
&nbsp;&nbsp;
</li>
Build
2024-07-27 20:39:39 +00:00
<li>
<a href="/about.html">
à propos
</a>
&nbsp;&nbsp;
</li>
<li>
<a href="https://cv.caroline.canebier.fr">
cv
</a>
&nbsp;&nbsp;
</li>
<li>
<a href="https://git.chapoline.me/chapeau/blog">
git
</a>
&nbsp;&nbsp;
</li>
</ul>
<div class="dashed"></div>
<h1>Utiliser Firefox comme lecteur minimaliste</h1>
</header>
<p>Je cherchais un moyen minimaliste pour pouvoir lire un pdf ou un manga dans Firefox, en épurant au maximum ma fenêtre. Deux options sont courantes : mettre la fenêtre en plein écran, ou utiliser une extension de navigateur dédiée. Mais ça ne doit pas être si difficile à faire à la main ? Voyons comment faire cela.</p>
<h2 id="création-dun-profil-dédié">Création d’un profil dédié</h2>
<p>Afin de pouvoir continuer à utiliser Firefox normalement, nous allons créer un <a href="https://support.mozilla.org/fr/kb/profils-la-ou-firefox-conserve-donnees-utilisateur">profil Firefox</a> dédié. Les profils Firefox permettent d’isoler entièrement tous les marques-page, configurations, extensions, etc. Pour cela, rien de plus simple : allez sur <code class="language-plaintext highlighter-rouge">about:profiles</code>, puis créez en un (dans mon exemple, je l’ai appelé <code class="language-plaintext highlighter-rouge">pdf</code>). Remettez le profil <code class="language-plaintext highlighter-rouge">default</code> comme profil par défaut (puisqu’il restera notre profil principal), et notez bien le chemin de “Root Directory” du nouveau profil. Vous pouvez enuite ouvrir une fenêtre avec ce profil en cliquant sur le bouton “Launch profile in new browser” de cette page.</p>
<p>Vous pouvez dès à présent configurer ce nouveau profil à votre goût : installation d’extension, paramètres de vie privée, thème… Une fois cela fait, nous allons épurer très fortement l’interface, en supprimant complètement les barres d’onglets et d’URL. Pour pouvoir modifier l’interface de Firefox elle même, nous allons devoir activer l’option <code class="language-plaintext highlighter-rouge">toolkit.legacyUserProfileCustomizations.stylesheets</code>, qui se trouve sur la page <code class="language-plaintext highlighter-rouge">about:config</code>.</p>
<h2 id="modification-de-linterface-de-firefox">Modification de l’interface de Firefox</h2>
<p>A présent, allons dans le dossier de configuration du profile (chez moi, <code class="language-plaintext highlighter-rouge">~/.mozilla/firefox/yrafg6j1.pdf/</code>). La configuration de l’interface va se faire en utilisant <a href="https://www.userchrome.org/">userChrome</a>. Pour cela, créez le fichier <code class="language-plaintext highlighter-rouge">chrome/userChrome.css</code>, en créant le dossier si besoin. Mettez le contenu suivant dans le fichier :</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c">/* Cache la barre des onglets */</span>
<span class="nf">#TabsToolbar</span>
<span class="p">{</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="p">}</span>
<span class="c">/* Cache la barre de l'URL*/</span>
<span class="nf">#navigator-toolbox</span> <span class="p">{</span>
<span class="nl">visibility</span><span class="p">:</span> <span class="nb">collapse</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Les changements seront effectifs au prochain démarrage du profil.</p>
<p><a href="/assets/firefox-minimal-1.png"><img src="/assets/firefox-minimal-1.png" alt="Screenshot du rendu de firefox, sans barres en haut" /></a></p>
<h3 id="astuces">Astuces</h3>
<ul>
<li>Pour lancer Firefox directement sur le profil <code class="language-plaintext highlighter-rouge">pdf</code>, lancez le avec <code class="language-plaintext highlighter-rouge">firefox -P pdf [file.pdf]</code>.</li>
<li>Sans interface, la navigation au clavier est très utile : <code class="language-plaintext highlighter-rouge">ctrl+tab</code> pour cycler les onglets ouverts, <code class="language-plaintext highlighter-rouge">ctrl+t</code> pour ouvrir un nouvel onglet, <code class="language-plaintext highlighter-rouge">ctrl+o</code> pour ouvrir un fichier, ou <code class="language-plaintext highlighter-rouge">alt+left</code> pour revenir à la page précédente par exemple.</li>
<li>Attention, la barre d’URL est totalement inaccessible dans ce mode, y compris avec <code class="language-plaintext highlighter-rouge">F6</code>. Pensez à utiliser des marques-page (<code class="language-plaintext highlighter-rouge">ctrl+shift+o</code> pour ouvrir le menu), ou à épingler des pages sur la page de nouvel onglet.</li>
</ul>
<button title="Toggle Theme" class="theme-toggle">
<svg viewBox="0 0 32 32" width="24" height="24" fill="currentcolor">
<circle cx="16" cy="16" r="14" fill="none" stroke="currentcolor" stroke-width="4"></circle>
<path d="
M 16 0
A 16 16 0 0 0 16 32
z">
</path>
</svg>
</button>
<div class="credits">
Theme forked from <a href="https://github.com/abhinavs/moonwalk" target="_blank" rel="noreferrer">Moonwalk</a>, mixed with <a href="https://github.com/catppuccin/catppuccin" target="_blank" rel="noreferrer">Catppuccin</a>
</div>
</div>
</main>
</body>
</html>
Reference in a new issue Copy permalink