Создание приложений для браузера Google Chrome. Алексей Алексеевич Крючков

Читать онлайн.

Название Создание приложений для браузера Google Chrome
Автор произведения Алексей Алексеевич Крючков
Жанр Учебная литература
Серия
Издательство Учебная литература
Год выпуска 2018
isbn
Создание приложений для браузера Google Chrome - Алексей Алексеевич Крючков
Скачать книгу
будут располагаться все файлы нашего генератора. Сам генератор мы будем писать в виде приложения(расширения) для браузера Google Chrome. Наше будущее приложение будет способно генерировать пароли из пользовательских наборов символов и из встроенных в само приложение наборов. Писать мы будем с использованием простого блокнота или любого текстового редактора. Для начала создадим разметку интерфейса. Для этого в редакторе создайте файл с именем index.html и вставьте в него вот это:

      <!DOCTYPE html>

      <!–

      To change this license header, choose License Headers in Project Properties.

      To change this template file, choose Tools | Templates

      and open the template in the editor.

      –>

      <html>

          <head>

              <title>Password generator</title>

              <meta charset="UTF-8">

              <link rel="stylesheet" href="styles.css">

          </head>

          <body>

                <img src="assets/imagespg.jpg" alt="pasgen" title="pasgen">

                <h2>Program for generating passwords</h2>

                  <hr>

              <div class="form">

                   <select class="s">

                       <option>letters</option>

                       <option>numbers</option>

                       <option>letters and numbers</option>

                   </select>

                  <label for="l">password length: </label> <input type="text" value="4" class="l" >  

                   <label for="n">number of passwords: </label> <input type="text" value="1" class="n">

                   <label for="us">your character set: </label> <input type="text" class="us" ><br>

                  <p> When you finish typing, click "Create". To clear the field, click "Clear"</p>

                  <input type="submit" value="Create" class="buttoncalc" > <input type="submit" value="Clear" class="buttonclear" >

                  </div>

                  <h4 class="alert"></h4>

                  <textarea class="ta" rows="15" cols="60">

                  </textarea>

        <script src="generator.js"></script>

          </body>

      </html>

      Сохраните этот файл в директории pasgen.

      Если сейчас запустить этот код в каком-нибудь браузере, то мы увидим примерно вот это:

      В верхнем левом углу вы видите надпись pasgen, здесь должно быть изображение растянутое по всей ширине. Как его добавить? Оно прописано в коде в теге img, но отсутствует в директории программы. Для добавления создайте в папке pasgen еще одну папку с именем assets, а в нее закиньте какую-нибудь картинку размером примерно 1000/123 и с именем imagespg.jpg. Также нам понадобятся иконки размером 16/16 и 128/128. Иконки должны иметь названия соответственно icon_16.png и icon_128.png и располагаться в той же папке assets.

      Я использовал такие изображения:

      Для шапки

      Для иконки

      Еще один нюанс. Чтобы у нас все выглядело как надо нам понадобиться каскадная таблица стилей. В том же редакторе создайте файлик под названием styles.css и заполните его вот этим содержимым:

       a{

         outline:none;

        }

        hr{

            width: 100%;

            size: 2px;

        }

        img{

            width: 100%;

            height: 123px;

        }

      Сохраните файл стилей в папке pasgen.

      После того как вы выполните все вышесказанное и запустите index.html вы увидите приблизительно следующее:

      Но вот ведь незадача! Ничего не работает! Ну, конечно, кроме выпадающего списка и полей для ввода/вывода данных. Чтобы заработало все остальное нам нужен еще один файл. Тот самый где будет расписана вся логика нашей программы. В редакторе создайте файл с именем generator.js и вставьте туда следующий текст:

      var l=document.querySelector(".l");

      var n=document.querySelector(".n");

      var us=document.querySelector(".us");

      var s=document.querySelector(".s");

      var buttonCalc=document.querySelector(".buttoncalc");

      var buttonClear=document.querySelector(".buttonclear");

      var alert=document.querySelector(".alert");

      var ta=document.querySelector(".ta");

      buttonCalc.addEventListener("click",showResult);

      buttonClear.addEventListener("click",clear);

      function showResult(){

          var pasLength=0;

          var

Скачать книгу