Создание приложений для браузера Google Chrome
Читать

Создание приложений для браузера Google Chrome

Книги по IT

:

программирование

.
Аннотация

В книге на примерах описывается как создавать приложения для популярного браузера Google Chrome. Читатель сам по ходу чтения сможет создать четыре простых приложения и запустить их в браузере.

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

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

</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>

When you finish typing, click "Create". To clear the field, click "Clear"

<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 вы увидите приблизительно следующее:

в официальном магазине Литрес

Без серии

Java. Создание приложений
Linux Mint. Достойная замена Windows
Java Code
Непознанное. Сборник статей
Решаем уравнения
Создание приложений для браузера Google Chrome
Аномальщина
ElementaryOS. Вместо macOS
KDE Neon. На замену Windows
Непознанный мир
Линуксы!