Bővítmények írása a Chrome-hoz. Röviden a Chrome-bővítmények létrehozásáról. Alkalmazás készítése Google Chrome-hoz

A google chrome-hoz nem nehéz bővítményt írni. De az első kiterjesztés írásakor kérdések merülhetnek fel (és merülnek fel). Az első bővítmény megírásához használt kézikönyvek többsége az első verzió kiáltványának felhasználására készült, amelynek támogatása a közeljövőben megszűnik.

Ez a cikk a következőkre terjed ki:

• Hogyan készítsünk kiáltványt v.2
• Hogyan dolgozz távoli erőforrásokkal
• Hogyan kell dolgozni a cookie-kkal
• Hogyan kell dolgozni a helyi tárolóval
• Hogyan kell dolgozni az értesítésekkel

A cikk végére kész szervezőbővítményünk lesz, melyben lesz egy mező az új feladat hozzáadására, valamint az aktuális napi feladatok listája. Vázoljuk a szervezővel szemben támasztott összes követelményt:

• Kell egy mező az esemény hozzáadásához (dátum, idő, esemény)
• Meg kell jelennie az aktuális nap összes feladatának idő szerint rendezve
• Minden múltbeli eseményt áthúzva kell megjeleníteni
• Ebben kell lennie egy mezőnek, amely megadja az értesítés időtartamát, valamint egy jelölőnégyzetet, amely engedélyezi és tiltja az értesítések megjelenítését
• Meg kell jelenítenie egy értesítést egy közelgő eseményről egy meghatározott időpontban az esemény előtt

Kezdjük a kiterjesztés létrehozását a legelejétől, vagyis a manifestből. A jegyzék ugyanaz a fájl, amelybe az összes kiterjesztési paraméter be van írva. Név, leírás, verzió, webhely-hozzáférési engedély, cookie-k használatának engedélye, értesítések, helyi tárhely. Általában véve a kiáltvány a terjeszkedés agya. Hozzon létre egy manifest.json fájlt. A jegyzék az egyetlen fájl, amelynek előre meghatározott névvel kell rendelkeznie. Ennek a fájlnak három kötelező mezője van:

manifest.json

("név": "Szervező kiterjesztés", // Bővítmény neve "verzió": "1.0", // Bővítmény verziója. "manifest_version": 2 // Manifest verzió)

Itt van pár szabály:

• A manifeszt verziónak egész számnak kell lennie, azaz 2-nek kell lennie, nem „2”-nek.
• A kiterjesztés verziója legyen karakterlánc, de csak számokat és pontokat tartalmazzon, vagyis az „1.0” jó, az 1.0 és a „0.9 béta” viszont rossz.

A kötelező mezőkkel – ennyi, folytassuk a kiterjesztés felugró ablakának létrehozását. Ahhoz, hogy egy ablak megnyíljon, amikor egy ikonra kattint, hozzá kell adnia a „browser_action” mezőt a jegyzékhez.

manifest.json

( ... "browser_action": ( "default_title": "Szervező megnyitása", // Cím. Akkor látható, ha a böngészőben az ikonra viszi az egérmutatót "default_icon": "icon_small.png", // A kiterjesztés elérési útja icon "default_popup": " popup.html" // Az előugró ablakot tartalmazó oldal elérési útja ) )

Most hozzunk létre egy felugró ablakot. Ez egy normál html oldal, ami bármilyen méretű és színű lehet, trükkök nélkül. Nevezzük a fájlt „popup.html”-nek. Nem elég létrehozni ezt a fájlt - meg kell adni a jegyzékben. Ezt tettük: "default_popup": "popup.html".

popup.html

Működik!

Itt az ideje, hogy teszteljük bővítményünk működését. Ehhez töltse le a bővítményt a böngészőbe. Nyissa meg a bővítmények menüt a Chrome-ban. A madarat „Fejlesztői módba” helyeztük.

Ezt követően három gomb jelenik meg. Kattintson a „Kicsomagolt bővítmény betöltése...” elemre. Válassza ki a mappát a kiterjesztett fájlokkal. Ezt követően megjelenik a bővítményünk. Ha minden helyes, akkor az ikonra kattintva egy ablak jelenik meg:

Most pedig rátérhetünk a szórakoztató dolgokra. Csatlakoztassunk két javascript fájlt. Az első a popup.js, a második a jquery. Az elsővel nem lesz gond, de nem a helyi jquery-t fogjuk csatlakoztatni, hanem a távoli, az ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js címről vett. A problémák abból adódnak, hogy a bővítmény alapértelmezés szerint nem fér hozzá harmadik féltől származó erőforrásokhoz. A hozzáféréshez ezt jeleznie kell a jegyzékben. Valamihez való hozzáférést az „engedélyek” mezőben jelzi. Ezenkívül távoli szkriptek és css esetén meg kell adnia a rendelkezésre álló távoli erőforrásokat.

manifest.json

( ... "engedélyek": [ "https://ajax.googleapis.com/*" ], "content_security_policy": "script-src "self" https://ajax.googleapis.com; object-src "self "" )

Most kössük össze ezeket a szkripteket a popup.html fájllal

popup.html

A Chrome-ban tárolt tárhely használatával felhasználói adatokat tárolhat. A bővítményünk a tárolóban tárolja majd a jövőbeli eseményeket. Ennek két oka van. Először is, a tárhelyen tárolt adatok szinkronizálhatók, ha bejelentkezik a böngészőbe. Másodszor pedig az adatok nem csak karakterláncként tárolhatók, mint a cookie-kban, hanem bármilyen formában, azaz tömbök és objektumok egyaránt tárolhatók. Ennek működéséhez nyissa meg a hozzáférést a jegyzékben található tárhelyhez.

manifest.json

( ... "engedélyek": [ ... "tárhely" ] ... )

Most tervezzük újra a felugró ablakot. A felugró ablakban lesz egy mező a mai dátummal, három beviteli lehetőség az új esemény dátumához, időpontjához és leírásához, egy gomb új esemény hozzáadásához, valamint a mai nap összes eseményének listája.

popup.html

Dátum

És azonnal adjon hozzá egy dátumkijelzést a #today_date blokkhoz.

popup.js

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

Így kell kinéznie:

Tehát amikor a „+” gombra kattintunk, egy eseményt kell hozzáadni. A fájl elején deklarálunk egy globális tárolási változót - egy objektumot a tároláshoz, valamint az események tárolására szolgáló feladatok globális tömbjét.

popup.js

Var storage = chrome.storage.sync; var feladatok = new Array(); $(function())( … $("#feladat hozzáadása").click(function())( var new_task = new Object(); new_task.date = validateField($("#new_date").val(), " dátum" ); new_task.time = validateField($("#new_time").val(), "time"); new_task.task = $("#new_task").val(); if(!new_task.task | |. new_task.date ||. !új_feladat.

Az érvényesítési funkció ellenőrzi, hogy a dátum d.h.yyyy formátumban van-e írva, az idő pedig óó:pp formátumban, valamint azt is, hogy az eseményleírás legalább három karaktert tartalmaz-e.

popup.js

Var validateField = függvény(érték, típus)( if(típus == "dátum")( változó dátum = val.split("."); var év = new Date(); év = év.getFullYear(); if( date.length == 3 && parseInt(dátum) == dátum && dátum = 3)( return val; ) return null )

A kiegészítést megoldottuk, térjünk át a mai események fogadására. Ehhez le kell gyűjtenünk az adatbázisból az összes eseményt, mindegyikből csak a mai eseményeket kell kiválasztanunk és idő szerint növekvő sorrendbe kell rendeznünk.

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 = mai_feladatok[i].time.replace(":", ""); var add = this_time > now_time ? "" : " class="done""; var add_html = ""+ma_feladatok[i].time+" "+ma_feladatok[i].feladat+""; $("ul").append(add_html); ) ) ) )); … ));

