Deze tutorial is verdeeld in 3 secties: Een eerste sectie waarin we verschillende concepten uitleggen met betrekking tot extensies in Chrome, hun structuur en de basis voor het maken van een extensie. In het tweede gedeelte zullen we ons concentreren op het maken van extensies voor deze geweldige browser zoals Google Chrome, waarbij we verschillende praktische voorbeelden geven. Ten slotte zullen we in het derde gedeelte geavanceerde opties uitleggen bij het maken van extensies en hoe u deze in de Google Chrome-webwinkel kunt publiceren, zodat deze beschikbaar is voor het grote publiek.
Wat zijn extensies in Google Chrome?Extensies zijn kleine programma's die de functionaliteit van de browser, in dit geval Chrome, kunnen wijzigen en verbeteren. Deze worden ontwikkeld met behulp van webtechnologieën zoals HTML, Javascript en CSS.
De extensies hebben weinig tot geen gebruikersinterface. De onderstaande afbeelding toont bijvoorbeeld een pictogram van een hangslot dat, wanneer erop wordt geklikt, een kleine interface opent.
Deze specifieke extensie wordt gebruikt om uw e-mails te coderen en te decoderen met een PGP-sleutel. Extensies zijn bestanden die in één zijn verpakt en die de gebruiker downloadt en installeert. Deze verpakking hoeft, in tegenstelling tot normale webapplicaties, niet afhankelijk te zijn van webcontent.
Zoals hierboven besproken, kunt u met extensies functionaliteit aan Chrome toevoegen zonder diep in de native code te duiken. Nieuwe extensies kunnen worden gemaakt met basistechnologieën waar de meeste webontwikkelaars mee werken: HTML, CSS en Javascript.
1. Hoe een Chrome-extensie te maken en te programmeren
Om te beginnen zullen we een eenvoudige extensie maken die een afbeelding van Google ophaalt met de URL van de huidige pagina als zoekterm. We zullen dit doen door een gebruikersinterface-element te implementeren dat we chrome.browserAction, waarmee we een pictogram direct naast het Chrome-menu kunnen plaatsen, waarop u kunt klikken voor snelle toegang. Als u op dat pictogram klikt, wordt een pop-upvenster geopend met een afbeelding die is verkregen van de huidige pagina, die er als volgt uitziet:
Om onze oefening te starten, zullen we een map maken met de naam Afbeelding_Viewer, hierin zullen we alle bestanden opnemen waarmee we aan de slag gaan. Als ontwikkelingseditor kun je degene van je voorkeur gebruiken, in mijn geval zal ik Chrome Dev Editor gebruiken, die je kunt downloaden op het volgende adres:
Chrome-ontwikkelaarseditor
Het eerste dat we nodig hebben, is een manifestbestand maken met de naam manifest.json. Dit manifest is niets meer dan een metadatabestand in JSON-formaat dat eigenschappen bevat zoals de naam, beschrijving, versienummer van de extensie, enzovoort. Op een gevorderd niveau gaan we het gebruiken om aan Chrome aan te geven wat de extensie gaat doen en welke machtigingen nodig zijn om bepaalde dingen te doen.
Het manifest-bestandsformaat is als volgt:
{// Vereist "manifest_version": 2, "name": "My Extension", "version": "versionString", // Aanbevolen "default_locale": "es", "description": "Een beschrijving in platte tekst", " pictogrammen ": {…}, // Selecteer een (of geen)" browser_action ": {…}," page_action ": {…}, // Optioneel" author ":…," automation ":…," background ": {// Aanbevolen "persistent": false}, "background_page":…, "chrome_settings_overrides": {…}, "chrome_ui_overrides": {"bookmarks_ui": {"remove_bookmark_shortcut": true, "remove_button": true}}, " chrome_url_overrides ": {…}," commands ": {…}," content_capabilities ":…," content_scripts ": [{…}]," content_security_policy ":" policyString "," convert_from_user_script ":…," copresence ":… , "current_locale":…, "devtools_page": "devtools.html", "event_rules": [{…}], "externally_connectable": {"matches": ["*: //*.example.com/*" ]}, "file_browser_handlers": […], "file_system_provider_capabilities": {"configurable": true, "multiple_mounts": true, "source": "network"}, " homepage_url ":" http: // path / to / homepage "," import ": [{" id ":" aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa "}]," incognito ":" overspannen of splitsen "," input_components ":…," key " : "publicKey", "minimum_chrome_version": "versionString", "nacl_modules": […], "oauth2":…, "offline_enabled": true, "omnibox": {"keyword": "aString"}, "optionele_permissions" : ["tabs"], "options_page": "options.html", "options_ui": {"chrome_style": true, "page": "options.html"}, "permissions": ["tabs"], " platforms ":…," plug-ins ": […]," vereisten ": {…}," sandbox ": […]," short_name ":" Korte naam "," handtekening ":…," spellingcontrole ":…, "storage": {"managed_schema": "schema.json"}, "system_indicator":…, "tts_engine": {…}, "update_url": "http: //path/to/updateInfo.xml", "version_name ":" aString "," web_accessible_resources ": […]} Vervolgens beschrijf ik de functie die aan de belangrijkste labels voldoet:
In vereist:
- manifest_version: Het is de manifestversie, het wordt weergegeven door een geheel getal dat de versie van het bestandsformaat aangeeft. Vanaf Chrome 18 moeten ontwikkelaars het nummer 2 opgeven.
- jam: Het is de naam die uw extensie zal hebben. Dit moet uit maximaal 45 tekens bestaan, naam is het belangrijkste definitie-element van de extensie en het is een verplicht veld. Het wordt weergegeven op de volgende plaatsen:
a) In de installatiedoos.
b) In de gebruikersinterface waar de extensie wordt beheerd.
c) In de virtuele Chrome-winkel.
- versie: Het moet bestaan uit één tot vier gehele getallen, gescheiden door punten die de versie van de extensie aangeven. Hier zijn enkele voorbeelden van geldige versies:
"Versie 1"
"Versie": "1.0"
"Versie": "2.10.2"
"Versie": "3.1.2.4567"
Aanbevolen:
- default_locale: Specificeert de submap van _locales (talen) die de standaardreeksen voor deze extensie bevat. U moet alle voor de gebruiker zichtbare tekenreeksen in een bestand met de naam messages.json plaatsen. Elke keer dat u een nieuwe taal opneemt, moet u een nieuw bestand toevoegen berichten.json onder de directory _locales / localecode waar localecode de taalcode is, net zoals en Engels is en voor de Spaanse taal is.
Een voorbeeld van een geïnternationaliseerde extensie met ondersteuning voor Engels (en), Spaans (es) en Koreaans (ko), is het volgende:
- Beschrijving: Het bestaat uit een string in platte tekst (zonder HTML of ander formaat) van maximaal 132 tekens die de functionaliteit van de extensie beschrijft.
- Pictogrammen: Hiermee kunt u een of meer pictogrammen toevoegen die de extensie vertegenwoordigen. Er moet altijd een pictogram van 128x128px worden opgegeven. Deze wordt gebruikt tijdens de installatie en in de Chrome Web Store. Extensies moeten ook een pictogram van 48 x 48 bevatten, dat wordt gebruikt op de beheerpagina voor Chrome-extensies (chrome: // extensions). U kunt ook een pictogram van 16 x 16 opgeven dat moet worden gebruikt als favicon voor de pagina's van een extensie.
Pictogrammen moeten over het algemeen in PNG-indeling zijn, omdat dit de beste ondersteuning biedt voor transparantie. Ze kunnen echter in elk formaat zijn dat WebKit ondersteunt, inclusief BMP.webp, GIF.webp, ICO en JPEG.webp. Hier is een voorbeeld van de pictogrammenspecificatie:
"icons": {"16": "icon16.png.webp", "48": "icon48.png.webp", "128": "icon128.png.webp"},Voorbeeld
Selecteer een (of geen):
- browser_action: Gebruik browser_action om pictogrammen op de hoofdwerkbalk bovenaan de Google Chrome-browser, rechts van de adresbalk, te plaatsen. Daarnaast kunt u tooltip (zwevend bericht), badge (zwevende tekst op het pictogram) en pop-up (zwevend venster) toevoegen.
Gebruiksvoorbeeld browser_action:
{"name": "Mijn extensie",… "browser_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // optioneel}, "default_title": "Google Mail", // optioneel; toont een "default_popup" tooltip: "popup.html" // optional}, …}
- page_action: Gebruik deze API om uw pictogram in de adresbalk te plaatsen.
Voorbeeld van gebruik:
{"name": "Mijn extensie",… "page_action": {"default_icon": {// optional "19": "images / icon19.png.webp", // optional "38": "images / icon38.png.webp" // optioneel}, "default_title": "Google mail", // optioneel; toon in de beschrijving "default_popup": "popup.html" // optioneel},…} Ex
Optioneel:
- Achtergrond: Een veelvoorkomende behoefte bij extensies is om een enkele pagina te hebben voor het uitvoeren van lange reeksen om een taak of status te beheren. Dit is een HTML-pagina die wordt uitgevoerd in combinatie met de extensie. Het begint wanneer de extensie wordt uitgevoerd en activeert slechts één exemplaar tegelijk. In plaats van Achtergrond te gebruiken, is het aan te raden om een evenementpagina te gebruiken.
In een typische extensie met een pagina op de achtergrond fungeren de gebruikersinterface, bijvoorbeeld de browser_action of page_action, en sommige pagina-opties als de weergave van de extensie. Wanneer de weergave een bepaalde status moet weten (venster gesloten, pagina bijgewerkt …), wordt de status opgevraagd naar de pagina die als achtergrond wordt gevonden. Wanneer de achtergrondpagina meldt dat er een wijziging in de status is opgetreden, wordt de weergave geïnformeerd dat deze moet worden bijgewerkt of dat er actie moet worden ondernomen.
Het formaat is als volgt:
{"name": "Mijn extensie",… "background": {"scripts": ["background.js"]},…} Formaat- Evenementenpagina's: Voordat u het volgende kenmerk definieert, is het noodzakelijk om uit te leggen waar de evenementpagina's over gaan. Een veelvoorkomende behoefte aan toepassingen en extensies is om een enkel, langlopend script te hebben om een taak of status af te handelen. Dit is het doel van evenementpagina's. Gebeurtenispagina's worden alleen geladen als dat nodig is. Wanneer het niet actief iets doet, wordt het uit de cache gehaald, waardoor geheugen en andere systeembronnen worden vrijgemaakt.
De prestatievoordelen zijn aanzienlijk, vooral op apparaten met een laag stroomverbruik. Daarom wordt aanbevolen om meer evenementpagina's te gebruiken dan Achtergrond.
De declaratie van een gebeurtenispagina in het manifestbestand zou als volgt zijn:
{"name": "Mijn extensie", … "achtergrond": {"scripts": ["eventPage.js"], "persistent": false}, …}Zoals je kunt zien, is het verschil met Achtergrond het persistente attribuut, dat een valse status heeft.
- chrome_settings_overrides: Het wordt gebruikt om een geselecteerde configuratie in Chrome te overschrijven. Deze API is alleen beschikbaar voor Windows.
Sommige van deze configuraties kunnen de startpagina zijn (startpagina van de browser, zoekmachine (de zoekmachine), enz.
Configuratievoorbeeld:
{"name": "Mijn extensie",… "chrome_settings_overrides": {"homepage": "http://www.homepage.com", "search_provider": {"name": "name .__ MSG_url_domain__", "keyword " : "keyword .__ MSG_url_domain__", "search_url": "http: //www.foo.__MSG_url_domain__/s? q = {searchTerms}", "favicon_url": "http: //www.foo.__MSG_url_domain__/favicon. ico" , "suggest_url": "http: //www.foo.__MSG_url_domain__/suggest? q = {searchTerms}", "instant_url": "http: //www.foo.__MSG_url_domain__/instant? q = {searchTerms}" , " image_url ":" http: //www.foo.__MSG_url_domain__/image? q = {searchTerms} "," search_url_post_params ":" search_lang = __ MSG_url_domain__ "," Suggest_url_post_params ":" Suggest_lang = __MSG_ instant_lang_do MSG_url_domain =" instant_url_params_url_domain " __MSG_url_domain__ "," image_url_post_params ":" image_lang = __ MSG_url_domain__ "," alternate_urls ": [" http: //www.moo.__MSG_url_domain =","search/s? .noo.__MSG_url_url_ ?q = {searchTerms} "]," encoding ":" UTF-8 "," is_default ": true}," startup_pages ": [" http://www.st artup.com "]}," default_locale ":" de ", …}
- chrome_ui_overrides: Deze eigenschap van de extensie wordt gebruikt om sommige instellingen in de Chrome-gebruikersinterface te overschrijven. Zoals bijvoorbeeld de markeringen. De configuratie is als volgt:
{"name": "Mijn extensie",… "chrome_ui_overrides": {"bookmarks_ui": {"remove_button": "true", "remove_bookmark_shortcut": "true"}},…} In dit geval wordt de ster die de browser voor favorieten heeft, geëlimineerd.
- chrome_url_overrides: Dit is een manier om het HTML-bestand van de extensie te vervangen voor een pagina die de Google Chrome-browser normaal gesproken biedt. Bovendien kunt u ook de CSS- en JavaScript-code overschrijven.
Een extensie met deze configuratie kan een van de volgende Chrome-pagina's vervangen:
- Bladwijzerbeheer: Het is de pagina die verschijnt wanneer de gebruiker de optie kiest in het bladwijzerbeheermenu in het Chrome-menu of voor Mac, het bladwijzerbeheeritem in het bladwijzermenu.
VERGROTEN
- Geschiedenis (geschiedenis): Het is de pagina die verschijnt wanneer de gebruiker de geschiedenis kiest in het Chrome-menu of, op de Mac, het item toont de volledige geschiedenis uit het menu in de geschiedenisoptie.
VERGROTEN
- Nieuw tabblad (nieuw tabblad): Het is de pagina die verschijnt wanneer de gebruiker een nieuw tabblad of venster vanuit de browser maakt. U kunt deze pagina ook openen door het volgende adres in de adresbalk te plaatsen: chrome: // newtab
VERGROTEN
OpmerkingEen enkele extensie kan slechts één pagina overschrijven. Een extensie kan bijvoorbeeld niet de bladwijzers en op zijn beurt de geschiedenispagina overschrijven.
{"name": "Mijn extensie",… "chrome_url_overrides": {"newtab": "mypage.html" // de opties zijn nieuwtabblad, geschiedenis, bladwijzers},…}
- commando's: Deze opdracht-API wordt gebruikt om de sneltoetsen toe te voegen die een actie in uw extensie activeren. Bijvoorbeeld een actie om de browseractie te openen of een opdracht naar de extensie te sturen.
{"name": "Mijn extensie",… "commands": {"toggle-feature-foo": {"suggested_key": {"default": "Ctrl + Shift + Y", "mac": "Command + Shift + Y "}," description ":" Schakelfunctie foo "}," _execute_browser_action ": {" Suggested_key ": {" windows ":" Ctrl + Shift + Y "," mac ":" Command + Shift + Y ", "chromeos": "Ctrl + Shift + U", "linux": "Ctrl + Shift + J"}}, "_execute_page_action": {"suggested_key": {"default": "Ctrl + Shift + E", "windows ":" Alt + Shift + P "," mac ":" Alt + Shift + P "}}},…} Op uw achtergrondpagina kunt u een controller binden voor elk van de opdrachten die zijn gedefinieerd in manifest.js (behalve voor '_execute_browser_action'J'_execute_page_action') via onCommand.addListener.
Bijvoorbeeld:
chrome.commands.onCommand.addListener (functie (opdracht) {console.log ('Opdracht ingedrukt:', opdracht);});
- content_scripts: Het zijn javascript-bestanden die worden uitgevoerd in de context van webpagina's. Door gebruik te maken van het standaard Document Object Model (DOM) kunnen zij de details van de webpagina's van de browserbezoeken lezen of deze wijzigen.
{"name": "Mijn extensie",… "content_scripts": [{"matches": ["http://www.google.com/*"], "css": ["mystyles.css"], " js ": [" jquery.js "," mijnscript.js "]}],…}
- content_scripts: Om onze extensies veiliger te maken en mogelijke cross-site scriptingproblemen te voorkomen, heeft het Chrome-extensiesysteem het algemene concept van Inhoudsbeveiligingsbeleid (CSP). Dit introduceert een zeer strikt beleid dat extensies standaard veiliger maakt. Over het algemeen werkt CSP als een zwart-wit-lijstmechanisme voor de bronnen die door zijn extensies worden geladen of uitgevoerd.
{…, "Content_security_policy": "script-src 'self' https://example.com; object-src 'self'"…}Dit waren enkele van de belangrijkste kenmerken. Voor onze eerste oefening zullen we ons manifest.json-bestand als volgt definiëren:
{"manifest_version": 2, "name": "Opstartvoorbeeld", "description": "Deze extensie toont een afbeelding van Google-afbeeldingen van de huidige pagina", "version": "1.0", "browser_action": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," permissies ": [" activeTab "," https://www.googleapis.com/ "]}Zoals u kunt zien in ons voorbeeldmanifest, hebben we een browser_action gedeclareerd, de activeTab-machtiging om de URL van het huidige tabblad te zien en de host heeft toestemming gekregen, op deze manier kan de Google API worden geopend om externe afbeeldingen te zoeken.
Op hun beurt worden er 2 bronbestanden gevonden bij het definiëren van browser_action: icon.png.webp en popup.html. Beide bronnen moeten in het uitbreidingspakket aanwezig zijn, dus laten we ze nu maken:
- icon.png.webp Het wordt weergegeven naast het multifunctionele vak, wachtend op gebruikersinteractie. Het is gewoon een 19px x 19px PNG-bestand.
- popup.html wordt weergegeven in het pop-upvenster dat is gemaakt als reactie op de klik van de gebruiker op het pictogram. Het is een standaard HTML-bestand en de inhoud is als volgt:
Pop-up van de extensie Aan de slagVERGROTEN
2. Zorg ervoor dat het selectievakje voor ontwikkelaarsmodus in de rechterbovenhoek is aangevinkt.
3. Klik op Uitgepakte (uitgepakte) extensie uploaden om een dialoogvenster voor bestandsselectie te openen.
VERGROTEN
4. Navigeer naar de map waar uw extensiebestanden zich bevinden en selecteer deze.
U kunt ook de map met uw project slepen en in het venster Chrome-extensies neerzetten. Hierdoor wordt de extensie in uw browser geladen.
Op deze manier hebben we een simpele extensie gemaakt voor Google Chrome. In onze volgende aflevering zullen we ingaan op de constructie van extensies in combinatie met ontwikkelingsframeworks zoals jQuery en Bootstrap, waarmee we onze ontwikkeling kunnen stroomlijnen.
2. Voorbeeld van extensies voor Chrome
In deze sectie zullen we verschillende voorbeelden uitvoeren die ons in staat zullen stellen om veel van de functionaliteiten volledig te begrijpen die bestaan bij het bouwen van een extensie voor Google Chrome.Oefening 1 - Blauwe achtergrond
In dit voorbeeld gaan we een eenvoudige extensie maken waarin we leren hoe we de inhoud van de pagina's die we in onze browser laden, kunnen wijzigen. In dit geval zullen we de achtergrondkleur van de geladen pagina wijzigen en in blauw veranderen.Zoals ik in het eerste deel van deze tutorial heb uitgelegd, kun je elke ontwikkelings-IDE gebruiken, in mijn geval zal ik Chrome Dev Editor gebruiken.
VERGROTEN
Om te beginnen, zullen we een nieuwe map maken met de naam Blauwe achtergrond en we zullen een project met dezelfde naam maken.
VERGROTEN
VERGROTEN
Binnen zullen we ons eerste bestand maken manifest.json die de definities van onze extensie zal bevatten.
VERGROTEN
Ons archief manifest.json moet de volgende code bevatten:
{"manifest_version": 2, "name": "Blauwe achtergrond", "description": "Deze extensie heeft de achtergrondkleur van de huidige pagina gewijzigd", "version": "1.0", "browser_action": {"default_icon" : "icon.png.webp", "default_title": "Maak deze pagina blauw"}, "permissions": ["activeTab"], "background": {"scripts": ["background.js"], "persistent": false }}Omdat onze extensie eenvoudig is, bevat deze alleen een pictogram dat een actie uitvoert wanneer erop wordt gedrukt. Zoals je kunt zien in het bestand manifest.json we definiëren een naam en de beschrijving ervan, in de browser_action We definiëren het pictogram dat wordt weergegeven in de balk van onze Google Chrome-browser en een titel die wordt weergegeven wanneer de muisaanwijzer boven dat pictogram wordt geplaatst. Met betrekking tot de machtigingen zullen we definiëren dat dit alleen op het actieve tabblad wordt gedaan. Het bestand dat op de achtergrond wordt uitgevoerd, is ons bestand background.js die niet persistent zal zijn, omdat deze alleen wordt uitgevoerd wanneer we op de extensie klikken.We maken ons pictogram en slaan het op in de projectdirectory zoals gedefinieerd in manifest.json. In dit geval in de root van het project.
Vervolgens maken we een JavaScript-bestand met de naam background.js in dezelfde map met de volgende code:
// aangeroepen wanneer de gebruiker op de extensie chrome.browserAction.onClicked.addListener klikt (functie (tab) {console.log ('Changing' + tab.url + 'to blue!'); chrome.tabs.executeScript ({ code: ' document.body.style.backgroundColor = "blauw"'});});Het hele project als volgt verlaten:
VERGROTEN
Om onze extensie uit te voeren, hoeft u alleen maar op de afspeelknop op de bovenste balk van de Chrome Dev Editor te drukken.
VERGROTEN
Door erop te drukken wordt de extensie automatisch geladen in de Google Chrome browser.
Laten we onze extensie in actie zien, door op het pictogram te klikken dat ik heb gemaakt (blauwe achtergrond met de letter A in het wit), de pagina die ik in het huidige tabblad heb geladen, in mijn geval mijn gebruikersaccount in Solvetic (http: // www .solvetic… .berth-ramncgev /) verandert de achtergrond in blauw. Opgemerkt moet worden dat alleen de kleur van het BODY-element zal veranderen, en niet de DIV's die het bevat, aangezien ik het zo heb gedefinieerd in mijn background.js.
VERGROTEN
Oefening 2 - Meerdere kleuren
Voor dit voorbeeld zal ik laten zien hoe we ons werk kunnen stroomlijnen vanuit de ontwikkelings-IDE en vanuit de code. In de Chrome-ontwikkelaarseditor, we klikken op de knop + om een nieuw project aan te maken, deze keer zullen we het type project wijzigen door de optie te selecteren JavaScript Chrome-app.
VERGROTEN
Zoals u kunt zien, genereert het automatisch de volledige structuur van ons project. Met ons bestand manifest.json met de meest voorkomende definities.
VERGROTEN
Aan dit bestand zullen we een korte beschrijving op het label toevoegen Beschrijving het plaatsen van de gewenste tekst, in mijn geval "Extensie waarmee de achtergrondkleur kan worden gewijzigd". Voor dit project zullen we 2 pictogrammen maken, een van 16x16 pixels en de andere van 128x128 pixels, zoals je kunt zien in de structuur, deze worden opgeslagen in de map activa.
We zullen de volgende code onder de tag toevoegen: minimale_chrome_versie:
"permissions": ["tabs", "http: // * / *", "https: // * / *"], "browser_action": {"default_title": "Verander de pagina in meerdere kleuren.", " default_popup ":" popup.html "},Zoals u kunt zien, definiëren we een pop-up of weergave die alle html zal bevatten die de gebruiker zal zien wanneer hij op onze extensie klikt. Dan voegen we de volgende code toe:"content_scripts": [{"matches": [""], "css": ["assets / bootstrap / css / bootstrap.min.css"], "js": ["assets / jquery.min.js", "main.js"], "run_at": "document_start"}]content_scripts- Bevat de JavaScript- (js) en stylesheet- (css)-bestanden die in de context van de webpagina worden uitgevoerd. Het kan de volgende eigenschappen bevatten:
- wedstrijden: Verplicht. Specifiek op welke pagina het script wordt geïnjecteerd.
- uitsluiting_overeenkomsten: Optioneel. Pagina's die worden uitgesloten, zodat het script niet wordt geïnjecteerd.
- match_about_blank: Optioneel. Deze waarde is Booleaans en geeft aan of het script op de lege pagina wordt ingevoegd (about: blank en about: srcdoc).
- css: Optioneel. Het is een arrangement dat de lijst met css-bestanden aangeeft die in de pagina worden ingevoegd die in de browser wordt opgevraagd.
- js: Optioneel. Het is een arrangement met de lijst met JavaScript-bestanden die in de pagina die in de browser wordt opgevraagd, wordt ingevoegd.
- draaien op: Optioneel. Het is een tekenreeks die bepaalt wanneer de js-bestanden worden geladen. De waarde ervan kan zijn:
- document_start: Bestanden worden ingevoegd na een css-bestand, maar voordat een DOM wordt gebouwd of een ander script wordt uitgevoerd.
- document_end: Bestanden worden direct toegevoegd nadat de DOM is voltooid, maar voordat bronnen zoals afbeeldingen en frames worden geladen.
- document_idle: De browser kiest de tijd voor het injecteren van scripts tussen document_end, en onmiddellijk nadat window.onload de gebeurtenis activeert.Deze optie is degene die standaard is geconfigureerd.
Aan het einde van ons bestand manifest.json Het zou als volgt moeten zijn:
VERGROTEN
Zoals je kunt zien, hebben we een aantal nieuwe dingen toegevoegd, in het pand css We hebben het Bootstrap-framework gedefinieerd dat de ontwikkeling op stijlniveau niet eenvoudiger zal maken. Gevolgd op eigendom js We definiëren de JQUERY JavaScript-bibliotheek, waardoor we niet sneller en eenvoudiger kunnen werken met alles wat met JavaScript te maken heeft. Ons index.html-bestand zou er als volgt uit moeten zien:
Pop-up Meerdere kleurenroodBlauwGroenteGeelIn het index.html-bestand maken we eenvoudigweg de verwijzingen naar onze Bootstrap-, JQuery- en main.js-bestanden. In de body definiëren we een bootstrap-container met zijn divs die zullen dienen als knoppen voor de verschillende kleuropties.
Voor het main.js-bestand zullen we de click-gebeurtenis gebruiken die wordt uitgevoerd wanneer de muisknop op elke klasse "col-md-12" wordt ingedrukt, waarbij de achtergrondkleur van het geselecteerde element wordt genomen en deze wordt toegewezen aan de hoofdtekst van de pagina is geopend. Vervolgens wordt de gebeurtenis window.close () uitgevoerd; die het venster van onze extensie sluiten. De code die is gedefinieerd voor main.js is als volgt:
$ (document) .ready (functie () {$ (".col-md-12"). klik op (functie () {var color = $ (this) .css ("achtergrondkleur"); chrome.tabs. executeScript (null, {code: "$ ('body'). css ('background-color', '" + color + "')"}); window.close ();});}); Het resultaat bij het uitvoeren van onze extensie zullen we het pictogram kunnen visualiseren dat we ervoor hebben gemaakt in de bovenste balk.
Als u op onze extensie klikt, wordt de volgende pop-up weergegeven:
En als u een van de opties selecteert, is het resultaat het volgende:
VERGROTEN
Oefening 3 - Topgeschiedenis
In dit voorbeeld passen we alles toe wat hierboven is gezien, we zullen een extensie maken die ons, wanneer we erop klikken, een pop-up toont met de lijst met de meest bezochte pagina's van onze browser, die directe toegang tot die pagina's geeft. Het enige verschil in dit voorbeeld is dat we toestemming vragen aan een van de Chrome-API's om toegang te krijgen tot de meest bekeken pagina's van Chrome. De naam van deze api is chrome.topSites.
Om te beginnen gaan we Chrome-ontwikkelaarseditor en we hebben ons project gemaakt met de naam TopHistorisch en in projecttype selecteren we de JavaScript Chrome App-optie.
Dan ons bestand manifest.json Het zou als volgt moeten zijn:
{"manifest_version": 2, "name": "TopHistorial", "short_name": "TopHistorial", "description": "Lijst van meest bekeken pagina's in onze browser weergeven", "version": "0.0.1", " minimum_chrome_version ":" 38 "," machtigingen ": [" topSites "]," browser_action ": {" default_icon ":" icon.png.webp "," default_popup ":" popup.html "}," content_scripts ": [{" komt overeen met ": [" "]," css ": [" assets / bootstrap / css / bootstrap.min.css "]," js ": [" assets / jquery.min.js "," main.js "], "run_at": "document_start"}]} Zoals je ziet, voegen we een nieuw attribuut toe aan het manifest om toestemming te kunnen krijgen op de Chrome api: Machtigingen declareren, wordt gebruikt in de meeste Chrome-API's in uw extensie, moet u deze eerst declareren door het veld te plaatsen rechten in je manifest. Elke machtiging kan een tekenreeks zijn die bij de volgende lijst hoort (verdeeld in 3 afbeeldingen):
Met betrekking tot ons bestand: popup.html Het zou als volgt moeten zijn:
Pop-up Meerdere kleurenOns archief main.js die de api-query en de afhandeling van de klikgebeurtenis zal bevatten, wordt als volgt weergegeven:
$ (document) .ready (function () {function openpage () {chrome.tabs.create ({url: $ (this) .attr ("href")});} function buildPopupDom (mostVisitedURLs) {for (var i = 0; i <mostVisitedURLs.length; i ++) {$ ("# top_list"). Toevoegen ('
Bij het uitvoeren van onze extensie zullen we een pictogram boven aan de browser kunnen zien, die het in mijn geval in blauw ontwerpt. Wanneer erop wordt geklikt, wordt een pop-up geopend met de lijst met pagina's die ik het meest heb bezocht vanuit mijn browser geordend op het aantal bezoeken dat ik heb gemaakt.
VERGROTEN
