Knowledge Base Categories

Firefox New Tab Page

Oct 12, 2021

Navigate to /usr/lib/firefox.

Create autoconfig.cfg:

//  
var {classes:Cc,interfaces:Ci,utils:Cu} = Components;  

/* set new tab page */  
try {  
  Cu.import("resource:///modules/AboutNewTab.jsm");  
  var newTabURL = "file:///home/james/ff/index.html";  
  AboutNewTab.newTabURL = newTabURL;  
} catch(e){Cu.reportError(e);} // report errors in the Browser Console

 Create defaults/pref/autoconfig.js:

//  
pref("general.config.filename", "autoconfig.cfg");  
pref("general.config.obscure_value", 0);  
pref("general.config.sandbox_enabled", false);  

Create index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <p style="text-align:center; margin-top: 70px; margin-bottom: -10px;"><img src="firefox.png"></p>
    <h1 id="title">Welcome to <span style="color: #FFA32E;">Firefox.</span></h1>
    <h2 id="subtitle">Firefox answers to no one but you.</h2>
    <div id="block-list">
        <h3 id="block-subject">小説</h3>
        <div class="block-set">
            <a class="block-link" href="file:///home/james/Syosetu/Syosetu%20Wget/ncode.syosetu.com/n8792em/index.html">
                <div class="block-item">
                    <p>私の推しは悪役令嬢</p>
                </div>
            </a>
            <a class="block-link" href="file:///home/james/Syosetu/Syosetu%20Wget/ncode.syosetu.com/n5708cr/index.html">
                <div class="block-item">
                    <p>取り憑かれた公爵令嬢</p>
                </div>
            </a>
            <a class="block-link" href="https://jamesnorth.net">
                <div class="block-item">
                    <p>ホームページ</p>
                </div>
            </a>
        </div>
    </div>
</body>
</html>

Create styles.css:

body{
    background-color: #282828;
}

#title{
    font-size: 4.5em;
    text-align: center;
    font-weight: 700px;
    color: #e1e1e1;
    font-family: Ubuntu,sans-serif;
}

#subtitle{
    text-align: center;
    color: #ededed;
    color: #FF0047;
    font-family: Ubuntu,sans-serif;
    font-size: 2.0em;
    margin-top: -35px;
}

#block-list{
    margin-top: 80px;
}

.block-set {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    grid-row-gap: 30px;
    grid-column-gap: 20px;
    margin-left: 13%;
    margin-right: 13%;
}

.block-link{
    text-decoration: none;
    color: #d1d1d1;
    border-radius: 10px;
    padding: 30px;
    background-color: #3d3d3d;
    text-align: center;
    font-weight: 700;
    transform: perspective(1px) translateZ(0);
    transition-duration: 0.3s, 0.150s;
    transition-property: transform, box-shadow;
    transition-timing-function: ease-out, ease-out;
}

.block-link:hover, .block-link:focus, .block-link:active {
    transform: translateY(-6px);
    background-color: #4d4d4d;
    box-shadow: 0px 5px 5px -1px black;
}

#block-subject {
    margin-top: 60px;
    text-align: center;
    color: #e1e1e1;
    font-size: 2.0em;
}

.block-item p{
    font-size: 1.3em;
}

Include firefox.png: