Категории
Меню
Лучшие книги » Компьютеры и Интернет » Программирование » Создание приложений для браузера Google Chrome - Крючков Алексей Алексеевич

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

27.12.2023 - 17:5300
0
Создание приложений для браузера Google Chrome - Крючков Алексей Алексеевич Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com18+
  • Жанр: Компьютеры и Интернет / Программирование
  • Название: Создание приложений для браузера Google Chrome
  • Автор: Крючков Алексей Алексеевич
  • Возрастные ограничения: (18+) Внимание! Книга может содержать контент только для совершеннолетних. Для несовершеннолетних просмотр данного контента СТРОГО ЗАПРЕЩЕН! Если в книге присутствует наличие пропаганды ЛГБТ и другого, запрещенного контента - просьба написать на почту для удаления материала.
Описание Создание приложений для браузера Google Chrome - Крючков Алексей Алексеевич
Читать онлайн Создание приложений для браузера Google Chrome - Крючков Алексей Алексеевич

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 2 3
Перейти на страницу:

Генератор паролей для браузера

В этой небольшой книжке будет показано как создавать простые приложения для браузера. Итак, приступим. Начнем мы с генератора паролей. В домашней папке создайте директорию с любым названием, например, pasgen. В ней будут располагаться все файлы нашего генератора. Сам генератор мы будем писать в виде приложения(расширения) для браузера 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 и вставьте туда следующий текст:

1 2 3
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Java Code - Крючков Алексей Алексеевич Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Java Code - Крючков Алексей Алексеевич
26.03.2024 - 04:01
Как тестируют в Google - Джеймс Уиттакер Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как тестируют в Google - Джеймс Уиттакер
01.05.2024 - 02:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2025. Все права защищены.


Почта для связи: [email protected]