Создание приложений для браузера 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

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