Chrome Extension – how to. Кратък урок за създаване на Chrome добавка.

Ще се опитам да опиша простичко, как се разработва прост extension add-on за Chrome. Понякога е много полезно да се работи с подобни скриптове, особено при скрапване на web-съдържание, когато конвенционалните методи не работят или изискват прекалено много усилия.
За да се създаде подобен скрипт с потребителски интерфейс ще са ни необходими няколко файла:
manifest.json – всяка добавка (extension) за Chrome (а и за другите браузери) съдържа подобен скрипт, който предоставя важна информация на браузера. Повече тук: Manifest File Format
popup.html – стандартно наименование на файла с потребителския интерфейс, който се появява при клик с мишката върху добавката. Разбира се, можем да създадем добавка, която няма нужда от потребителски интерфейс, но в случая аз искам да имам. Името на този файл се посочва в manifest.json.
popup.js – файл, който се зарежда чрез popup.html. Можем и да нямаме подобен файл и да поместим javascript кода направо в popup.html. Но тенденциите в модерното програмиране съветват да се диференцира всичко – стилове, скриптове, html. В моя случай popup.js е двигателя на Chrome добавката. Той посочва какво, кога и къде да се активира.
getPagesSource.js – файл за инжектиране в web-страницата и извлича информацията от нея. Този файл се зарежда от popup.js.
icon.png – някаква иконка, която да се показва в листата с добавките на Chrome.

Нека създадем скрипт, който извлиза съдържанието на определени тагове, като използваме javascript функцията querySelectorAll(). Много приятна функция, която заменя в известна степен нуждата от XPath при web-скрапинга.

Да започваме! Първо създаваме manifest.json, като описваме какво прави тая добавка:

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "Simple web scraper",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Get content from tags through querySelector",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": ["tabs", "<all_urls>"]
}

След това си правим потребителския интерфейс popup.html – бутончета, поленца, форми, стилове, каквото ни е кеф. В случая ще се огранича на минимума за моите нужди – текстово поле, бутон, слой за резултата:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html style=''>
<head>
 
</head>
<body style="width:400px;">
 
	<input type="text" id="selector" style="width:300px;" />
	<button id="getselector">Get Selector</button><br /><hr />
 
	<div id='message'>Injecting Script....</div>
 
	<script src='popup.js'></script>
</body>
</html>

В по-горния скрипт се вижда, че зареждам popup.js. Неговото съдържание е следното:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
chrome.runtime.onMessage.addListener(function(request, sender) {
  if (request.action == "getSlectedContent") {
    message.innerHTML = request.source;
  }
});
 
document.querySelector('#getselector').addEventListener('click', winLoad);
 
function winLoad() {
 
  var message = document.querySelector('#message');
  var inputSel = document.querySelector('#selector').value;
 
  var queryInfo = {
    active: true,
    currentWindow: true
  };
 
  chrome.tabs.query(queryInfo, function(tabs) {
    chrome.tabs.sendMessage(
      tabs[0].id, {
        customSelector: inputSel
      },
      function(response) {
    });
  });
 
  chrome.tabs.executeScript(null, {
    file: "getPageContent.js"
  }, function() {
    if (chrome.runtime.lastError) {
      message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
    }
  });
}

Чрез popup.js зарежда javascripta, който се инжектира в страницата – getPageContent.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
chrome.runtime.onMessage.addListener(function(request, sender) {
  selElements(document, request.customSelector);
});
 
function selElements(document_root, s){
 
  // Tova go dobaviam zaradi kefa da polzvam foreach() v JavaScript
  var forEach = function (array, callback, scope) {
    for (var i = 0; i < array.length; i++) {
    callback.call(scope, i, array[i]);
    }
  };
 
  var myNodeList = document.querySelectorAll(s);
  var concatenateall = '';
  forEach(myNodeList, function (index, value) {
    concatenateall = concatenateall + value.innerHTML + "<hr />";
  });
 
  // return concatenateall;
  chrome.runtime.sendMessage({
    action: "getSlectedContent",
    source: concatenateall
  });
}

Това е.
Сега остава да заредим добавката в Chrome. Това става като отворим More Tools -> Extensions. След това кликаме на бутона Load unpacked и избираме директорията с файловете на нашата добавка.
На базата на тази добавка могат да се направят много други, тъй като съдържа базата за писане на добавки за Chrome.

Сорс кода може да се изтегли от тук: Chrome_Extension-Simple.zip

Кратко видео, което показва как може да се ползва добавката:

PoetryHaxor for Linux

Скоро написах една програмка за търсене на рими – PoetryHaxor за Windows. Преработих програмката и за linux, но вместо C++ използвах Perl, че е доста по-лесен.
Работи нормално под Gnome среда, защото GUI-то ползва GTK2.
Тествана е под Debian 2.6.32-5-686 и Ubuntu 11.04 с десктоп Gnome 2.30.2.
Версия на интерпретатора: perl v5.10.1
Изглежда ето така:
PoetryHaxor for linux
За да се стартира програмата се стартира perl-файла poetryhaxor.pl. Това може да се направи по няколко начина. Примерно:

perl poetryhaxor.pl

или да я направим да се отваря с двоен клик:

chmod +x poetryhaxor.pl

Скрипта може да се изтегли от тук: PoetryHaxor 1.0
Ако все пак нямате инсталиран GTK2 на вашата дистрибуция, можете да го инсталирате така (за Debian базирани):

sudo apt-get install libgtk2.0-dev
sudo apt-get install libgtk2-perl

PoetryHaxor – програма за търсене на рими

Написах простичка програма за търсене на рими. Демек програма за поезия. Мислех си да го напасна по срички (имаше една тема в DBG като идея), но стигнах до извода, че няма прекалено много думи, които да съвпадат по срички, за да хвърля ресурси в тая насока.
Писах го на C++, пак с опреснителна цел, както и други проекти напоследък. Макар, че като погледна кода леко ме хваща сТрам :). Прилагам проекта със сорса и ако някой има желание, може да си го прекомпилира и оптимизира (минимум :)). Речника е отделен от exe-то и е обикновен текстов файл с много думи. Начоплил съм го от BGOffice Помощник.
Ето линк към програмката, “мечта” на всички поети :): PoetryHaxor_1.0
PoetryHaxor - програма за търсене на рими
Речника е доста сериозен, а програмката не е особено оптимизирана. В тоя смисъл, за да работи по-бързичко се иска по-съвременна машина, но мисля, че и на 1GHz с 1Gb ще върви що-годе с забавяне при търсенето 3-4 секунди.

Пренаписах програмата (на perl) за linux – PoetryHaxor for Linux.
PS: Благодарение на bvbfan от форума на linux-bg.org пренаписах програмата, като кеширах речника в паметта. Към момента не отчитам подобряване на бързодействието, но ще си мисля още по въпроса. Ето и версия 0.2 на програмата: PoetryHaxor-v.02

Написах нова версия на програмата – PoetryHaxor 3.0. Тази версия е писана на C# и изисква .Net фреймуърк. Речника е обогатен с двойно повече думи и търсенето на думи става за по-малко от секунда. Изстегляне: PoetryHaxor-v.03.