Edit in JSFiddle 

function sendAction(action) {
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.tabs.sendMessage(tabs[0].id, {action: action});
    });
}

document.getElementById("font-size-decrease").onclick = () => sendAction("font-size-decrease");

document.getElementById("font-size-increase").onclick = () => sendAction("font-size-increase");

document.getElementById("grayscale-toggle").onclick = () => sendAction("grayscale-toggle");

document.getElementById("invert-toggle").onclick = () => sendAction("invert-toggle");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="rows">
    <div class="row">
        <h3>Font Size</h3>
        <div class="col col-6">
            <div class="action-button" id="font-size-decrease">-</div>
        </div>
        <div class="col col-6">
            <div class="action-button" id="font-size-increase">+</div>
        </div>
    </div>
    <div class="row">
        <h3>Grayscale</h3>
        <div class="col col-12">
            <div class="action-button" id="grayscale-toggle">Toggle</div>
        </div>
    </div>
    <div class="row">
        <h3>Invert Colors</h3>
        <div class="col col-12">
            <div class="action-button" id="invert-toggle">Toggle</div>
        </div>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

body {
    width: 300px;
}

.rows * {
    box-sizing: border-box;
}

.col {
    float: left;
    width: 100%;
}

.col-6 {
    width: 50%;
}

.col-12 {
    width: 100%;
}

.col-4 {
    width: 33.33%;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.action-button {
    background-color: #cccccc;
    border: 1px black;
    cursor: pointer;
    margin: 5px;
    text-align: center;
    padding: 5px;
    font-size: 20px;
    font-weight: bold;
}

.action-button:active {
    background-color: whitesmoke;
}