A getTodayTasks() függvény csak a mai dátumú eseményeket adja vissza az általános listából.

popup.js

Var getTodayTasks = function(tasks)( var today_tasks = new Array(); var today = new Date(); var today_date = today.getDate()+"."+(ma.getHónap() + 1)+ "." + today.getFullYear(); for(var i feladatokban)( if(tasks[i].date == mai_dátum)( mai_feladatok = feladatok[i]; ) ) if(ma_feladatok.length > 0)( mai_feladatok = sortTasks() mai_feladatok);

A sortTasks() függvény az eseményeket idő szerint növekvő sorrendbe rendezi.

popup.js

Var sortTasks = function(tasks)( if(tasks.length > 0)( var swapped = igaz; 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 = feladatok[i]; feladatok[i] = feladatok; feladatok = temp; cserélve = igaz; ) ) ) feladatok visszaadása; )

Ideje konfigurálni az értesítések képernyőn való megjelenítését. Adjunk hozzá egy speciális jelölőnégyzetet a felugró ablakhoz. Ha ez a jelölőnégyzet be van jelölve, az értesítések megjelennek, ha nincs bejelölve, akkor nem jelennek meg. Szövegbevitelt is hozzáadunk. Az ebben a bemenetben lévő szám azt mutatja, hogy az esemény előtt mennyi idővel jelenik meg az értesítés. Vagyis ha 19:00-ra van beütemezve egy eseményünk, akkor ez a szövegbevitel 5-öt tartalmaz, ami azt jelenti, hogy 18:55-kor megjelenik egy értesítés. Adjunk hozzá kódot ezekkel a bemenetekkel a popup.html-hez

popup.html

Értesítések megjelenítése

Most nézzük meg, hogyan fog ez működni. Ha rákattint egy jelölőnégyzetre, a bejelölt attribútum ellenőrzésre kerül, és az attribútum értéke a „show_notifications” cookie-ba kerül. Térjünk át a szövegbevitelre. Értékének változása esetén az új érték érvényesítésre kerül, ha az egész szám és nem több 120-nál, akkor az új értéket a „when_to_notify” cookie-ba írjuk.

De ahhoz, hogy ez működjön, meg kell nyitnunk a hozzáférést a cookie-khoz. Ehhez nyissa meg a manifest.json fájlt, és adja hozzá a „permissions” listához.

manifest.json

( ... "engedélyek": [ ... "cookie-k" ] ... )

Most elindíthatja a szkriptet. Menjünk a popup.js oldalra. Először állítsuk be a kezdeti értékeket a bemenetekben. Alapértelmezés szerint a jelölőnégyzet nincs bejelölve, vagyis az értesítések nem jelennek meg, az idő pedig 0. A jelölőnégyzetre kattintva megváltozik a „show_notifications” cookie értéke. A szövegmezőben lévő érték megváltoztatásakor a „when_to_notify” cookie értéke megváltozik.

popup.js

