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

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

Идея за разтегателно легло (extendable bed idea)

Хрумна ми една идея за разтегателно легло и реших да я запиша. Някой ден може да реализирам или да направя нещо друго на базата на тази идея. Точно такова разтегателно легло не съм виждал, а мисля, че има смисъл в подобна конструкция. Може да се ползва в ограничени пространства или като легло за гости. Боунус е възможността за монтиране на голямо чекмедже. Ренднах в Blender няколко картинки, които показват, каква точно ми е идеята за разтегателно легло.
Това е свития, компактен вариант на леглото:
Разтегателно легло, extendable bed
Разтягането става, като се издърпа лявата страница:
Разтегателно легло, extendable bed
Разтегателно легло, extendable bed
Скарата на леглото е изградена от летвички 950x40x20mm, а материал примерно липа:
Разтегателно легло, extendable bed
Разтегателно легло, extendable bed
Разтегателно легло, extendable bed
Летвичките са разположени шахматно. На плъзгащата част е монтирана ограничаваща летвичка.
Разтегателно легло, extendable bed
Разтегателно легло, extendable bed
Матрака може да е двойно сгъваем с размери на отделните части 820x950x100mm. При разпъване се получава матрак 1900x820x100mm. За по-голямо удобство, след разтягане може да се метне отгоре един топ-матрак, примерно от тук:
топ матрак
Летвичките профил 4x2cm могат да се вземат от тук:
летвички липа 40x20x2000
Корпуса на леглото е проектиран от ЛПДЧ 18mm. Страниците и дъното на чекмеджето са проектирани от суров МДФ 12mm.
Има какво още да се помисли, като например при компактния вариант на леглото има луфт от страни между матраците и страницата. Като ми дойде музата, ще помисля, как мога да го подобря.

Ето и кратко видео, което показва цялата ми идея за разтегателно легло:

If your browser doesn’t support HTML5 video. Here is a link to the video instead.

Blender файл на проекта с размери 1:1: leglo_divan-82x190cm.zip