Створення розширення браузера Google Chrome для отримання всіх зображень веб-сторінки. Частина 1
Розширення браузера - це web-програми, які встановлюються в web-браузер, щоб розширити його можливості. Зазвичай, для того, щоб скористатися розширенням, користувачеві потрібно знайти його в Chrome Web Store і встановити. У цій статті я покажу, як створити розширення для браузера Google Chrome з нуля. Це розширення буде використовувати API браузера, щоб отримати доступ до вмісту веб-сторінки будь-якої відкритої вкладки. За допомогою цих API можна не тільки читати інформацію з відкритих web-сайтів, але й взаємодіяти з цими сторінками, наприклад переходити за посиланнями або натискати на кнопки. Таким чином, розширення браузера можуть використовуватися для широкого кола завдань автоматизації на стороні клієнта, таких як web-scrape або навіть автоматизоване frontend тестування. Ми створимо розширення, яке називається Image Grabber. Воно буде містити інтерфейс для підключення до веб-сторінки та для вилучення з неї інформації про всі зображення. Далі при натисканні на кнопку "GRAB NOWсписок абсолютних URL цих зображень буде скопійовано в буфер обміну. У цьому процесі ви познайомитеся з фундаментальними будівельними блоками, які надалі можна буде використовувати для створення інших розширень. і можуть бути встановлені, наприклад, Yandex-браузер або Opera В результаті при правильному виконанні всіх кроків, ви отримаєте розширення, яке буде виглядати та працювати так, як показано на наступному відео:
Це лише перша частина історії. У другій частині я покажу, як розширити інтерфейс, щоб вивантажити всі або вибрані зображення у вигляді ZIP-архіву, а також як опублікувати своє розширення в Chrome Web Store.
Базова структура розширення
Розширення Google Chrome - це web-додаток, що містить будь-яку кількість HTML-сторінок, файлів CSS та зображень, а також файл manifest.json, Який визначає як розширення виглядає та працює. Всі ці файли мають бути в одній папці. Мінімальне розширення складається лише з одного файлу manifest.json. Ось приклад цього файлу, який ви можете використовувати як шаблон на початку створення будь-якого розширення:
< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": <>, "action": <>, "permissions": [], "background":<> >Тут тільки manifest_version повинен дорівнювати 3. Інші поля заповнюються довільно залежно від призначення розширення: name - Назва розширення, description - короткий опис, version - Версія. Інші параметри ми будемо заповнювати в процесі розробки інтерфейсу. Повний список параметрів manifest.json можна знайти у офіційній документації. Папка з одним файлом manifest.json - це мінімальне розширення, яке може бути встановлене в Google Chrome і запущене. Воно нічого не робитиме, проте саме з установки потрібно починати. Тому створіть папку image_grabber, потім додайте до неї текстовий файл manifest.json з наведеним вище вмістом.
Встановлення розширення
У процесі розробки розширення воно є папкою з файлами. У термінології Google Chrome це називається "unpacked extension". Після завершення розробки його потрібно запакувати в ZIP-архів і завантажити в Chrome Web Store, звідки воно потім може бути встановлене в браузер. Однак на етапі розробки "unpacked extension" теж можна встановити просто як папку з файлами. Для цього потрібно запровадити chrome://extensions у браузері, щоб відкрити Chrome Extensions Manager: Це покаже список встановлених розширень. Щоб встановити "unpacked extensions", увімкніть прапорець "Developer mode" у верхньому правому куті. Після цього має з'явитися панель керування розширеннями. Потім натисніть першу кнопку Load unpacked і вкажіть папку, де знаходиться розширення з файлом manifest.json. У нашому випадку це папка image_grabber. Розширення має відобразитися у списку: Ця панель повинна показувати дані розширення, такі як ім'я, опис та версію, раніше вказані в manifest.json, а також унікальний ідентифікатор, присвоєний цьому розширенню. Щоразу після зміни manifest.json та файлів, безпосередньо вказаних у ньому, потрібно оновлювати розширення у браузері, натискаючи на кнопку "Reload": Щоб запустити та використовувати встановлене розширення у браузері, натисніть кнопку Extensions на панелі інструментів Google Chrome поруч із URL і знайдіть "Image Grabber" у списку встановлених розширень: Також можна натиснути іконку Pin у списку поряд з розширенням, щоб додати кнопку даного розширення на панель Chrome, поряд з іншими розширеннями: Ось як виглядає мінімальне розширення – кнопка із сірим прямокутником та літерою всередині. При натисканні на цю кнопку нічого не відбувається. Давайте заповнимо інші поля файлу manifest.json, щоб змінити зображення розширення і змусити його виконувати потрібні дії.
Додавання іконок
Параметр icons файлу manifest.json приймає об'єкт JavaScript, ключами якого є розміри іконок, а значення шляху до файлів з цими іконками. Значок це зображення з розширенням PNG (для прозорості). Розширення повинно мати іконки різних розмірів: 16x16, 32x32, 48x48 та 128x128. Я створив іконки для всіх цих розмірів і помістив їх у папку.icons" всередині папки з розширенням. Зробіть те саме. Імена файлів можуть бути будь-якими:
< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": <>, "permissions": [], "background":<> >Як видно, тут вказані відносні шляхи файлів у папці icons. Після зміни manifest.json натисніть "Reload" на панелі розширення Image Grabber у Chrome Extensions Manager, щоб оновити встановлене розширення.Якщо все зроблено як описано вище, то картинка на кнопці розширення повинна змінитись: Так значно краще, проте коли ми натискаємо на цю кнопку все ще нічого не відбувається. Настав час додати "дії" (actions) до розширення.
Створення інтерфейсу розширення
- У фоні, при запуску розширення та при подальшій його роботі
- З інтерфейсу, коли користувач натискає кнопку розширення, а потім взаємодіє з різними інтерфейсними елементами.
Розширення може використовувати обидві ці можливості одночасно.
Щоб запускати дії у фоні, потрібно створити Javascript-файл та вказати шлях до нього у параметрі "background" файлу manifest.json. Цей скрипт може містити функції обробники різних подій браузера та життєвого циклу самого розширення. Background-скрипт слухає ці події та запускає написані для них функції обробники.
Однак у цьому розширенні ми користуватися цим не будемо і параметр "background" залишиться порожнім. Він присутній тільки для того, щоб показати, що це можливо, і що даний файл manifest.json може використовуватися для створення розширень будь-якого типу. Однак розширення Image Grabber виконує дії, тільки якщо користувач натискає кнопку "GRAB NOWз інтерфейсу.
Відповідно, ми створимо інтерфейс для розширення. Інтерфейс розширення це фактично Web-сайт, що складається з HTML-сторінок з елементами керування, CSS-таблиць стилів і скриптів, які реагують на події елементів керування з цих HTML-сторінок та виконують певні дії, використовуючи, зокрема, API розширень Google Chrome.
Інтерфейс повинен містити головну сторінку, яка з'являється під час натискання на кнопку розширення. Ця сторінка може з'являтися в новій вкладці браузера, або всередині спливаючого вікна, як було показано на відео. Саме так і буде реалізовано інтерфейс Image Grabber. Щоб створити інтерфейс спливаючого вікна, внесіть такі зміни до manifest.json:
< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": < "default_popup":"popup.html" >, "permissions": [], "background":<> >Тут визначено, що основна дія (action) розширення це спливаюче вікно (popup), яке містить сторінку popup.html.
Тепер створіть файл popup.html із заголовком Image Grabber та кнопкою "GRAB NOWі помістіть його в папку з розширенням:
Image Grabber
Image Grabber
Кнопка має ідентифікатор grabBtn який надалі використовуватиметься зі скрипту, щоб реагувати на натискання.
Щоб побачити, що змінилося, знову оновіть розширення у Chrome Extensions Manager. Якщо все було зроблено як написано вище, то при натисканні на іконку розширення буде з'являтися вміст popup.html у спливаючому вікні:
Працює!! Але виглядає не дуже. Тепер потрібно стилізувати цей інтерфейс за допомогою CSS.
Створіть файл popup.css з наступним вмістом і помістіть його в папку з розширенням:
Цей файл визначає стилі для кнопки та для body всієї сторінки: весь вміст вирівняно по центру, а також ширина вмісту буде 200 пікселів.
Додайте посилання на файл із цими стилями в popup.html:
Image Grabber
Image Grabber
Тепер при натисканні на кнопку розширення з'явиться стилізований інтерфейс:
Зверніть увагу, що в цьому випадку не потрібно натискати кнопку Reload, щоб оновити розширення. Зміни у файлах веб-інтерфейсу розширення починають працювати автоматично.
Щоб надати інтерфейсу завершеності, додамо JavaScript-код, який буде реагувати на натискання кнопки "GRAB NOW". Створіть файл popup.js у папці з розширенням з таким вмістом:
const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < alert("CLICKED"); >)і додайте посилання на цей файл у popup.html:
Image Grabber
Image Grabber
Таким чином ми додали подію onClick для кнопки з ідентифікатором "grabBtn". Тепер, при натисканні на кнопку "GRAB NOWв інтерфейсі, має з'являтися попередження "CLICKED".
В результаті ми маємо таку файлову систему розширення:
Це все файли, інших більше не будемо додавати. Таку структуру можна використовувати як базу для створення розширень Google Chrome з інтерфейсом, що базується на спливаючих вікнах.
Тепер реалізуємо бізнес логіку розширення: при натисканні на кнопкуGRAB NOWРозширення повинно отримати список шляхів до всіх картинок поточної сторінки в браузері і скопіювати цей список у буфер обміну.
Функція "GRAB NOW"
Використовуючи Javascript у розширенні можна робити те ж саме, що і при використанні JavaScript на web-сайті, наприклад відкривати різні web-сторінки з поточної або робити AJAX HTTP-запити до різних серверів. Але на додаток до цього Javascript-код у розширенні браузера може використовувати різні API Chrome для взаємодії з компонентами самого браузера. Більшість цих API доступні через простір імен chrome. Зокрема, розширення Image Grabber буде використовувати такі API:
- chrome.tabs – Chrome Tabs API. Використовується для доступу до активної вкладки браузера.
- chrome.scripting – Chrome Scripting API. Використовуватиметься для впровадження коду JavaScript на веб-сторінку активної вкладки та для виконання цього коду в контексті цієї сторінки.
Отримання необхідних дозволів
За умовчанням, з міркувань безпеки розширення Chrome не має доступу до всіх API браузера. Необхідно запитати цей доступ через механізм дозволів. Для цього потрібно вказати список необхідних дозволів у параметрі permissions у файлі manifest.json. Існує безліч різних дозволів, які описані тут: https://developer.chrome.com/docs/extensions/mv3/declare_permissions/. Для Image Grabber потрібно вказати такі:
- activeTab - дозвіл для отримання доступу до поточної вкладки браузера.
- scripting - дозволяє отримати доступ до Chrome Scripting API для виконання скриптів у контексті Web-сторінки, відкритої в браузері.
Додайте ці дозволи до параметра permissions у файлі manifest.json:
< "name": "Image Grabber", "description": "Extract all images from current web page", "version": "1.0", "manifest_version": 3, "icons": < "16":"icons/16.png", "32":"icons/32.png", "48":"icons/48.png", "128":"icons/128.png" >, "action": < "default_popup":"popup.html", >, "permissions": ["scripting", "activeTab"], "background":<> >та оновіть розширення у Chrome Extensions Manager.
Тим часом, листинг вище – це остаточний варіант файлу manifest.json для розширення.
Отримання інформації про активну вкладку браузера
Для отримання інформації про вкладки браузера використовується функція chrome.tabs.query, яка визначена таким чином:
chrome.tabs.query(queryObject,callback)- queryObject - об'єкт запиту, у якому вказуються параметри пошуку потрібних вкладок.
- callback - функція зворотного дзвінка, яка виконується після виконання цього запиту. використовуватиметься для виконання Javascript-коду на цій вкладці.
Тут я не буду повністю описувати синтаксис queryObject , а також всі поля об'єктів Tabs , що повертаються . https://developer.chrome.com/docs/extensions/reference/tabs/.
Для розширення Image Grabber потрібно отримати лише активну Для цієї мети queryObject повинен бути визначений як: .
Тепер давайте змінимо код обробника натискання кнопки grabBtn в popup.js щоб він отримував активну вкладку та її ідентифікатор, коли користувач натискає кнопку "GRAB NOWв інтерфейсі розширення: Цей код виконує запит до всіх вкладок, які активні. Можливо лише одна така вкладка, тому до неї можна звернутися як tabs[0]. Якщо така вкладка існує, функція відображає її id, а якщо немає, то показує повідомлення про помилку. Якщо все зроблено як описано вище, при натисканні кнопки GRAB NOW повинен з'являтись ідентифікатор поточної вкладки браузера. Далі ми змінимо цей код таким чином, щоб цей ідентифікатор використовувався для доступу до веб-сторінки, відкритої на цій вкладці. Розширення може взаємодіяти з відкритими сторінками за допомогою Chrome Scripting API, доступного через chrome.scripting . Зокрема, ми будемо використовувати функцію для впровадження свого коду у поточну web-сторінку та для виконання цього коду у її контексті. При запуску цей код матиме доступ до DOM-дерева цієї сторінки і зможе робити потрібні нам дії з будь-якими HTML-тегами. Для впровадження скрипту в сторінку Web-браузера використовується функція executeScript, визначена таким чином: Розглянемо її параметри. injectSpec Це об'єкт типу ScriptInjection. У ньому визначається який Javascript-код, яку веб-сторінку і як впровадити. Зокрема, у параметрі target вказується ідентифікатор вкладки браузера зі сторінкою, яка нам потрібна. Ми отримали його раніше. Інші параметри вказують, яким чином передати скрипт на цю сторінку. Можна використовувати такі параметри для передачі скрипту: Скрипт, який планується впровадити, витягуватиме список зображень з web-сторінки та повертатиме список URL цих зображень. Це невеликий скрипт, тож достатньо створити функцію для нього.Вона називатиметься grabImages . Ця функція повинна отримувати список URL зображень веб-сторінки та повертати його. Значення цієї функції буде передане розширенню. У результаті injectSpec буде визначено наступним чином: Тут функція, вказана у параметрі func, буде впроваджена на сторінку, визначену параметром target . У параметрі target вказується отриманий на попередньому етапі ідентифікатор вкладки, а також встановлюється параметр allFrames . Цей додатковий параметр говорить, що скрипт повинен виконуватися у всіх кадрах web-сторінки, якщо вони на цій сторінці є. Саму функцію grabImages ми напишемо трохи згодом. callback Це функція зворотного дзвінка, яка буде викликана після того, як впроваджений скрипт виконається на сторінці та у всіх її кадрах. Як параметр у ній буде масив результатів, які повернула функція grabImages для кожного кадру (можливо це буде лише один елемент, якщо кадрів немає). Кожен елемент цього масиву - це об'єкт типу InjectionResult. Він зокрема містить властивість result. Саме воно містить те, що повертає функцію схопленнязображень, тобто. список URL. Тепер зберемо все разом у наступному коді: Функція grabImages може бути визначена так: Тут все просто: отримуємо список DOM-елементів Після того, як ця функція виконається в кожному кадрі, результати будуть об'єднані в єдиний масив і передані в функцію onResult . Ця функція може бути визначена таким чином: Слід згадати, що не всі вкладки браузера - це вкладки з web-сторінками. Наприклад, можливо вкладка властивостей браузера. Сторінки на таких вкладках не мають властивості document. У цьому випадку функція grabImages не виконається та не поверне результатів. Цей випадок обробляється на початку функції.Потім масив результатів масивів об'єднується в єдиний плоский масив використовуючи концепцію map/reduce, потім функція window.navigator.clipboard використовується, щоб скопіювати його в буфер обміну. Попередньо масив результатів перетворюється на рядок, розділений символом перекладу рядка. Тут я описав лише незначну частину Chrome Scripting API та описав лише в контексті даного розширення. Повна документація по Chrome Scripting API доступна тут: https://developer.chrome.com/docs/extensions/reference/scripting/. Тепер трохи почистимо код. Тут я вважаю за потрібне частина функції обробника grabBtnяка виконує chrome.scripting.executeScript винести в окрему функцію execScript. В результаті файл popup.js виглядає так: Тепер, якщо натиснути на значок розширення Image Grabber і потім натиснути кнопку GRAB NOW, то в буфері обміну буде список URL всіх зображень поточної web-сторінки. Можна вставити його до будь-якого текстового редактора. Спочатку, можливо, непогано, але практична цінність такого розширення не велика. Тому в наступній частині я покажу як вивантажити всі ці зображення у вигляді zip-архіву, а також створити додатковий інтерфейс, для того щоб вибрати які картинки додавати в цей ZIP-архів, а які ні. Також опишу процес публікації готового розширення у Chrome Store. Тому підписуйтесь, думаю до кінця наступного тижня друга частина буде доступна разом із повним вихідним кодом. Друга частина опублікована та доступна тут. Тема створення розширень досить добре розкрита у мережі, є безліч статей, документації на цю тему. Але я не знайшов жодного ресурсу, який би описав процес створення розширення від початку до кінця. Я збираюся виправити цю ситуацію, і розповісти про те, як створити розширення, як зберігати, читати налаштування, як додати підтримку кількох мов. Для роботи з розширеннями потрібно переключити канал оновлень на Dev або Beta. Розширення міститиме сторінку налаштувань (options), де можна буде вибрати мову інтерфейсу (російська, англійська) і вибрати розмір картинки (маленький, великий). Створення розширення починається зі створення папки, в якій ми будемо створювати всі необхідні для розширення файли. Побудуємо папку HubblePics. Далі створимо файл, який міститиме опис нашого розширення — manifest.json. Цей файл є обов'язковим для кожного розширення. Саме з нього Chrome отримує всю необхідну інформацію про розширення (назва, версія, роздільна здатність, сторінки розширення і т.д.).
"permissions" : [ "browser_action" : < // Елементи браузера "options_page" : "options.html" // Сторінка налаштувань * Цей source code був highlighted with Source Code Highlighter. Детальний опис файлу manifest.json ви можете отримати тут Створимо сторінку налаштувань options.html. Наводити повний код сторінки я не буду, тільки цікаві, на мій погляд, моменти, а саме збереження, вилучення налаштувань і локалізація. Зберегти налаштування можна в об'єкті localStorage, який, по суті, є асоціативним масивом, що зберігає пари «назва», «значення». Наприклад, для збереження стану радіокнопки "Розмір картинки - Маленький", використовується код: Для відновлення стану:const grabBtn = document.getElementById("grabBtn"); < alert(tab.id) >else < alert("There no active tabs") >>) >)Вилучення зображень із поточної сторінки
chrome.scripting.executeScript(injectSpec,callback)
const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < chrome.tabs.query(, function(tabs) < var tab = tabs[0]; if (tab) < chrome.scripting.executeScript( < target:, func: grabImages >, onResult ) > else < alert("There no active tabs") >>) >) function grabImages() < // TODO - Запросити список зображень // і повернути список їх URL >function onResult(frames) < // TODO - Об'єднати списки URL, отриманих з кожного кадру в один, // потім об'єднати в рядок, розділену символом перекладу рядка // і скопіювати в буфер обміну >/** * Функція виконується на віддаленій сторінці браузера, * отримує список зображень та повертає масив * шляхів до них * * @return Array масив рядків */ function grabImages() < const images = document.querySelectorAll("img"); return Array.from(images).map(image=>image.src); >і отримуємо властивість src кожного їх у підсумковий масив. Вважаю за потрібне нагадати, що об'єкт document , вказаний у цій функції вказує на вміст не тієї HTML-сторінки, де знаходиться функція grabImages , а віддаленої web-сторінки, в яку ця функція буде впроваджена.
/** * Виконується після того, як виклики grabImages * виконані у всіх кадрах віддаленої web-сторінки. * Функція об'єднує результати в рядок і копіює * список шляхів до зображень у буфер обміну * * @param <[]InjectionResult>frames Масив результатів * функції grabImages */ function onResult(frames) < // Якщо результатів немає if (!frames || !frames.length) < alert("Could not retrieve images from specified page"); return; >// Об'єднати списки URL з кожного кадру в один масив const imageUrls = frames.map(frame=>frame.result) .reduce((r1,r2)=>r1.concat(r2)); // Скопіювати в буфер обміну отриманий масив // об'єднавши його в рядок, використовуючи символ перекладу рядка // як роздільник window.navigator.clipboard .writeText(imageUrls.join("\n")) .then(()=>< / / Закрити вікно розширення після // завершення window.close(); >Завершальні штрихи
const grabBtn = document.getElementById("grabBtn"); grabBtn.addEventListener("click",() => < // Отримати активну вкладку браузера chrome.tabs.query(, function(tabs) < var tab = tabs[0]; // і якщо вона є, то виконати на ній скрипт if (tab) < execScript(tab); >else < alert("There are no active tabs") >>) >) /** * Виконує функцію grabImages() на веб-сторінці вказаної * вкладки та у всіх її кадрах, * @param tab Об'єкт вкладки браузера */ function execScript(tab) < // Виконати функцію на сторінці вказаної вкладки // і передати результат її виконання на функцію onResult chrome.scripting.executeScript( < target:, func:grabImages >, onResult ) > /** * Отримує список абсолютних шляхів всіх картинок * на віддаленій сторінці * * @return Array Масив URL */ function grabImages() < const images = document.querySelectorAll("img"); return Array.from(images).map(image=>image.src); > /** * Виконується після того, як виклики grabImages * виконані у всіх кадрах віддаленої web-сторінки.* Функція об'єднує результати в рядок і копіює * список шляхів до зображень у буфер обміну * * @param <[]InjectionResult>frames Масив результатів * функції grabImages */ function onResult(frames) < // Якщо результатів немає if (!frames || !frames.length) < alert("Could not retrieve images from specified page"); return; >// Об'єднати списки URL з кожного кадру в один масив const imageUrls = frames.map(frame=>frame.result) .reduce((r1,r2)=>r1.concat(r2)); // Скопіювати в буфер обміну отриманий масив // об'єднавши його в рядок, використовуючи повернення каретки // як роздільник window.navigator.clipboard .writeText(imageUrls.join("\n")) .then(()=>< // закрити вікно розширення після завершення window.close(); >Висновок
Створення розширення для Google Chrome
Розширення матиме кнопку з іконкою на панелі інструментів Chrome. При натисканні на кнопку з'являтиметься спливаюче вікно (popup) з випадковою картинкою з галереї фотографій телескопа Hubble. У верхній частині вікна будуть розміщені кнопки: налаштувати (Показати сторінку налаштувань), оновити (показати іншу фотографію), закрити (Закрити спливаюче вікно). "name": "Hubble pictures extension", // Назва розширення
"version" : "1.0" // Номер версії
"description" : "Hubble pictures extension", // Опис розширення
"tabs", // Дозволити розширенню працювати з вкладками
"http://hubblesite.org/*" // Дозволити розширенню звертатися до вказаної адреси
],
"default_title": "Hubble", // Назва кнопки
"default_icon" : "images/icon.png" , // Іконка для кнопки
"popup" : "popup.html" // Спливне вікно
>,
>Налаштування
document .getElementById("previewSmall"). checked = (localStorage[ "previewSmall" ] == "true" ) ? true: false;
У своєму проекті я обернув звернення до localStorage у функцію readProperty щоб позбутися зайвих перевірок та отримати можливість отримання значення за умовчанням:
функція readProperty(property, defValue)
if (localStorage[property] == null )
return defValue;
>
// Приклад виклику
document .getElementById("previewSmall"). checked = readProperty("previewSmall", true);
* Цей source code був highlighted with Source Code Highlighter.
Локалізація
З налаштуваннями розібралися, приступимо до локалізації. Спосіб, який я пропоную, можливо, не найкращий, але на даний момент нічого кращого я придумати не зміг. Якщо хтось підкаже інший, простіший варіант — буду радий.
Ідея проста – є низка елементів, які потрібно перекласти. Вони мають ідентифікатори. Створюється асоціативний масив чи об'єкт, у якому ідентифікатор елемента відповідає локалізований текст. Функція, яка займається локалізацією «пробігає» масивом, за ідентифікатором знаходить контроль і встановлює йому текст.
Створимо файл із назвою елементів та вказівкою мови. Мова «реєструється», шляхом додавання елемента в список «Мова», що випадає. Наприклад, російська мова додає до списку елемент з текстом «Russian» і значенням «ru_RU».
Файл \locale\ru_UA\options.js
lang_ua_UA =
lngLanguage: "Мова", // Пара - ідентифікатор (id) елемента, текст
lngPreviewSize: "Розмір картинки" ,
lngPreviewSmall: "Маленький" ,
lngPreviewBig: "Великий" ,
lngSave: "Зберегти" ,
lngExit: "Вихід"
>
функція RegisterLang()
var ctrl = document .getElementById("language");
ctrl.add(createOption( "Russian", "ru_RU"));
>
* Цей source code був highlighted with Source Code Highlighter.
Цей скрипт додається до сторінки налаштувань (options.html)
На сторінці всі елементи, що локалізуються, повинні мати відповідні ідентифікатори, наприклад:
Локалізацією займається функція localize
function getSelectedLanguage()
var lang = getSelectedValue("language"); // Повертає значення вибраного елемента у списку "Language", що випадає
return eval("lang_" + lang);
>
function localize()
var lang = getSelectedLanguage();
// Перебираємо всі елементи об'єкта lang_ua_UA
for (var ctrlId in lang)
var value = lang [ctrlId];
// Отримати елемент з id
var ctrl = document .getElementById(ctrlId);
// Не знайдено, продовжуємо перебір
if (ctrl == null )
continue;
>
// Знайдено, визначити тип і присвоїти значення
if (ctrl.tagName == "SPAN" )
ctrl.innerText = value;
>
else if (ctrl.tagName == "INPUT" )
ctrl.value = value;
>
>
>
* Цей source code був highlighted with Source Code Highlighter.
Тепер, якщо нам необхідно додати нову мову, наприклад англійську, ми просто створюємо папку \locale\en_US, у ній створюємо скрипт options.js
lang_en_US =
lngLanguage: "Language" ,
функція RegisterLang()
var ctrl = document .getElementById("language");
if (ctrl! = null)
ctrl.add(createOption( "English", "en_US"));
>
>
* Цей source code був highlighted with Source Code Highlighter.
І додаємо скрипт на сторінку
Спливне вікно
Усередині файлу popup.html проста розмітка, в якій передбачено місце для завантаження картинки, кнопки управління та індикатор процесу завантаження.
* Цей source code був highlighted with Source Code Highlighter.
Загалом нічого цікавого. Все цікаво винесено у файл popup.js.
Даний скрипт, використовуючи XMLHttpRequest завантажує сторінку hubblesite.org/gallery/wallpaper, знаходить посилання на зображення, вибирає випадкове та відображає у popup-і.
xhr.onreadystatechange = function() if (xhr.readyState == 4)
if (xhr.responseText)
var xmlDoc = xhr.responseText;
var imgs = xmlDoc.match(/http:\/\/imgsrc.hubblesite.org\/hu\/db\/images\/hs-[0-9]-[0-9]-[a-z]/g) ;
var hrefs = xmlDoc.match(/gallery\/wallpaper\/pr[0-9][a-z]/g);
if (imgs.length > 0)
var randIdx = Math.floor(Math.random() * imgs.length);
var imgSize = "-wallpaper_thumb.jpg";
// Яку картинку показуємо?
if (readProperty( "previewBig" , "false" ) == "true" )
imgSize = "-640_wallpaper.jpg";
>
showImage("http://hubblesite.org/" + hrefs[randIdx], imgs[randIdx] + imgSize);
>
>
>
xhr.open( "GET", "http://hubblesite.org/gallery/wallpaper/", true);
xhr.send(null);
function showImage(url, imgSrc)
var imgPlace = document .getElementById("imgPlace");
imgPlace.setAttribute( "src", imgSrc);
var hrefPlace = document .getElementById("hrefPlace");
hrefPlace.setAttribute( "href", url);
* Цей source code був highlighted with Source Code Highlighter.
Установка та упаковка розширення
Розширення створено, тепер потрібно завантажити його в Chrome. Налаштування та керування , вибираємо пункт меню Extensions.
На вкладці, що відкрилася, натискаємо Load Extension. , вказуємо шлях до папки та, якщо все зроблено правильно, бачимо нову кнопку на панелі інструментів.
А у списку розширень бачимо наше розширення.
Тепер запакуємо наше розширення, щоб його можна було викласти на який-небудь ресурс і будь-який користувач міг би завантажити і встановити його в пару кліків. Installed Extensions натискаємо кнопку Pack Extension. , вказуємо шлях до папки, що містить файли розширення, поле Private key file Вперше залишаємо порожнім.
Натискаємо OK, бачимо повідомлення про те, що розширення упаковано.
Якщо ми збираємося випускати оновлені версії розширення – збережемо створений файл із ключем HubblePics.pem і будемо вказувати шлях до нього при кожній наступній упаковці розширення, інакше кожен раз буде генеруватися новий файл, що призведе до призначення нового ідентифікатора для нашого розширення, а це, в свою чергу, призведе до того, що замість оновлення, користувач встановлюватиме нову копію розширення.
Майже вся інформація, необхідна для розробки розширень, зосереджена на сторінці Google Chrome Extensions: Developer Documentation. Якщо цього здасться мало, завжди можна взяти готове розширення, змінити розширення з crx на zip, розпакувати та подивитися як це зроблено «у них».
Також джерелом інформації, так би мовити, з перших рук, може стати перелік змін при виході нових версій Google Chrome.
