notas

chrome extension

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:100,400,700,800" />
    <title>agenda</title>
    <script type="text/javascript" src="main.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
    <main>
        <header>
            <span>anotações</span>
        </header>
        <section>
            <div>
                <input id="agente" type="text" maxlength="4" placeholder="Agente"/>
                <input id="mostrar" type="submit" value="mostrar"/>
            </div>
            <textarea id="notas"></textarea>
        </section>
        <footer>
            <div>
                <i id="a_ok" class="hidden em em-white_check_mark"></i>
                <i id="a_erro" class="hidden em em-x"></i>
            </div>
            <div>
                <a id="limpar">limpar</a>
                <input type="submit" id="salvar" value="salvar">
            </div>
        </footer>
    </main>
</body>
</html>

SCSS

*{margin:0;padding:0;box-sizing:border-box;}

            $html_width: 500px;
            $html_height: 600px;

            $width-16: calc(100% - 16px);

            //cores
            $amarelo_1: #f7f76a;
            $vermelho_1: #e14545;
            $verde_1: #57c372;
            $f8: #f8f8f8;

            input, textarea, iframe{
                outline: none !important;
            }

html, body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; height: 100%;
    background: #666;
    background-image: linear-gradient(100deg, #888, #555);
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: 'Open Sans', sans-serif;
}
main{
                        input[type=submit]{
                            width: auto; height: 25px;
                            padding: 0 15px;
                            font-size: 14px;
                            cursor: pointer;
                            background: #333;
                            border: none;
                            color: #ddd;
                            transition: all ease-in-out 0.1s;
                            &:hover{
                                color: #eee;
                                background: #222;
                                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
                            }
                        }
                        input[type=text]{
                            width: 100px; height: 25px;
                            border: 1px solid #aaa;
                            font-size: 14px;
                            line-height: 24px;
                            padding: 0 5px;
                            transition: box-shadow ease-in-out 0.1s;
                            &:focus{
                                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
                            }
                        }

    width: 400px; height: auto;
    background: #ccc;
    box-shadow: 3px 3px 1px...

JavaScript

document.addEventListener('DOMContentLoaded', function(){
    //==[dados&itens]======================================
        var agente      = document.getElementById("agente");
        var btnMostrar  = document.getElementById("mostrar");

        var notas       = document.getElementById("notas");
        var btnLimpar   = document.getElementById("limpar");
        var btnSalvar   = document.getElementById("salvar");

        var storage = chrome.storage.local;
    //==[/dados&itens]=====================================
    //==[funções]==========================================
        function mostrar(storage, agente){ //mostrar(storage, agente, notas);
            storage.get(agente.value, function(result){
                var notas = document.getElementById("notas");
                notas.value = result.agente;
            });
        }

        function salvar(storage, agente, notas){ //salvar(storage, agente, notas);
            storage.set({
                [agente.value]: notas.value
            });
            storage.get(agente.value, function(result){
                console.log(agente.value, result);
            });
        }

        function limpar(notas){ // limpar(notas);
            notas.value = "";
        }
    //==[/funções]=========================================
    //==[trigger funções]==================================
        btnMostrar.addEventListener('click', function(){
            mostrar(storage, agente);
        });

        btnSalvar.addEventListener('click', function(){
            salvar(storage, agente, notas);
        });

        btnLimpar.addEventListener('click', function(){
            limpar(notas);
        });
    //==[/trigger funções]=================================
    //chamando dr hans chucrutes\\
});