Читать книгу Создание приложений для браузера Google Chrome - Алексей Алексеевич Крючков - Страница 1
Генератор паролей для браузера
ОглавлениеВ этой небольшой книжке будет показано как создавать простые приложения для браузера. Итак, приступим. Начнем мы с генератора паролей. В домашней папке создайте директорию с любым названием, например, 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 и вставьте туда следующий текст:
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 pasQuantitet=0;
var argument="";
var pas="";
var multiPas="";
if (isNullInField(l.value)){
alert.textContent="enter the length of the password";
alert.style.color="red";
l.focus();
return;
}
if (isNullInField(n.value)){
alert.textContent="enter the number of passwords";
alert.style.color="red";
n.focus();
return;
}
pasLength=Number(l.value);
pasQuantitet=Number(n.value);
if(pasLength<1||pasLength>1000){
alert.textContent="The password must be between 1 and 1000 characters in length";
alert.style.color="red";
l.focus();
return;
}
if(pasQuantitet<1||pasQuantitet>100){
alert.textContent="The number of passwords must be from 1 to 100";
alert.style.color="red";
n.focus();
return;
}
alert.textContent="";
if(isNullInField(us.value)){
argument=combinations(s.selectedIndex);
}else{
argument=us.value;
}
for(var i=0;i<pasQuantitet;i++){
pas=passwordCreator(argument,pasLength);
if(pas===""){
alert.textContent="Remove all spaces!";
alert.style.color="red";
us.focus();
return;
}else{
alert.textContent="";
}
multiPas+=pas+"\n";
}
ta.textContent=multiPas;
}
function passwordCreator(s,q){
var str="";
var masSymbols=[];
masSymbols=s.split("");
for (var i=0;i<s.length;i++){
if (masSymbols[i]===" "){
return "";
}
}
for (var i=0;i<q;i++){
str+=masSymbols[Math.floor(Math.random() * s.length)]+"";
}
return str;
}
function combinations(m){
var str;
switch (m){
case 0:
str="abcdefghijklmnopqrstuvwxyz";
break;
case 1:
str="0123456789";
break;
case 2:
str="abcdefghijklmnopqrstuvwxyz0123456789";
break;
default :
break;
}
return str;
}
function clear(){
ta.textContent="";
}
function isNullInField(p){
return p.trim().length===0;
}
Сохранив новый файл в директории приложения и запустив наш генератор уже известным вам способом вы должны увидеть, что все заработало! Конечно, при условии, что вы все сделали правильно! Пока испытайте программку, разберитесь где здесь что и как работает, а потом перейдем к следующему этапу. Какому еще этапу? Ведь, вроде все работает, все запускается! Но вы ведь не забыли, что мы пишем приложение для браузера Chrome, правда?
Итак, продолжим! Нам потребуется закинуть в папку генератора еще два файла. Первый это background.js, в котором находится инструкция для отрисовки окна программы и что там следует отобразить, а также какие размеры окна задать по-умолчанию. Второй файл это manifest.json, в нем содержится информация о версии программы, ее описание, название, где находятся иконки и какой скрипт запускать. В нашем случае запускается background.js. Код background.js:
Конец ознакомительного фрагмента. Купить книгу
