Как и многие люди в наши дни, я отказался от настольных текстовых процессоров в пользу бесплатных и простых Документов Google. Однако мне не хватает одной строки состояния с постоянным счетчиком слов, которая помогла мне следить за ограничениями слов в статьях, над которыми я работал. Чтобы улучшить свой опыт работы с Документами Google, я решил создать такой же, как он, и вот как.
Добро пожаловать в первую часть серии из трех статей о создании и оптимизации расширения для Google Chrome. Для понимания этого урока рекомендуется знание HTML, CSS и jQuery. Кроме того, убедитесь, что у вас установлена последняя версия Google Chrome в режиме разработчика (в разделе «Сервис» -> «Расширения»; флажок в верхней части экрана).
Создайте папку на вашем жестком диске и дайте ей имя — например, GDWC. Первым шагом к каждому расширению является создание его файла манифеста: начальной загрузки, которая сообщает Chrome, какое это расширение, в каком контексте он работает, что ему требуется, что он делает и когда он это делает. Создайте файл manifest.json со следующим содержимым:
{
"name": "GDWC",
"version": "0.1",
"description": "Word count statusbar for Google Docs!",
"background" : { "scripts": ["background.js"] },
"page_action" :
{
"default_icon" : "icon.png",
"default_title" : "GDWC statusbar is active"
},
"content_scripts": [
{
"matches": ["https://docs.google.com/document/*"],
"js": ["jq.js", "main.js"],
"run_at": "document_idle"
}
],
"icons": {
"48": "icon48.png",
"128": "icon128.png"
}
}Первые несколько значений, таких как имя , версия и описание, говорят сами за себя. Затем есть фон, который определяет, какой скрипт загружать в фоновом режиме. Фоновые страницы и сценарии служат специальному назначению (объяснение которого не входит в рамки данной статьи), но нашему расширению это нужно просто для активации значка в адресной строке. Пока мы занимаемся этим, создайте файл background.js и поместите в него этот контент:
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {
chrome.pageAction.show(sender.tab.id);
sendResponse({});
}
);
Все, что он делает, это говорит расширению: «показывать иконку при вызове», ничего больше.
Давайте продолжим смотреть на manifest.json. Наличие блока page_action указывает Chrome, что это расширение относится к определенной странице (или некоторым страницам), а не ко всему браузеру. Расширение, которое является действием страницы, может иметь значок в адресной строке браузера (значение default_icon). Напротив, действие браузера добавляет значки справа от адресной строки, за ее пределами. Расширение может быть одним или другим, но не обоими. Поскольку мы коснулись значков, давайте добавим некоторые прямо сейчас и уберем это (и последний блок манифеста, значки ). Я сделал пару образцов; ссылка на скачивание для них находится в конце этого поста. Две большие иконки (icon48 и icon128) предназначены для Chrome Web Store, поэтому ваше расширение выглядит красиво и красиво, когда его там видят другие.
Теперь давайте посмотрим на блок content_scripts .
- спички используются для активации расширения на определенных веб-страницах. В нашем случае цель состоит в том, чтобы активировать его всякий раз, когда документ в Документах Google открыт, поэтому URL-адрес https://docs.google.com/document/*
- js сообщает расширению, какой скрипт запускать при запуске части «совпадения». В нашем случае нам нужен jq.js (это сокращенная версия jQuery) и наш скрипт main.js, который содержит логику подсчета.
- run_at сообщает, когда загружать эти скрипты — в нашем случае, когда страница загружается и документ становится бездействующим.
Теперь, когда наша начальная загрузка завершена, мы должны построить HTML, который мы намереваемся добавить. Создайте файл statusbar.html и вставьте следующее содержимое:
<html>
<body>
<style type="text/css">
div#GDWC_statusBar {
width: 100%;
height: 18px;
background-color: #ebebeb;
border-top: 1px solid silver;
color: black;
position: fixed;
bottom: 0;
z-index: 25000;
text-align: right;
}
span.GDWC_statusBarCounter {
padding: 0 10px 0 10px;
line-height: 18px;
font-family: verdana;
font-size: 10pt;
}
span.GDWC_statusBarCounter a {
text-decoration: none;
color: black;
}
span.GDWC_statusBarSeparator {
border-left: 1px solid silver;
border-right: 1px solid silver;
margin: 0 1px;
display: inline-block;
width: 1px;
height: 10px;
}
</style>
<div id='GDWC_statusBar'>
<span class='GDWC_statusBarCounter'>
<a href='http://about.me/bruno.skvorc'>GDWC</a>
</span>
<span class='GDWC_statusBarSeparator'>
</span>
<span class='GDWC_statusBarCounter' id='GDWC_wordsTotal'>Warming up...</span>
</div>
</body>
</html>
Как вы можете видеть, если вы просто откроете файл в браузере, это не что иное, как серая полоса в нижней части экрана со ссылкой GDWC на sitepoint.com и текстом «Разминка…». Этот текст будет заменен подсчетом слов в JavaScript, и вот тут появится наш следующий файл, main.js.
Во-первых, загрузите файл jq.js в папку расширений (опять же, ссылка на эту загрузку появится в конце поста) или зайдите на jquery.com и получите новую. Затем создайте файл main.js и вставьте в него следующее содержимое:
$.get(chrome.extension.getURL("statusbar.html"), {}, function(data) {$('body').append(data);}, 'html');
Вы можете узнать, что это Ajax-вызов локального файла. Эта строка указывает расширению захватывать содержимое файла statusbar.html и вставлять его непосредственно перед конечным тегом body в документе. Поскольку CSS в файле .html определяет положение строки состояния на странице (фиксированной, над всем и снизу), это в основном завершает реализацию строки состояния с визуальной точки зрения. Вы можете попробовать и посмотреть, как это выглядит, перейдя в Инструменты -> Расширения и выбрав «Загрузить распакованное расширение». Выберите папку GDWC, нажмите «ОК» и обновите новый документ Google, чтобы увидеть его в действии.
Давайте добавим больше кода сейчас. Добавьте следующее к main.js:
chrome.extension.sendRequest({}, function(response) {});
Эта строка вызывает скрипт background.js и говорит ему показать иконку. Идите дальше и нажмите «Перезагрузить» под загруженным расширением в меню «Инструменты -> Расширения», затем обновите вкладку, на которой вы его тестировали. Значок должен появиться в адресной строке.
Теперь нам нужно посчитать слова, поэтому добавьте следующий код:
$(document).ready(function(){
countWords();
});
function countWords() {
var number = 0;
$('span.kix-lineview-text-block').each(function(i, obj){
number += $(obj).text().split(/s+/).length;
});
$('span#GDWC_wordsTotal').text(number + ' total words');
timeout = setTimeout('countWords()', 5000);
}
Как видите, мы сказали документу запускать функцию countWords, как только DOM будет готов. Я бы использовал события нажатия клавиш для подсчета слов при каждом изменении содержимого документа, но Google захватил все события по умолчанию (с помощью event.preventDefault), и это поведение, которое нельзя легко обойти. Таким образом, я выбрал тайм-аут, сказав countWords () в основном перезапускать себя каждые 5 секунд (см. Последнюю строку функции countWords ()).
Затем мы инициализируем номер локальной переменной и перебираем отрезки kix-lineview-text-block. Если вы осмотрите элементы сайта Google Docs, вы заметите, что эти промежутки являются реальными строками в документе — каждый промежуток имеет ширину документа, а каждая новая строка содержится в другом промежутке kix-lineview-text-block. Мы добавляем количество слов (мы считаем слова, используя разделение регулярных выражений) из каждого интервала к общему количеству. Вы можете удивиться, почему мы не просто берем текст всего документа и не разделяем его. Ну, так как каждая строка текста — это новый интервал, захват всего текста () всего документа объединит строки. Таким образом, если строка заканчивается словом «word», а следующая строка начинается с «count», вы фактически получите «wordcount», который считается как одно слово, таким образом смещая правильное общее количество слов на количество строк во всем документе. ,
Наконец, мы заменяем сообщение «Разогрев…» фактическим количеством слов.
Если вы перезагрузите расширение сейчас, вы заметите, что теперь вы создали полнофункциональное расширение Chrome. Чтобы распространить его среди других, просто заархивируйте папку и разошлите ее. Чтобы разместить его в Интернет-магазине Chrome (пожалуйста, не делайте этого), обратитесь к официальным руководствам по последним штрихам .
Вывод
Как видите, создание расширений для Chrome может быть довольно простым. То, что мы создали здесь, не является ни производственным (циклический счетчик замедлит ваш рабочий процесс на очень больших файлах), ни оптимизированным (все это можно было бы сделать без jQuery, несколько уменьшив размер файла, и счет должен быть выполнен постранично страница, пересчитывается только с текущей целевой страницы и далее), но это солидное введение в компоненты, которые делают тик расширения. В следующей части серии мы рассмотрим некоторые из необходимых оптимизаций и добавим еще больше функциональности.
Полный исходный код и связанные изображения можно скачать с github .