Ще се опитам да опиша простичко, как се разработва прост 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
Кратко видео, което показва как може да се ползва добавката: