Писане на разширения за chrome. Накратко за създаването на разширения за Chrome. Създаване на приложение за Google Chrome

Писането на разширение за google chrome не е трудно. Но когато пишете първото разширение, може (и възникват) въпроси. Повечето ръководства за писане на първото разширение са предназначени да използват манифеста на първата версия, чиято поддръжка ще спре в близко бъдеще.

Тази статия ще обхване:

• Как да създадете манифест v.2
• Как да работим с отдалечени ресурси
• Как да работите с бисквитки
• Как да работите с локално хранилище
• Как се работи с известия

До края на статията ще имаме готово разширение за органайзер, което ще има поле за добавяне на нова задача, както и списък със задачи за текущия ден. Нека очертаем всички изисквания към организатора:

• Трябва да има поле за добавяне на събитие (дата, час, събитие)
• Трябва да показва всички задачи за текущия ден, сортирани по време
• Всички минали събития трябва да се показват задраскани
• Трябва да има поле за въвеждане на време за колко време да се показва известието, както и поле за отметка, което позволява и забранява показването на известия
• Трябва да показва известие за предстоящо събитие определено време преди събитието

Нека започнем да създаваме разширението от самото начало, тоест от манифеста. Манифестът е същият файл, в който са записани всички параметри на разширението. Име, описание, версия, разрешение за достъп до сайтове, разрешение за използване на бисквитки, известия, локално съхранение. Като цяло манифестът е мозъкът на експанзията. Създайте файл manifest.json. Манифестът е единственият файл, който трябва да има предварително дефинирано име; всички останали файлове могат да се наричат ​​както желаете. Този файл има три задължителни полета:

manifest.json

(„име“: „Разширение на организатора“, // Име на разширението „версия“: „1.0“, // Версия на разширението. „manifest_version“: 2 // Версия на манифеста)

Тук има няколко правила:

• Версията на манифеста трябва да бъде цяло число, тоест трябва да бъде написана като 2, а не като „2“.
• Версията на разширението трябва да бъде низ, но да съдържа само числа и точки, тоест „1.0“ е добро, но 1.0 и „0.9 бета“ са лоши.

Със задължителните полета - това е всичко, нека да преминем към създаването на изскачащия прозорец на разширението. За да се отвори прозорец, когато щракнете върху икона, трябва да добавите полето „browser_action“ към манифеста.

manifest.json

( ... "browser_action": ( "default_title": "Отворете организатор", // Заглавие. Вижда се, ако задържите курсора на мишката върху иконата в браузъра "default_icon": "icon_small.png", // Път до разширението икона "default_popup": " popup.html" // Път до страницата с изскачащия прозорец ) )

Сега нека създадем изскачащ прозорец. Това е обикновена html страница, която може да бъде с всякакъв размер и цвят, без трикове. Нека наречем файла „popup.html“. Не е достатъчно да създадете този файл - той трябва да бъде посочен в манифеста. Това направихме: "default_popup": "popup.html".

popup.html

Работи!

Сега е време да тестваме функционалността на нашето разширение. За да направите това, изтеглете разширението в браузъра. Отворете менюто с разширения в Chrome. Поставяме птицата в „Режим за програмисти“.

След това ще се появят три бутона. Кликнете върху „Зареждане на разопаковано разширение...“. Изберете папката с файловете с разширение. След това ще се появи нашето разширение. Ако всичко е правилно, когато щракнете върху иконата, ще се появи прозорец:

Сега можем да стигнем до забавните неща. Нека свържем два javascript файла. Първият е popup.js, вторият е jquery. С първия няма да има проблеми, но ще свържем jquery не локално, а отдалечено, взето от ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js. Проблемите възникват от факта, че по подразбиране разширението няма достъп до ресурси на трети страни. За да получите достъп, трябва да го посочите в манифеста. Достъпът до нещо е посочен в полето „разрешения“. Освен това за отдалечени скриптове и css трябва да посочите наличните отдалечени ресурси.

manifest.json

( ... "разрешения": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self "")

Сега нека свържем тези скриптове към popup.html

popup.html

Като използвате хранилище в Chrome, можете да съхранявате потребителски данни. И именно в хранилището нашето разширение ще съхранява бъдещи събития. Причините за това са две. Първо, данните, съхранявани в хранилището, могат да бъдат синхронизирани, ако влезете в браузъра. И второ, данните могат да се съхраняват не само като низ, както при бисквитките, но във всякаква форма, тоест могат да се съхраняват както масиви, така и обекти. За да работи това, нека отворим достъп до хранилището в манифеста.

manifest.json

( ... "разрешения": [ ... "съхранение" ] ... )

Сега нека преработим изскачащия прозорец. В изскачащия прозорец ще има поле с днешна дата, три входа за дата, час и описание на новото събитие, бутон за добавяне на ново събитие, както и списък с всички събития за днес.

popup.html

Дата

И веднага добавете показване на дата в блока #today_date.

popup.js

$(function())( var today = new Date(); $("#today_date").html(today.getDate()+"."+(parseInt(today.getMonth())+1)+". " + today.getFullYear()); )

Трябва да изглежда така:

Така че, когато щракнем върху бутона „+“, трябва да се добави събитие. В началото на файла ще декларираме глобална променлива за съхранение - обект за работа със съхранение, както и глобален масив от задачи за съхранение на събития.

popup.js

Var storage = chrome.storage.sync; var tasks = new Array(); $(function())( … $("#add_task").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date").val(), " дата" ); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task | | ! new_task.date || !new_task.task)( return false; ) tasks = new_task; storage.set(( tasks:tasks )); )); ));

Функцията за валидиране проверява дали датата е написана във формат d.m.yyyy, а часът във формат hh:mm, както и дали описанието на събитието съдържа поне три знака.

popup.js

Var validateField = function(val, type)( if(type == "date")( var date = val.split("."); var year = new Date(); year = year.getFullYear(); if( date.length == 3 && parseInt(date) == date && date = 3)( return val; ) return null; )

Подредихме добавянето, нека да преминем към получаване на събития за днес. За да направим това, трябва да вземем всички събития от базата данни, да изберем само днешните събития от всички тях и да ги сортираме по време във възходящ ред.

popup.js

$(function())( … var now_hours = today.getHours()< 10 ? "0" + today.getHours() : today.getHours(); var now_minutes = today.getMinutes() < 10 ? "0" + today.getMinutes() : today.getMinutes(); var now_time = now_hours + "" + now_minutes; storage.get("tasks",function(items){ if(items.tasks){ tasks = items.tasks; var today_tasks = getTodayTasks(tasks); if(today_tasks.length >0)( for(var i in today_tasks)( var this_time = today_tasks[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+today_tasks[i].time+" "+today_tasks[i].task+""; $("ul").append(add_html); ) ) ) )); … ));

Функцията getTodayTasks() връща само събития с днешна дата от общия списък.

popup.js

Var getTodayTasks = function(tasks)( var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(today.getMonth() + 1)+ "." + today.getFullYear(); for(var i in tasks)( if(tasks[i].date == днешна_дата)( today_tasks = tasks[i]; ) ) if(today_tasks.length > 0)( today_tasks = sortTasks( днешни_задачи); ) върне днешни_задачи; )

Функцията sortTasks() сортира събития във възходящ ред по време.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 0)( var swapped = true; while (swapped) ( swapped = false; for (var i=0; i< tasks.length-1; i++) { var this_time = tasks[i].time.replace(":", ""); var next_time = tasks.time.replace(":", ""); if (this_time >next_time) ( var temp = tasks[i]; tasks[i] = tasks; tasks = temp; swapped = true; ) ) ) върне задачи; )

Време е да конфигурирате показването на известия на екрана. Нека добавим специално квадратче за отметка към изскачащия прозорец. Ако това квадратче има отметка, ще се показват известия; ако не е отметнато, те няма да се показват. Ще добавим и въвеждане на текст. Числото в този вход ще покаже колко време преди събитието ще бъде показано известието. Тоест, ако имаме планирано събитие за 19:00, този текст ще съдържа 5, което означава, че известие ще се появи в 18:55. Нека добавим код с тези входове към popup.html

popup.html

Показване на известия

Сега нека разберем как ще работи това. Когато щракнете върху квадратче за отметка, неговият отметнат атрибут ще бъде маркиран и стойността на атрибута ще бъде записана в бисквитката „show_notifications“. Да преминем към въвеждането на текст. Когато стойността му се промени, новата стойност ще бъде валидирана, ако е цяло число и не повече от 120, ние записваме новата стойност в бисквитката „when_to_notify“.

Но за да работи това за нас, трябва да отворим достъп до бисквитките. За да направите това, отидете на manifest.json и го добавете към „разрешения“

manifest.json

( ... "разрешения": [ ... “бисквитки” ] ... )

Сега можете да стартирате скрипта. Да отидем на popup.js. Първо, нека зададем първоначалните стойности във входовете. По подразбиране квадратчето за отметка не е отметнато, т.е. известията не се показват и времето е 0. Когато щракнете върху квадратчето за отметка, стойността на бисквитката „show_notifications“ ще се промени. При промяна на стойността в текстовото поле, стойността на бисквитката „when_to_notify“ ще се промени.

popup.js

$(function())( setCheckbox(); setWhenToNotify(getCookie("when_to_notify")); ... $("#show_notifications").click(function())( setCookie("show_notifications", document.getElementById(" show_notifications" ).проверено); )); $("#when_to_notify").change(function())( setWhenToNotify($(this).val()); )); ));

Нека разгледаме по-отблизо функциите. Да започнем с функциите за работа с бисквитки. IN в такъв случайготовите функции са взети от w3schools.com.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *Взето от http://www.w3schools.com/js/js_cookies.asp */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays); var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()); document.cookie=c_name + "=" + c_value; ) var getCookie = function(c_name)(Call Vasya P. /* *Взето от http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ;"); за (i=0;i

За да стане по-ясно, вмъкнах описание на кода в самия HTML. Организирам менюто просто: поставям връзка за вътрешно разширение на снимката.

Тъй като започнах с popup.html, веднага ще ви разкажа за popup.js

Изглежда ми доста просто:

popup.js
var xhr = нов XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["lostlogin"], true); // тук има GET заявка към посочената страница xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // ако всичко е минало добре, изпълнете това, което е в скоби ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // добавяне на получения код към блока с id=dannie ) ) xhr.send();

Включих и описание на кода.

Дизайнът, описан по-горе, ви позволява да изтегляте и показвате съдържание от вашия или може би не от вашия сайт. Но какво е важно да знаете:
- В манифестния файл не забравяйте да напишете в полето за разрешения адреса на сайта, от който ще бъде взета информацията.
- Файлът popup.js е свързан към фоновия скрипт background.js, т.к данните, въведени в локалното хранилище във background.js, също се виждат в popup.js.

Преди да разгледаме файла на фоновия скрипт background.js, нека да разгледаме файла на скрипта, който се изпълнява на всяка страница поотделно: content.js

За мен изглежда така:

content.js
функция onBlur() ( // прозорецът губи фокус chrome.runtime.sendMessage((site:sait,time:localStorage)); // изпраща съобщение до background.js localStorage = "0"; ) window.onblur = onBlur; // ако прозорецът загуби фокус функция sec() // изпълнява се всяка секунда ( if(document.webkitVisibilityState == "visible") // ако страницата е активна ( localStorage = parseInt(localStorage,10) +1; // актуализиране данни за сайта в локално хранилище ) ) var sait=location.hostname; // на кой сайт се намира скриптът localStorage = "0"; setInterval(sec, 1000); // изпълнява функцията всяка секунда

Най-интересната точка от моя сценарий според мен трябва да бъде:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Тук се изпраща съобщение до фоновия скрипт, а именно две променливи: site:sait - съдържа адреса на сайта, на който скриптът
time:localStorage - количеството време, прекарано на този скрипт.

background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) ( var a = request.site; // данни за сайта var b = request.time; // данни за прекарано време // тук правим какво с тези данни, които искаме. ));

Ето я всъщност. Няма да навлизам в подробности, защото... по принцип това не е необходимо. Достатъчно е да знаете ясен пример, за да реализирате плана си. Ако добавите някакви данни към локалното хранилище в скрипта background.js (както и бисквитки, уеб sql), тогава същите данни могат да се използват в скрипта popup.js.

Това е общо взето всичко, което исках да ви кажа за създаването на разширението, но ще засегна още една точка, в която имах затруднения.

На страницата с настройки трябваше да организирам плъзгането и пускането на сайтове в различни колони.

защото след това данните се вмъкват с помощта на InnerHtml тази възможностпросто няма да се появи. Ето какво трябваше да организираме:

$("#dannie").on("mouseover", ".sait", function() ( $(this).css(("border":"3px solid #ffffff")); )); $("#dannie").on("mouseout", ".sait", function() ( $(this).css(("border":"3px solid black")); )); $("#dannie").on("mousedown", ".sait", function() ( $(this).css(("border":"3px solid black")); )); $("#dannie").on("mouseover", ".sait", function() ( $(".sait").draggable(( helper:"clone" )); ));
вместо обичайното:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px solid black")); )); $(".sait").mousedown(function())( $("#"+this.id).css(("border":"0px solid black")); )); $(".sait").draggable(( помощник:"клонинг", ));

Най-авторитетните хора в тази област са Владимир Палант (писа той AdBlock Plus), ... Разширенията за Chrome се пишат по-лесно отколкото за Firefox. Интересното е, че най-популярното разширение за Chrome е „Tyuryaga VKontakte“ (според статистиката на Yandex).

Предизвикателството е да се разработи разширение, което да отговаря на определени HTML страници, отваряни в браузъра. Например, променете HTML кода на страница на сайт, за да направите използването на този сайт по-удобно.
Решението е тествано на Google Chrome 24.x и Chromium 6.x (Debian 6.0.6, amd64).

Обобщение на основните въпроси, които възникват по време на писането на разширението crx.

За минимално разширение са достатъчни 4 файла:

128.png background.js content.js manifest.json

Къде е manifest.json:

( "manifest_version": 2, "name": "разширение на DomainCheck", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "съвпада ": [ "*://*/*" ], "js": [ "content..png" ) // няма web_accessible_resources )

Файлът background.js съдържа кода, който се изпълнява при стартиране на браузъра. В този скрипт можете да „закачите“ манипулатора за зареждане на съдържанието на документа (document.location.href).

Самият Chrome генерира _generated_background_page.html:

За да комуникирате между background.js и скрипта за съдържание, можете да използвате съобщения (заявка/съобщение) и chrome.extension.getBackgroundPage(). Вижте също прегледа на архитектурата на разширенията на Chrome. Той казва, че „Скриптът за съдържание е някакъв JavaScript, който се изпълнява в контекста на страница, която е заредена в браузъра“.

Забележка: Трудно е да се отстранят грешки във фоновата страница (background.js) в Chromium, тъй като няма съответстваща. раздели на страницата „Разширения“ в режим за разработчици.

Как да инсталирате манипулатор на DOMContentLoaded е описано на developer.chrome.com. Вижте също документацията за Background Pages (background.js).

За да вградим HTML код в страница, можем да използваме съвета от статията на Habré (вижте там за споменаването на глобалния променлив документ), но също така трябва да сравним текущия URL адрес със списъка.

Отхвърлен ли е document.location.href?

Пример от stackoverflow.com за получаване на пълно квалифицирано име на домейн:

var url = "http://www.domain.ru/tmp/file.txt?abc=1&cde=2#123" var getLocation = function(href) ( var l = document.createElement("a"); l. href = href; return l; ); var l = getLocation(url); предупреждение (l.hostname)

Можете да изберете поддомейн от 2-ро ниво по следния начин:

var l = getLocation(url); var d = l.hostname; функция cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; върнете str.replace(re,"$1"); ) предупреждение(cutd(d));

(вижте съвета на stackoverflow.com).

инжектиране на sha1.js...

chrome.alarms.create((delayInMinutes: 0.1)); chrome.alarms.onAlarm.addListener(function() ( alert("Времето изтече!"); ));

Този бъг в Chromium беше затворен на 9 януари 2013 г., но все още не се е появил в най-новите компилации за Windows.

Ако все пак решите да използвате „модерни“ аларми, тогава как правилно да настроите таймер за аларма с произволна продължителност/период е описано на stackoverflow.com.

За съвместимост с по-стари браузъри е по-добре да използвате window.setInterval() в background.js:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // в милисекунди

Функцията setTimeout() е единичен "будилник".

Disable-Enable chrome extensions стартира background.js по нов начин. *) трябва ли да проверя същото, за да вляза в режима? и сън.

Ако просто изтеглите чрез XMLHttpRequest, може да получите следното съобщение: „XMLHttpRequest не може да зареди http://site/config.xml. Произходът http://www.google.ru не е разрешен от Access-Control-Allow-Origin. ”. Това означава, че когато правите междудомейн заявка, не сте активирали опцията за CORS, .htaccess:

Набор от заглавки Access-Control-Allow-Origin "*"

Можете да разрешите междудомейн заявки Разширение за Chromeи чрез разрешения в manifest.json:

( "manifest_version": 2, ... "permissions": [ "http://site/" ],

И двата случая обаче не работят за разопаковани разширения на Chromium. За пакетирани разширения Chromium версии 6.0-7.0 понякога показва „Лошо магическо число“ (за чист Chrome тази грешка не се наблюдава).
Забележка: CORS защитата може да бъде заобиколена в Chromium чрез опцията --disable-web-security:

$ chromium-browser --disable-web-security http://domain/path

Допълнение: за Chromium трябва да промените редовете в manifest.json на следното (изрично посочване на домейна и добавяне на звездичка в пътя):

( "разрешения": [ "http://site/*" ],

За да попречите на уеб инспектора(?) в chrome да се оплаква от XMLHttpRequest(), когато интернет е изключен, можете да направите следното:

var req = нула; опитайте ( req = new XMLHttpRequest(); ) catch(err) () // вижте съвета на stackoverflow.com

(това е написано по съвет от stackoverflow.com). ...

За отстраняване на грешки при анализиране можете да използвате console.log("line"). Низовете приемат връщане на каретка с помощта на "\n".

Разборът на XML в JavaScript в разширението на chrome се извършва по следния начин:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("timeout"); var timeout = ts.textContent; if (ts) (console.log("timeout="+timeout);) var ds = xml.getElementsByTagName("domain"); if (ds) ( for (var i = 0; i< ds.length; i++) { console.log("domain: "+ds[i].textContent); } }

За да синхронизирате данните за разширението с помощта на API за съхранение, трябва версии на Chrome>= 20. В манифеста (manifest.json) трябва да напишете следното:

"премисии": ["съхранение"]

Както пишат в групата на Google „Chromium HTML5“, „Насочих вниманието си към Web SQL Database, но изглежда Web SQL вече не е в „активна поддръжка“, което ме кара да вярвам, че ще бъде премахнат от HTML спецификацията.“ Вижте W3C Web SQL база данни, бележка за повече подробности. Можете да опитате да използвате Основни концепции - за да разширите пространството за базата данни, можете да използвате permissions: unlimitedStorage в manifest.json. За да използвате „Неограничено хранилище“, има следните офлайн API: 1) Кеш на приложението; 2) Файлова система; 3) IndexedDB; 4) WebSQL (отхвърлен). За пример за използване на IndexedDB в Chrome вижте. За пример за работа с IndexedDB вижте gist.github.com:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("my db") req.onerror = function() ( console.log("error"); )

местоположения на индексирани DB файлове,
Windows: C:\Users\\AppData\Local\Google\Chrome\User Data\Default\IndexedDB,
Linux: /home//.config/google-chrome/Default/IndexedDB/chrome-xxx.indexeddb.leveldb/:

$ sudo ls -la /home/anonymous/.config/google-chrome/Default/IndexedDB/chrome-extension_ojeihbjghbabiocoglbfhdebhhckdnol_0.indexeddb.leveldb/ общо 24 drwx------ 2 анонимен анонимен 4096 7 фев 03:08 . drwx------ 3 анонимен анонимен 4096 7 фев 03:08 .. -rw-r--r-- 1 анонимен анонимен 285 7 фев 03:08 000003.log -rw-r--r-- 1 анонимен анонимен 16 фев. --r-- 1 анонимен анонимен 32 фев 7 03:08 МАНИФЕСТ-000002

Можете да разгледате примери за използване на IndexedDB в мрежата за разработчици на Mozilla.

Вмъкването на голям брой записи в IndexedDB е разгледано на stackoverflow.com.

За да добавите елементи към IndexedDB, трябва да използвате

indexedDB.db.transaction().objectStore().put())

В папката на базата данни IndexedDB старите бази данни се съхраняват като .sst файлове, а новите (текущи) се съхраняват като .log файлове.

setVersion() е отхвърлен. Но тук има един трик [за onupgradeneeded()]: ...

Както е посочено в блога на Парашурам Нарасимхан, „За Chrome: В случай на chrome функцията onupgradeneeded не се извиква. Извиква се функцията onsuccess на базата данни. Тук се проверява съществуването на метода setVersion. Ако методът съществува и указаната версия е по-голяма от версията на базата данни, се извиква методът setVersion. Успехът на извикването на заявката на setVersion извиква метода onupgradeneeded на потребителя с транзакцията на версията. След като методът завърши, версиятаTransaction се извършва чрез затваряне на базата данни. Базата данни се отваря отново с най-новата версия и това се предава на onsuccess, дефиниран от потребителя." (за да извикам onupgradeneeded(), правя db.setVersion("3")).

Как да извлечете данни в content.js:

dbreq.onupgradeneeded = функция(събитие) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["test_db"], "readonly"); var store = tx.objectStore("задача");

За да отворите базата данни, използвайте кода от axemclion+jepp (функция openReqShim).

Когато отворим база данни IndexedDB, която не съществува, тя ще бъде създадена с номер на версия, версия = 0. В този случай onupgradeneeded() и onsuccess() се извикват последователно. Първият път, когато извикаме onupgradeneeded(), версията вече е = 1. Когато отворим [съществуващата база данни] за втори път, onupgradeneeded() вече не се извиква и номерът на версията е = 1. (?не се увеличава) Само dbreq .onsuccess() се извиква.

Още нещо. Тук се казва, че „С Chrome преди 23 имате нуждаза създаване на такава транзакция ръчно чрез извикване на setVersion() - API, който е премахнат от спецификацията. По-старата спецификация може да бъде намерена на: http://www.w3.org/TR/2011/WD-IndexedDB-20110419/", тоест, за да се избегне грешката "NotFoundError: DOM IDBDatabase Exception 8" в chrome регистрационни файлове, трябва да извикате setVersion().

В Chromium 6.0.472.63 (59945) изпълнението на IndexedDB не е стабилно, така че е деактивирано и не работи =)

Като цяло трябва да използвате background.js + iframe + обмен със скриптове за съдържание чрез съобщения

"content_scripts": [ ( "matchs": [ "*://*/*" ], "js": [ "content.js" ], "run_at": "document_start") ], ...

Content.js:

document.addEventListener("DOMContentLoaded", function () ( alert("Abc "+document.location.href); ));

За да поставите разширение в Chrome WebStore, трябва да платите на Google входна такса от $5 (тогава можете да поставите произволен брой разширения). Можете да платите чрез VISA, MasterCard, AMEX или DISCOVER (допълнително, когато плащате, трябва да посочите пълната си пощенски адреси име и фамилия).

За да поставите разширението ви трябва акаунт в Google и т.н. Ще ви трябва екранна снимка и рекламно изображение. Ще трябва да актуализирате кода на разширението ръчно чрез същия уеб магазин на Chrome (доколкото разбирам, няма автоматична актуализацияпо URL, като във Firefox). Във файла manifest.json трябва да актуализирате версията на разширението. Няколко минути след добавянето разширението ще бъде достъпно в търсенето на разширения на Chrome.

Опаковка на разширение за Linux:

#!/bin/bash 7z a -tzip ../domainck-chromium.zip ./* mv ../domainck-chromium.zip ../domainck-chromium.crx

Ключови думи: Компилации на Chromium за прозорциКАК ДА Страница за изтегляне на Google Chrome, Примерни разширения на Google Chrome.

Винаги съм искал да разкажа на хората за интересни възможности (технологии), които сега може да са достъпни за всички, но по някаква причина не са достъпни за всички. Да, оказа се тавтология, но напълно отразява вътрешното ми възмущение от тази наболяла за мен тема. Както и да е, разговорът сега няма да бъде за това как казват. Днес ще говорим за създаването на разширения за браузъра Google Chrome (наричан по-нататък Chrome).

Разширението, което ще разработваме в тази статия, може да бъде намерено в уеб магазина на Google Chrome, като единствената разлика е, че има разширена функционалност. Освен това в GitHub има изходен код, отново с уговорката, че там всичко е написано на CoffeeScript, а тук историята ще се пише с JavaScript. Между другото, аз не съм фен или поддръжник на CoffeeScript, но това е доста интересно и полезно нещо - съветвам ви да го опитате.

Ако някога сте обмисляли идеята да създадете разширение за Chrome, Firefox, Maxthon и други браузъри, вероятно вече сте забелязали, че минималното количество усилия, което трябва да положите, е за Chrome. Можете да проверите това, като разгледате документацията за съответните браузъри.

Писането на разширение започва с неговото описание и поставяне на задачите, които ще решава. Тъй като сам съм си шеф и мога да пропускам крайните срокове колкото пъти искам, не е нужно да пиша технически спецификации - достатъчно е да разбера, че:

• Разширението трябва да скрие всички коментари в социална мрежа"VK";
• Разширението трябва да може да показва коментари;
• Разширението трябва да може да показва коментари на конкретни страници;

На пръв поглед всичко е просто и можем да го направим. В рамките на статията обаче ще приложим само първите две точки.

Предвиждам въпроси, чието съдържание може да бъде нещо подобно: „Защо да крием коментари, ако това е целият смисъл на една социална мрежа?!” Е, това е справедлив въпрос, който заслужава подробен отговор:

Обстоятелствата се стекоха така, че напоследък, когато видя коментари във VK, искам да дам планини от facepalms на коментаторите. Абонирам се за голям брой различни публични страници, тематични (уеб разработка) и не толкова. И колкото и странно да изглежда, аз ставам най-щедър в групи с интересно за мен съдържание, а не котки (в моя случай панди). Толкова непрофесионална и грозна информация не съм виждал никъде другаде да се лее в коментарите и дори да си помислят да се карат. Освен това коментарите в новинарската емисия не изглеждат естетически приятни. Общо взето казано-сторено.

Най-приятната изненада за мен беше, че в самото начало на пътуването ни посреща описателният характер на действията. Просто казано, трябва да опишем нашето приложение, неговите права и възможности - за това се използва файлът manifest.json.

Първо, трябва да попълните три задължителни полета:

( "manifest_version": 2, // Започвайки с Chrome 18, задайте 2, в противен случай 1 (такива стари неща не се поддържат) "name": "Моето разширение", // Име на разширението "version": "versionString" // Версия на разширението )

Ако всичко е ясно с името и версията на манифеста е още по-проста, тогава трябва да разгледате по-отблизо версията на разширението.

И така, всички сме свикнали с факта, че версията на нещо се състои от три числа, разделени с точки - Major.Minor.Patch (Означаващо число). С npm, bower и други изкушения разговорът е кратък: или по този начин, или изобщо не. Но Google предлага следните опции:

"версия": "1" "версия": "1.0" "версия": "2.10.2" "версия": "3.1.2.4567"

Повече информация за всички полета във файла на манифеста можете да намерите в документацията.

В нашия случай манифестният файл ще изглежда така:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " разрешения": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "икони": ( "16": "icon_16.png", "48 ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html"), "content_scripts": [ ( "matchs" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "стилове /commentblocker_on.css" ] )

От това, което не е разгледано досега

• __MSG_key__ е подходът на Chrome към интернационализацията на приложенията (i18n). Може да се използва както във файла на манифеста, така и в други файлове (дори CSS).
• web_accessible_resources - масив от пътища към ресурси, които впоследствие ще бъдат използвани в контекста на уеб страници. Без посочване на пътя в него, нищо не може да се използва на страниците на уебсайта, ако се очаква такова поведение.

Огромен плюс за Chrome karma е, че вече можем да активираме разширението, разбира се, ако всички ресурси, посочени в manifest.json, са създадени.

Не мисля, че си струва да се фокусираме върху това, което има във файловете commentblocker.css и commentblocker_on.css. Ще дам само първия, който изброява всички селектори, които съдържат коментари:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( видимост: скрит !important; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pv_comments, #pv_comments_header, #pv_your_com мент ( дисплей: няма !import ant; видимост: скрит ! важно; ) тяло: след ( позиция: фиксирана; съдържание: "__MSG_mode_enable__"; горе: 5px; дясно: 5px; подложка: 6px 12px; цвят на фона: #ffc; рамка: 1px плътен #ddd; z-индекс: 9999 ;)

Във файла commentblocker_on.css, както може би се досещате, е точно обратното. Обърнете внимание, че точно в CSS използвам ред със съдържанието на езиковия ключ: "__MSG_mode_enable__" . Време е да създадете файл, където ще се съхраняват тези ключове.

В основата на нашето разширение създаваме директорията _locales и директориите en и ru, вложени в нея. След това описваме нашите ключове във файла messages.json.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": " Удобен начинскриване на коментари в емисия с новини и групи."), "browser_action": ("message": "Превключване на изгледа на коментари"), "mode_enable": ("message": "Без коментари!"), "mode_disable": (" съобщение ": "С коментари!" ) )

В допълнение към полето за съобщения има и други полета, за които можете да научите от документацията.

Сега създаваме файловете background.html, първо така:

Заден план

Всичко тук е същото като в обикновения HTML - нищо необичайно. Между другото, не е нужно да създавате файла background.html, тъй като той се генерира автоматично въз основа на полетата в manifest.json.

Можете да стартирате разширението, без да пишете нито един ред JavaScript. За да направите това, трябва да преминете през менюто:

• Настройване и управление на Google Chrome (Hamburger)
• Допълнителни инструменти
• Разширения
• Поставете отметка в квадратчето до „режим за програмисти“
• Изтеглете разопаковано разширение
• Изберете папка с разширение

Разширението се зареди и се появи в менюто. Да, да, това е това "Б".

Изглежда, че разширението, което току-що създадохме, няма нищо в главата си (няма логика) и всички коментари на страниците на социалната мрежа с буквата „B“ вече са скрити. Отговорът се крие в manifest.json, където в полето "content_scripts": () посочихме на кои страници (http://vk.com/* и https://vk.com/*) файлът commentblocker.css ще се включва автоматично, което скрива всички коментари. Съветвам ви да прочетете повече за моделите по математика. Толкова е просто на външен вид, но под предния капак е почти сив кастрат, с всичките му плюсове.

И така, без да пишем нито един ред код, вече имаме разширение, което изпълнява основната задача, която му е възложена.

Остава да изпълним втората точка от задачата, а именно да внедрим възможността за показване на коментари. Накратко, трябва да изпратим файл commentblocker_on.css, който ще замени правилата на файла commentblocker.css. И тук нашият всемогъщ JavaScript се притичва на помощ.

Помните ли какво казах за background.html? Да, да, относно факта, че не е необходимо да се създава. Нека леко променим manifest.json:

... "background": ( "persistent": false, "scripts": [ "scripts/commentblocker.js" ]), ...

Току-що свързах JavaScript файла. Нищо специално. Да отидем на този файл.

Не можете просто да вкарате JS в страница. И същият проблем съществува не само със скриптовете. Следователно трябва да използваме специално инжектиране на executeScript.

Първо трябва да добавите манипулатор на събитие за щракване към иконата на разширението:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( код: "(" + toggleComments.toString() + ")();" )); ));