$(function())( setCheckbox(); setWhenToNotify(getCookie("when_to_notification")); ... $("#show_notifications").click(function())( setCookie("show_notifications", document.getElementById(") show_notifications" ).checked); $("#amikor_értesíthető").change(function())( setWhenToNotify($(this).val()); ));

Nézzük meg közelebbről a funkciókat. Kezdjük a cookie-k használatának funkcióival. BAN BEN ebben az esetben a kész funkciókat a w3schools.com webhelyről vettük át.

popup.js

Var setCookie = function(c_name,value,exdays)( /* *A http://www.w3schools.com/js/js_cookies.asp webhelyről származik */ var exdate=new Date(); exdate.setDate(exdate.getDate( ) + exdays); getCookie = function(c_name)(Hívja Vasya P.-t /* *Innen: http://www.w3schools.com/js/js_cookies.asp */ var i,x,y,ARRcookies=document.cookie.split(" ; "); for (i=0;i

Az érthetőség kedvéért beszúrtam a kód leírását a HTML-be. A menüt egyszerűen rendezem: a képre teszek egy belső kiterjesztés linket.

Mivel elkezdtem a popup.html-t, azonnal szólok a popup.js-ről

Nekem elég egyszerűnek tűnik:

popup.js
var xhr = new XMLHttpRequest(); xhr.open("GET", "http://losttime.su/?tmpl=login&token="+localStorage["elveszett bejelentkezés"], igaz); // itt van egy GET kérés a megadott oldalhoz xhr.onreadystatechange = function() ( if (xhr.readyState == 4) // ha minden jól ment, akkor hajtsa végre a zárójelben lévőt ( var dannie = document.getElementById(" dannie") ; dannie.innerHTML = xhr.responseText; // a kapott kód hozzáadása a blokkhoz id=dannie ) ) xhr.send();

Mellékeltem a kód leírását is.

A fent leírt kialakítás lehetővé teszi, hogy tartalmat húzzon ki és jelenítsen meg a webhelyéről, vagy esetleg nem. De amit fontos tudni:
- A jegyzékfájlban feltétlenül írja be az engedélyek mezőbe annak a webhelynek a címét, ahonnan az információkat veszi.
- A popup.js fájl a background.js háttérszkripthez kapcsolódik, mert a background.js-ben a helyi tárolóba bevitt adatok a popup.js-ben is láthatók.

Mielőtt megnéznénk a háttér.js szkriptfájlt, nézzük meg az egyes oldalakon külön-külön futó szkriptfájlt: content.js

Nálam ez így néz ki:

content.js
function onBlur() ( // ablak elveszti a fókuszt chrome.runtime.sendMessage((site:sait,time:localStorage)); // üzenetet küld a background.js-nek localStorage = "0"; ) window.onblur = onBlur; // ha az ablak elveszti a fókuszfüggvényt sec() // másodpercenként végrehajtódik ( if(document.webkitVisibilityState == "visible") // ha az oldal aktív ( localStorage = parseInt(localStorage,10) +1; // frissítés helyadatok a helyi tárolóban ) ) var sait=hely.gazdagépnév; // melyik oldalon található a szkript localStorage = "0"; setInterval(sec, 1000) // a függvény futtatása másodpercenként

A forgatókönyvem legérdekesebb pontja szerintem a következő:
chrome.runtime.sendMessage((site:sait,time:localStorage));
Itt egy üzenetet küld a háttérszkriptnek, nevezetesen két változót: site:sait - tartalmazza annak a webhelynek a címét, amelyen a szkript
time:localStorage – a szkripttel töltött idő.

background.js
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) ( var a = request.site; // adatok a webhelyről var b = request.time; // adatok az eltöltött időről // itt mit csinálunk ezeket az adatokat szeretnénk))

Valójában itt van. Nem részletezem semmit, mert... elvileg erre nincs szükség. A terv megvalósításához elég egy világos példát ismerni. Ha a background.js szkriptben bármilyen adatot hozzáad a helyi tárhelyhez (valamint cookie-kat, web sql-t), akkor ugyanezek az adatok használhatók a popup.js szkriptben is.

Lényegében csak ennyit szerettem volna elmondani a bővítmény létrehozásával kapcsolatban, de kitérek még egy pontra, ahol nehézségekbe ütköztem.

A beállítások oldalon a webhelyek áthúzását különböző oszlopokba kellett rendeznem.

Mert az adatokat az InnerHtml használatával illesztjük be, majd ez a lehetőség egyszerűen nem jelenik meg. Íme, mit kellett megszerveznünk:

$("#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:"klón" )); ));
a szokásos helyett:
$(".sait").mouseover(function())( $("#"+this.id).css(("border":"3px solid #ffffff")); )); $(".sait").mouseout(function())( $("#"+this.id).css(("border":"3px tömör fekete")); )); $(.sait").mousedown(function())( $("#"+this.id).css(("border":"0px tömör fekete")); )); $(.sait").draggable(( helper:"klón", ));

A legtekintélyesebb emberek ezen a területen Wladimir Palant (írta AdBlock Plus), ... A Chrome bővítményeket könnyebb írni, mint a Firefoxhoz. Érdekes módon a Chrome legnépszerűbb bővítménye a „Tyuryaga VKontakte” (a Yandex statisztikái szerint).

A kihívás egy olyan bővítmény kifejlesztése, amely reagál a böngészőben megnyitott bizonyos HTML-oldalakra. Például módosítsa egy webhelyoldal HTML-kódját, hogy kényelmesebbé tegye a webhely használatát.
A megoldást tesztelték Google Chrome 24.x és Chromium 6.x (Debian 6.0.6, amd64).

A crx kiterjesztés írása során felmerülő főbb kérdések összefoglalása.

Minimális kiterjesztéshez 4 fájl elegendő:

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

Hol található a manifest.json:

( "manifest_version": 2, "name": "DomainCheck kiterjesztés", "version": "0.1", "background": ( "scripts": ["background.js"]), "content_scripts": [ ( "egyezik" ": [ "*://*/*" ], "js": [ "content..png" ) // nincs web_accessible_resources )

A background.js fájl tartalmazza a böngésző indításakor végrehajtott kódot. Ebben a szkriptben „akaszthatja” a dokumentumtartalom-betöltés kezelőjét (document.location.href).

A Chrome maga generálja a _generated_background_page.html fájlt:

A background.js és a tartalomszkript közötti kommunikációhoz használhat üzeneteket (request/message) és chrome.extension.getBackgroundPage(). Lásd még a Chrome-bővítmények architektúrájának áttekintését. Azt mondja, hogy "A tartalomszkript olyan JavaScript, amely a böngészőbe betöltött oldal kontextusában fut le".

Megjegyzés: Nehéz hibakeresés a háttéroldalon (background.js) a Chromiumban, mivel nincs megfelelő. lapokat a „Bővítmények” oldalon fejlesztői módban.

A kezelő DOMContentLoaded rendszerre történő telepítésének leírása a developer.chrome.com oldalon található. Lásd még a Háttéroldalakról szóló dokumentációt (background.js).

A HTML-kód oldalba ágyazásához használhatjuk a Habré-ról szóló cikk tanácsait (lásd ott a globális változó dokumentum említését), de össze kell hasonlítanunk az aktuális URL-t a listával.

A document.location.href elavult?

Példa a stackoverflow.com webhelyről a teljesen minősített domain név megszerzésére:

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); alert(l.hostname)

Kiválaszthat egy 2. szintű aldomaint az alábbiak szerint:

var l = getLocation(url); var d = l.hostnév; függvény cutd(str) ( var re = /.*?\.([\w\d-\u0100-\uffff-\.]+\.[\w\d-\u0100-\uffff-\.]+ )/; return str.replace(re,"$1");

(lásd a tippet a stackoverflow.com oldalon).

sha1.js injekció ...

chrome.alarms.create((delayInMinutes: 0,1)); chrome.alarms.onAlarm.addListener(function() ( alert("lejárt az idő!"); ));

A Chromium ezt a hibáját 2013. január 9-én lezárták, de még nem jelent meg a Windows legújabb verzióiban.

Ha mégis úgy dönt, hogy „modern” riasztásokat használ, akkor a stackoverflow.com webhelyen le van írva, hogyan kell helyesen beállítani egy tetszőleges időtartamú/időtartamú riasztási időzítőt.

A régebbi böngészőkkel való kompatibilitás érdekében jobb a window.setInterval() használata a background.js fájlban:

var i = 0; window.setInterval(function() ( alert(i); i++), 2*1000); // ezredmásodpercben

A setTimeout() függvény egyetlen "ébresztőóra".

A Chrome-bővítmények letiltása-engedélyezése a background.js fájlt új módon indítja el. *) Ugyanezt kell ellenőriznem a módba lépéshez? és alszik.

Ha egyszerűen letölti az XMLHttpRequest segítségével, a következő üzenet jelenhet meg: „Az XMLHttpRequest nem tudja betölteni a http://site/config.xml címet, az Origin http://www.google.ru webhelyet az Access-Control-Allow-Origin nem engedélyezi. ”. Ez azt jelenti, hogy domainek közötti kérés benyújtásakor nem engedélyezte a CORS, .htaccess opciót:

Fejléckészlet Access-Control-Allow-Origin "*"

Engedélyezheti a domainek közötti kérelmeket Chrome bővítményés a manifest.json fájl engedélyeivel:

( "manifest_version": 2, ... "engedélyek": [ "http://site/" ],

Azonban mindkét eset nem működik kicsomagolt Chromium-bővítmények esetén. Csomagolt bővítmények esetén a Chromium 6.0–7.0 verziói néha „Rossz varázsszámot” jelenítenek meg (a tiszta Chrome esetében ez a hiba nem figyelhető meg).
Megjegyzés: A CORS-védelem megkerülhető a Chromiumban a --disable-web-security opcióval:

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

Kiegészítés: Chromium esetén módosítania kell a manifest.json sorait a következőkre (explicit módon megadva a domaint, és csillagot kell adni az elérési úthoz):

( "engedélyek": [ "http://site/*" ],

Ha meg szeretné akadályozni, hogy a Chrome webfelügyelője(?) panaszkodjon az XMLHttpRequest() miatt, amikor az internet ki van kapcsolva, tegye a következőket:

var req = null; try ( req = new XMLHttpRequest(); ) catch(err) () // lásd a tanácsot a stackoverflow.com oldalon

(ezt a stackoverflow.com tanácsára írták). ...

Az elemzés hibakereséséhez használhatja a console.log("line") parancsot. A karakterláncok a "\n" használatával fogadják el a kocsivisszaadásokat.

Az XML elemzése JavaScript-be a Chrome-bővítményben a következőképpen történik:

var xml = req.responseXML.documentElement; var ts = xml.getElementsByTagName("időtúllépés"); 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); } }

A bővítményadatok Storage API-val történő szinkronizálásához szüksége van Chrome verziók>= 20. A jegyzékbe (manifest.json) a következőket kell beírnia:

"premissions": ["tárhely"]

Ahogy a "Chromium HTML5" google-csoportban írják: "A Web SQL Database felé fordítottam a figyelmemet, de úgy tűnik, a Web SQL már nincs "aktív karbantartásban", ami arra késztet, hogy kikerüljön a HTML specifikációból." További részletekért lásd: W3C Web SQL Database, megjegyzés. Kipróbálhatja az alapfogalmakat – az adatbázis helyének bővítéséhez használhatja a következő engedélyeket: unlimitedStorage a manifest.json fájlban. A „Korlátlan tárhely” használatához a következő offline API-k állnak rendelkezésre: 1) App Cache; 2) Fájlrendszer; 3) IndexedDB; 4) WebSQL (elavult). Az IndexedDB Chrome-ban való használatára vonatkozó példát lásd:. Az IndexedDB-vel való munkavégzés példáját a gist.github.com oldalon találja:

window.indexedDB = window.indexedDB || window.webkitIndexedDB; var req = indexedDB.open("saját db") req.onror = function() ( console.log("hiba"); )

IndexedDB fájlok helyei,
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/ összesen 24 drwx------ 2 anonymous 40 8 06:06 drwx------ 3 névtelen névtelen 4096 február 7 03:08 .. -rw-r--r-- 1 névtelen névtelen 285 február 7 03:08 000003.log -rw-r-r-- 1 anonymous névtelen 16. február 7. 03:08 AKTUÁLIS -rw------- 1 névtelen névtelen 0 február 7 03:08 LOCK -rw-r--r-- 1 névtelen névtelen 46 február 7 03:08 NAPLÓ -rw-r --r-- 1 névtelen névtelen 32. február 7. 03:08 MANIFEST-000002

Példákat tekinthet meg az IndexedDB használatára a Mozilla fejlesztői hálózaton.

Nagyszámú rekord beszúrása az IndexedDB-be a stackoverflow.com webhelyen található.

Az IndexedDB-hez elemek hozzáadásához használnia kell

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

Az IndexedDB adatbázis mappában a régi adatbázisok .sst fájlként, az újak (jelenlegi) pedig .log fájlként kerülnek tárolásra.

A setVersion() elavult. De van itt egy trükk [az onupgradeneeded()-ről]: ...

Amint azt Parashuram Narasimhan blogja írja: "Chrome esetén: Chrome esetén az onupgradeneeded függvény nem hívódik meg. Az adatbázis onsuccess függvénye kerül meghívásra. Itt ellenőrizzük a setVersion metódus meglétét. Ha a metódus létezik, és a megadott verzió nagyobb, mint az adatbázis verziója, akkor a setVersion metódus kerül meghívásra. A setVersion kéréshívásának sikere a felhasználó onupgradeneeded metódusát hívja meg a verzió tranzakcióval. A metódus befejezése után a versionTransaction véglegesítésre kerül az adatbázis bezárásával. Az adatbázis újra megnyílik a legfrissebb verzióval, és ezt továbbítja a felhasználó által meghatározott onsuccessnek." (tehát az onupgradeneeded() meghívásához a db.setVersion("3")-t teszem.

Adatok lekérése a content.js fájlban:

dbreq.onupgradeneeded = function(event) ( console.log("dbreq.onupgradeneeded"); var db = event.target.result; var tx = db.transaction(["teszt_db"], "readonly"); var store = tx.objectStore("todo");

Az adatbázis megnyitásához használja az axemclion+jepp kódot (openReqShim függvény).

Amikor megnyitunk egy nem létező IndexedDB adatbázist, akkor az egy verziószámmal jön létre, verzió = 0. Ebben az esetben az onupgradeneeded() és az onsuccess() egymás után kerül meghívásra. Az onupgradeneeded() első meghívásakor a verzió már = 1. Amikor másodszor megnyitjuk a [meglévő adatbázist], az onupgradeneeded() többé nem kerül meghívásra, és a verziószám = 1. (?Nem növekszik) Csak a dbreq Az .onsuccess() meghívásra kerül.

Még egy dolog. Itt az áll, hogy „Chrome-mal 23. előtt szükséged van egy ilyen tranzakció manuális létrehozásához a setVersion() meghívásával – egy API-val, amelyet eltávolítottak a specifikációból. A régebbi specifikáció a következő címen található: http://www.w3.org/TR/2011/WD-IndexedDB-20110419/", vagyis a "NotFoundError: DOM IDBDatabase Exception 8" hiba elkerülése érdekében a Chrome-ban naplók, meg kell hívnia a setVersion()-ot.

A Chromium 6.0.472.63 (59945) verziójában az IndexedDB megvalósítása nem stabil, ezért le van tiltva és nem működik =)

Általában a background.js + iframe + cserét kell használnia a tartalomszkriptekkel üzeneteken keresztül

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

Content.js:

document.addEventListener("DOMContentLoaded", függvény () ( alert("Abc "+document.location.href); ));

Ha bővítményt szeretne elhelyezni a Chrome WebStore-ban, 5 dolláros belépési díjat kell fizetnie a Google-nak (akkor tetszőleges számú bővítményt helyezhet el). Fizethet VISA, MasterCard, AMEX vagy DISCOVER-en keresztül (továbbá fizetéskor meg kell adni a teljes levelezési cím valamint Keresztnév és Vezetéknév).

A bővítmény elhelyezéséhez Google-fiókra van szükség, és így tovább. Szüksége lesz egy képernyőképre és egy reklámképre. A kiterjesztés kódját manuálisan kell frissítenie, ugyanazon a Chrome WebStore-on keresztül (ahogy megértem, nincs automatikus frissítés URL alapján, mint a Firefoxban). A manifest.json fájlban frissítenie kell a kiterjesztés verzióját. Néhány perccel a hozzáadása után a bővítmény elérhető lesz a Chrome-bővítmények keresésében.

Bővítménycsomag Linuxhoz:

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

Kulcsszavak: Chromium buildek ablakokhoz HOGYAN KELL Google Chrome letöltési oldal, Google Chrome példabővítmények.

Mindig is szerettem volna elmondani az embereknek olyan érdekes lehetőségeket (technológiákat), amelyek ma már mindenki számára elérhetőek, de valamiért nem mindenki számára elérhetőek. Igen, kiderült, hogy ez egy tautológia, de teljes mértékben tükrözi belső felháborodásomat ezen a számomra égető témán. Akárhogy is legyen, most nem arról lesz szó, hogyan mondják. Ma a Google Chrome böngésző (a továbbiakban: Chrome) bővítményeinek létrehozásáról fogunk beszélni.

A cikkben fejleszteni kívánt bővítmény a Google Chrome Internetes áruházban található, azzal a különbséggel, hogy fejlett funkciókkal rendelkezik. Emellett a GitHubon van forráskód, ismét azzal a kitétellel, hogy ott minden CoffeeScript-ben van megírva, itt pedig JavaScript-el lesz megírva a történet. Egyébként nem vagyok a CoffeeScript rajongója vagy támogatója, de ez egy nagyon érdekes és hasznos dolog - azt tanácsolom, hogy próbálja ki.

Ha valaha is gondolkodott azon, hogy Chrome, Firefox, Maxthon és más böngészőkhöz hozzon létre egy bővítményt, akkor valószínűleg már észrevette, hogy a minimális erőfeszítést a Chrome számára kell elvégeznie. Ezt a megfelelő böngészők dokumentációjában ellenőrizheti.

A kiterjesztés írása a leírásával és a megoldandó feladatok beállításával kezdődik. Mivel én vagyok a saját főnököm, és annyiszor kihagyhatom a határidőket, ahányszor csak akarom, nem kell műszaki leírást írnom - elég megérteni, hogy:

• A bővítménynek el kell rejtenie az összes megjegyzést közösségi háló"VK";
• A bővítménynek képesnek kell lennie megjegyzések megjelenítésére;
• A bővítménynek képesnek kell lennie arra, hogy megjegyzéseket jelenítsen meg meghatározott oldalakon;

Első pillantásra minden egyszerű, és meg is tudjuk csinálni. A cikk keretein belül azonban csak az első két pontot fogjuk megvalósítani.

Előre látok olyan kérdéseket, amelyek tartalma valami ilyesmi lehet: „Miért rejtsünk el megjegyzéseket, ha ez az egész közösségi oldal lényege?!” Nos, ez egy jogos kérdés, amely részletes választ érdemel:

A körülmények úgy alakultak Utóbbi időben, ha látok kommenteket a VK-n, akkor facepalm hegyeket akarok adni a kommentelőknek. Nagyon sok különböző nyilvános oldalra iratkozom fel, tematikus (webfejlesztés) és nem annyira. És bármennyire furcsának is tűnik, a számomra érdekes tartalommal rendelkező csoportokban én leszek a legbőkezűbb, és nem macskák (esetemben pandák). Ennyire szakszerűtlen és csúnya információáramlást még sehol máshol nem láttam a kommentekben, és még a vitatkozásra is gondolnak. Ráadásul a hírfolyamban szereplő megjegyzések nem tűnnek esztétikusnak. Általánosságban elmondható és kész.

Számomra az volt a legkellemesebb meglepetés, hogy az utazás legelején az akciók leíró jellege fogad bennünket. Leegyszerűsítve le kell írnunk az alkalmazásunkat, annak jogait és lehetőségeit – ehhez a manifest.json fájl szolgál.

Először is ki kell töltenie három kötelező mezőt:

( "manifest_version": 2, // Chrome 18-tól kezdve 2. készlet, egyébként 1 (az ilyen régi dolgok nem támogatottak) "name": "My Extension", // Bővítmény neve "version": "versionString" // Bővítmény verziója )

Ha a névvel minden világos, és a manifest verzió még egyszerűbb, akkor közelebbről meg kell vizsgálnia a bővítmény verzióját.

Tehát mindannyian megszoktuk, hogy valaminek egy változata három, pontokkal elválasztott számból áll – Major.Minor.Patch (jelentése szám). Az npm, bower és egyéb élvezetekkel rövid a beszélgetés: vagy így, vagy sehogy. A Google azonban a következő lehetőségeket kínálja:

"verzió": "1" "verzió": "1.0" "verzió": "2.10.2" "verzió": "3.1.2.4567"

A jegyzékfájl összes mezőjéről a dokumentációból tudhat meg többet.

Esetünkben a manifest fájl így fog kinézni:

( "manifest_version": 2, "name": "__MSG_app_name__", "short_name": "VKCommentBlocker", "description": "__MSG_app_description__", "version": "0.1.0", "default_locale": "ru", " engedélyek": [ "activeTab" ], "browser_action": ( "default_icon": "icon_16.png", "default_title": "__MSG_browser_action__" ), "icons": ( "16": "icon_16.png", "48" ": "icon_48.png", "128": "icon_128.png" ), "background": ( "persistent": false, "page": "background.html" ), "content_scripts": [ ( "egyezik" : [ "http://vk.com/*", "https://vk.com/*" ], "css": [ "styles/commentblocker.css" ] ) ], "web_accessible_resources": [ "stílusok /commentblocker_on.css" ] )

Abból, amit korábban nem vettek figyelembe

• Az __MSG_key__ a Chrome megoldása az alkalmazások nemzetközivé tételére (i18n). Használható a manifest fájlban és más fájlokban (akár CSS-ben is).
• web_accessible_resources – erőforrás-útvonalak tömbje, amelyet a későbbiekben a weboldalak kontextusában használunk. Az elérési út megadása nélkül semmit nem lehet használni a weboldalakon, ha ilyen viselkedés várható.

Óriási plusz a Chrome-karma számára, hogy most már engedélyezhetjük a bővítményt, természetesen, ha a manifest.json fájlban megadott összes erőforrás létrejött.

Szerintem nem érdemes arra koncentrálni, hogy mi van a commentblocker.css és commentblocker_on.css fájlokban. Csak az elsőt adom meg, amely felsorolja az összes megjegyzést tartalmazó választót:

@charset "utf-8"; .wall_module .reply_link_wrap .reply_link ( láthatóság: rejtett !fontos; ) .wall_module .replies_wrap, #wl_replies_wrap, #wl_reply_form_wrap, #mv_comments_wrap, #mv_your_comment, #pver_comments !im portant láthatóság: rejtett fontos; ) törzs: után ;)

A commentblocker_on.css fájlban, ahogy sejtheti, ennek az ellenkezője igaz. Vegye figyelembe, hogy közvetlenül a CSS-ben egy olyan sort használok, amely a nyelvi kulcs tartalmát tartalmazza: "__MSG_mode_enable__" . Ideje létrehozni egy fájlt, amelyben ezek a kulcsok lesznek tárolva.

Bővítményünk gyökerében létrehozzuk a _locales könyvtárat, valamint a benne beágyazott en és ru könyvtárakat. Ezután leírjuk a kulcsainkat a messages.json fájlban.

( "app_name": ( "message": "VK Comment Blocker" ), "app_description": ( "message": " Kényelmes módja megjegyzések elrejtése a hírfolyamban és a csoportokban."), "browser_action": ("message": "Megjegyzés nézet váltása"), "mode_enable": ("message": "Nincs megjegyzés!"), "mode_disable": (" üzenet ": "Megjegyzésekkel!" ) )

Az üzenetmezőn kívül vannak más mezők is, amelyekről a dokumentációból tájékozódhat.

Most létrehozzuk a background.html fájlokat, először így:

Háttér

Itt minden ugyanaz, mint a normál HTML-ben – semmi szokatlan. Egyébként nem kell létrehoznia a background.html fájlt, mivel az automatikusan jön létre a manifest.json mezői alapján.

A kiterjesztés futtatható anélkül, hogy egy sor JavaScriptet írna. Ehhez át kell mennie a menün:

• A Google Chrome (Hamburger) beállítása és kezelése
• További eszközök
• Kiterjesztések
• Jelölje be a „fejlesztői mód” melletti négyzetet
• Kicsomagolt bővítmény letöltése
• Válasszon kiterjesztésű mappát

A bővítmény betöltődött és megjelent a menüben. Igen, igen, ez a „B”.

Úgy tűnik, hogy az imént létrehozott bővítménynek nincs semmi a fejében (nincs logika), és a közösségi hálózat „B” betűvel ellátott oldalain lévő összes megjegyzés el van rejtve. A válasz a manifest.json fájlban található, ahol a "content_scripts": () mezőben jeleztük, hogy a commentblocker.css fájl mely oldalakon (http://vk.com/* és https://vk.com/*) fog megjelenni. automatikusan szerepel, ami elrejti az összes megjegyzést. Azt tanácsolom, hogy olvasson többet a matematikai mintákról. Kinézetre olyan egyszerű, de a motorháztető alatt szinte egy szürke herélt, minden csengővel és síppal.

Tehát anélkül, hogy egyetlen kódsort is írnánk, már van egy bővítményünk, amely elvégzi a rá rendelt fő feladatot.

Marad a feladat második pontjának befejezése, nevezetesen a megjegyzések megjelenítési képességének megvalósítása. Röviden: egy commentblocker_on.css fájlt kell lenyomnunk, amely felülírja a commentblocker.css fájl szabályait. És itt a segítségünkre siet mindenható JavaScriptünk.

Emlékszel, mit mondtam a background.html-ről? Igen, igen, arról, hogy nem kell létrehozni. Változtassuk meg kissé a manifest.json fájlt:

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

Csak csatlakoztatta a JavaScript fájlt. Semmi különös. Menjünk erre a fájlra.

A JS-t nem lehet csak úgy betolni egy oldalra. És ugyanez a probléma nem csak a szkriptekkel áll fenn. Ezért speciális executeScript injekciót kell használnunk.

Először hozzá kell adnia egy kattintási eseménykezelőt a bővítmény ikonjához:

Chrome.browserAction.onClicked.addListener(function(tab) ( chrome.tabs.executeScript(tab.id, ( kód: "(" + toggleComments.toString() + ")();" )); ));

Ahol a toggleComments egy olyan funkció, amely beilleszti a CSS-fájlunkat az oldalra:

Var toggleComments = function() ( var extensionLink; (document.getElementById("extension") == null) ? (extensionLink = document.createElement("link"), extensionLink.href = chrome.extension.getURL("/styles/ commentblocker_on.css"), extensionLink.id = "extension", extensionLink.type = "text/css", extensionLink.rel = "stylesheet", document.getElementsByTagName("head").appendChild(extensionLink)) : (dokumentum. getElementsByTagName("head").removeChild(document.getElementById("kiterjesztés"))) );

Azt hiszem, elég lesz az a szó, hogy ez a kódrészlet ellenőrzi, hogy a CSS-ünk csatlakozik-e az oldalon, és következtetéseket von le az engedélyezés vagy letiltás szükségességéről.

Egyébként nem sok olyan rendezvény érhető el, amely különböző igényeket fed le. Például vannak ilyen események:

• onCreated – lap létrehozása.
• onUpdated - a lap frissítése.
• onRemoved – lap bezárása.

Érdemes megjegyezni, hogy az onUpdated eseményt kétszer hívják meg:

• oldal frissítése;

A StackOverflow-n azt tanácsolják, hogy ellenőrizze az oldal állapotát:

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

Most, amikor rákattint az ikonra, egy stílusfájl csatlakozik, amely megjeleníti a megjegyzéseket, és ha ismét rákattint az ikonra, azok ismét elrejthetők.

Egyébként érdemes megemlíteni az enyémet teljes verzió VK Comment Blocker bővítmény, amely a következő helyen érhető el

Az interneten számos olyan webhely található, amelyen egér vagy görgetősáv használata nélkül lehet felfelé görgetni egy oldalon. De ugyanakkor még mindig vannak olyan oldalak, ahol nincs ilyen megvalósítás. "Miért nem próbál meg olyan szkriptet írni, amely minden webhelyhez hozzáadna egy ilyen gombot?" - Gondoltam, és nekiláttam a megvalósításnak. Az ilyen szkripteket felhasználói szkripteknek nevezzük, és *.user.js kiterjesztéssel rendelkeznek. Például a Habrén olvashatod. Sajnos ez nem megy buktatók nélkül. Van néhány eltérés a userjs implementációjában különböző böngészők. A userjs szkriptünk megvalósításának leírására fogok összpontosítani, mint a Google Chrome böngésző kiterjesztésére.

Kötelező a Google bővítmények A Chrome egy fájl manifest.json amely leírja a paramétereket, a külső fájlok elérési útját (*.js, *.css stb.), verziótámogatást stb. bővítésére. A fájlról bővebben olvashat. Esetünkben a manifest.json fájl így néz ki:

( "manifest_version": 2, "content_scripts": [ ( "exclude_globs": , "include_globs": [ "*" ], "js": [ "jquery.js", "backTopUserJS.user.js" ], "css" ": [ "css/style.css" ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" ) ], "converted_from_user_script ": true, "description": "Felhasználói szkript kiterjesztése a google chrome-hoz", "name": "backTopUserJS", "verzió": "1" )

A kényelem kedvéért a JQuery könyvtárat használjuk, amelyet a manifest.json fájl és a fő szkriptfájl (esetünkben a backTopUserJS.user.js) mellé helyeztünk. Tartalma a következő:

// ==UserScript== // @name backTopUserJS // @author Aleksandr Filatov // @licensz MIT // @verzió 1.0 // ==/UserScript== function main() ( var disp = $(window).scrollTop () > 400 ? "blokk" : "nincs" var $upButton = $(";

"); $(dokumentum).find("body").append($upButton); $upButton.click(function () ( $("html, body").animate(( scrollTop: 0 ), "slow" ); )); $(window).scroll(function () ( if ($(window).scrollTop() > 400) $upButton.fadeIn("lassú"); else $upButton.fadeOut("slow"); )); var script = document.createElement("script"); script.appendChild("("+ main +"));) (document.body || document.head | | document.documentElement). appendChild(script);

Szerintem a forgatókönyv elég világos ahhoz, hogy részletesen megfontoljuk. Csak az utolsó 3 sort érdemes elmagyarázni. Valójában ez egy kis hack, amely beilleszti a szkriptünket a webhely oldalának kódjába. Ha valamelyikőtök jobb megoldást talál, kommentben megírhatja a javításait :)

Más böngészőkhöz hasonlóan telepíthet egyéni szkripteket a Google Chrome-ba, de mivel a Google törődik a biztonságunkkal, ezeket böngészőbővítményekbe kell csomagolni. Nézzük meg a telepítést lépésről lépésre.

Hozzon létre egy mappát a bővítményünkhöz, ehhez hasonló: C:\MyChromeExtensionUserJS

Minden bővítményhez saját könyvtárat hozunk létre, esetünkben például C:\MyChromeExtensionUserJS\backTopUserJS néven fogjuk hívni. Adjon hozzá kiterjesztési fájlokat ehhez a könyvtárhoz.

Menjünk: "Ó Google böngésző Chrome" -> "Bővítmények" fülre, vagy a címsorba írja be a chrome://extensions/

Jelölje be a „Fejlesztői mód” négyzetet

Kattintson a "Kicsomagolt bővítmény betöltése" gombra, és válassza ki a bővítményünk könyvtárát. Kattintson az "OK" gombra.

A bővítmény telepítve van, és használatra kész. A módosítások elvégzése után a bővítmények frissítéséhez egyszerűen kattintson a „Bővítmény frissítése” gombra, vagy fejlesztői módban nyomja meg a Ctrl+R billentyűkódot.

A szkriptforrásokat megtekintheti a githubon. A szkript nem állítja, hogy ideális, de csak példaként és lendületként szolgál saját egyéni szkriptek megírásához a Google Chrome-hoz.