Blank new tab extension for Microsoft Edge with background color that follows browser color theme.
Home Page: https://microsoftedge.microsoft.com/addons/detail/ihknoknoahjhldmpdoajjdkfjhddgpcd
License: MIT License
Turkish (tr) localization
{
"extName": {
"message": "Boş Sekme"
},
"extDesc": {
"message": "Tarayıcı renk temasını izleyen arka plan rengine iye boş bir yeni sekme sayfası."
},
"tabTitle": {
"message": "Yeni Sekme"
}
}
Hello,
I have noticed on both, Google Chrome and Microsoft Edge when I install the extension and start the browser, new tab is empty, however the address bar always has this weird random "URL". Would it be possible to adjust it to start with empty address bar? Attaching screenshot for better explanation.
Thank you.
I modded the extension a bit. If you click the blank page, you can now type notes. it will save them forever too.
use terminal to get to the files open "$HOME/Library/Application Support/Microsoft Edge Dev/Default/Extensions/ihknoknoahjhldmpdoajjdkfjhddgpcd/2.2.0_0"
index.html
<!DOCTYPE html>
<title>Notes</title>
<link rel="icon" href="icons/favicons/dark.ico">
<style>
html,
body {
background-color: rgba(33, 33, 33, 1);
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #fcfcfc;
white-space: pre;
}
.note-wrapper {
height: 100%;
padding: 0 0 0 0;
}
.note-container {
width: 100%;
margin: 0 auto;
min-height: 100%;
padding: 40px 40px;
outline: 0;
border: 0;
font-size: 14px;
font-family: monospace;
background: rgba(33, 33, 33, 1);
white-space: pre;
tab-size: 4;
}
</style>
<body>
<div class="note-wrapper">
<div class="note-container" id="js-note-container" contenteditable="" spellcheck="false"></div>
</div>
<script src="index.js"></script>
</body>
index.js
// Set title
document.title = chrome.i18n.getMessage("tabTitle");
// Set favicon
function updateFavicon(e) {
const color = e.matches ? "light" : "dark";
document.querySelector('link[rel="icon"]').href = `icons/favicons/${color}.ico`;
}
const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
darkMode.addEventListener("change", updateFavicon);
updateFavicon(darkMode);
//make tab key work
document.getElementById('js-note-container').addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
event.preventDefault();
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var start = range.startOffset;
var end = range.endOffset;
var textNode = range.startContainer;
var textContent = textNode.textContent;
var lines = textContent.substring(start, end).split(/\r?\n/);
for (var i = 0; i < lines.length; i++) {
lines[i] = '\t' + lines[i];
}
textNode.textContent = textContent.substring(0, start) + lines.join('\n') + textContent.substring(end);
// put caret at right position again
range.setStart(textNode, start + 1);
range.setEnd(textNode, start + 1);
}
});
//save
window.addEventListener("load", function() {
document.querySelector("#js-note-container").innerHTML = localStorage.getItem("notes");
});
document.querySelector("#js-note-container").addEventListener("input", function() {
localStorage.setItem("notes", this.innerHTML);
});
//clean pastes to plain text
document.querySelector("#js-note-container").addEventListener("paste", function(e) {
e.preventDefault();
var text = "";
if (e.clipboardData && e.clipboardData.getData) {
text = e.clipboardData.getData("text/plain");
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData("Text");
}
document.execCommand("insertHTML", false, text);
});
feel free to steal all this code I added, it was chatGPT that wrote it anyway lol
In dark mode, Edge has the following background colors:
Can you change the current color #242424 to one of these so that background of blank tab matches better the overall colors of Edge?
Thanks.
Hello, I'm using Edge 80.0.361.62 on macOS catalina 10.15.3 (19D76). BlankTab does not work in inprivate mode, even if (obviously) allow in inprivate mode is checked in Extension management.
I also set the NewTabLocation policy via preferences file com.microsoft.Edge.plist (user's preferences)
need add option for localization of country for google. google.cz google.at .nz .it ...
thx Adam
Hello! Could you please update with IT localization? Thank you, bye!
{
"extName": {
"message": "Blank Tab",
"description": "Titolo dell'estensione mostrato nel web store."
},
"extDesc": {
"message": "Apre una nuova scheda vuota, il colore dello sfondo seguirà il tema del browser.",
"description":"Descrizione dell'estensione mostrata nel web store."
},
"tabTitle": {
"message": "Nuova scheda",
"description":"Titolo nuova scheda."
}
}
Thanks for the great extension! It works like a charm. 2 suggestions to make it even better. Since this extension already supports dark mode, I can imagine that you as a developer also value a more immersive experience.
support more language. For example current Chinese (simplified) is not supported so the title is shown in English. The Chinese (Simplified) translation for New Tab (that Edge uses) is "新建标签页" and for Blank Tab "空白标签页". The description translation: "将新标签页设置为空白，其背景颜色将遵循Edge浏览器的深/浅色设置。"
Use the default icon of Edge's new tab (see screenshot below)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.