Където toggleComments е функция, която ще инжектира нашия CSS файл в страницата:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "разширение", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (документ. getElementsByTagName("head").removeChild(document.getElementById("extension"))) );

Мисля, че думите, че тази част от кода проверява дали нашият CSS е свързан на страницата и прави изводи за необходимостта от активиране или деактивиране, ще бъдат достатъчни.

Между другото, няма много налични събития, които покриват различен набор от нужди. Например има такива събития:

• onCreated - създаване на раздел.
• onUpdated - актуализиране на раздела.
• onRemoved - затваряне на раздел.

Струва си да се отбележи, че събитието onUpdated се извиква два пъти:

• Актуализация на страницата;

В StackOverflow съветват да проверите състоянието на страницата:

Chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) ( if (changeInfo && changeInfo.status === "complete") ( ... ) ));

Сега, когато щракнете върху иконата, ще се свърже стилов файл, който ще покаже коментари, а повторното щракване върху иконата ще ги скрие отново.

Между другото, струва си да споменем моята пълна версияРазширението VK Comment Blocker, което се предлага в

В интернет има много сайтове, които предоставят възможност за превъртане на страница нагоре без използване на мишка или лента за превъртане. Но в същото време все още има сайтове, където няма такова изпълнение. „Защо не опитате да напишете скрипт, който да добави такъв бутон към всички сайтове?“ - Помислих и се заех да го реализирам. Такива скриптове се наричат ​​потребителски скриптове и имат разширение *.user.js. Например, можете да го прочетете на Хабре. За съжаление не може да се направи без капани. Има някои разлики в изпълнението на userjs под различни браузъри. Ще се съсредоточа върху описанието на внедряването на нашия скрипт userjs като разширение за браузъра Google Chrome.

Задължително за Google разширения Chrome е файл manifest.jsonкойто описва параметри, пътища към външни файлове (*.js, *.css и т.н.), поддръжка на версии и т.н. за разширение. Можете да прочетете повече за файла. В нашия случай файлът manifest.json изглежда така:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css ": [ "css/style.css" ], "съвпадения": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": вярно, "description": "Разширение за потребителски скрипт отгоре за google chrome", "name": "backTopUserJS", "version": "1")

За удобство използваме библиотеката JQuery, която поставихме до файла manifest.json и основния скрипт файл (в нашия случай backTopUserJS.user.js). Съдържанието му е както следва:

// ==UserScript== // @name backTopUserJS // @author Александър Филатов // @license MIT // @version 1.0 // ==/UserScript== функция main() ( var disp = $(window).scrollTop () > 400? "block": "няма"; var $upButton = $("

"); $(document).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0), "slow" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("slow"); else $upButton.fadeOut("slow"); )); ); var script = document.createElement("script"); script.appendChild(document.createTextNode("("+ main +"))();")); (document.body || document.head | | document.documentElement).appendChild(скрипт);

Мисля, че сценарият е достатъчно ясен, за да го разгледаме подробно. Само последните 3 реда заслужават обяснение. Всъщност това е малък хак, който вмъква нашия скрипт в кода на страницата на сайта. Ако някой от вас намери по-добър начин, може да напише корекциите си в коментарите :)

Можете да инсталирате персонализирани скриптове в Google Chrome, подобно на други браузъри, но тъй като Google се грижи за нашата сигурност, те трябва да бъдат обвити в разширения на браузъра. Нека разгледаме инсталацията стъпка по стъпка.

Създайте папка за нашето разширение по следния начин: C:\MyChromeExtensionUserJS

За всяко разширение създаваме собствена директория, например в нашия случай ще я наречем C:\MyChromeExtensionUserJS\backTopUserJS . Добавете файлове с разширения към тази директория.

Да вървим "О Google браузър Chrome" -> раздел "Разширения" или в адресната лента напишете chrome://extensions/

Поставете отметка в квадратчето „Режим за програмисти“

Щракнете върху бутона „Зареждане на разопаковано разширение“ и изберете директорията на нашето разширение. Натиснете "OK".

Разширението е инсталирано и готово за използване. За да актуализирате разширения, след като сте направили промени в него, просто щракнете върху бутона „Актуализиране на разширението“ или в режим за програмист натиснете клавишната комбинация Ctrl+R.

Можете да видите източниците на скрипта в github. Скриптът не претендира да бъде идеален, а служи само като пример и стимул за писане на собствени персонализирани скриптове за Google Chrome.