Console
The Console allows directly adding HTML code into both your website's <head> and <body> tags.
As an example, adding the following code into the <head> and <body> sections of the console tab will find a Google font and apply it to all text on the exchange.
Meta Tags
For On-Premise operators, SEO tags can be added in the head section.
For a more in-depth description of header tags, W3Schools has good explanations of what can be added:
Styles
HTML can be used to alter the specific styles on the page as well, using both the head and body.
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster"><body>
<style>
* {
font-family: "Lobster", sans-serif;
}
</style>And here we can compare the two fonts:
Before
After
More Complex Injections
Above is a fairly simple (but still useful) snippet of code. This could of course be extended to any form of style editing that you desire. For example the following piece of code:
<script>
function open(url) {
const a = document.createElement('a');
a.style = 'display: none';
a.href = url;
a.target = '_blank';
a.rel = 'noopener noreferrer';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
function addItem(id) {
var menu = document.getElementsByClassName('app-menu-bar')[0];
if (id && menu) {
var item = document.createElement('div');
item.id = id;
item.onclick = function () { open('https://etherscan.io/'); };
item.classList.add('app-menu-bar-content', 'd-flex');
var content = document.createElement('div');
content.innerHTML = 'EtherScan';
content.classList.add('app-menu-bar-content-item', 'd-flex');
item.appendChild(content);
menu.appendChild(item);
}
}
function checkMenuItem(id) {
if (id) {
if (!document.getElementById(id)) {
addItem(id)
}
}
}
checkMenuItem('etherscan');
setInterval(function() {
checkMenuItem('etherscan')
}, 1000);
</script>Will add a direct link in the header to EtherScan.
Last updated
