Nieuw tabblad aanpassen in Chrome met Google Tab Maker

Voor dit doel heeft Chrome een tool ontwikkeld waarmee je zelf een extensie samenstelt die telkens de lay-out en de inhoud in de Nieuwe tabblad-pagina inlaadt. Het is zelfs mogelijk verschillende nieuwe tabbladen te maken, waarna Chrome er telkens willekeurig één uitpikt. Je hoeft niets te installeren om Google Tab Maker te gebruiken, want het gaat om een webtool. Bovendien is Tab Maker gratis en hoef je ook niet met code aan de gang. 

Als je jouw extensie deelt met anderen, krijgen ook zij deze nieuwe tabbladen te zien. Hiermee is het een interessante oplossing voor bedrijven, organisaties, scholen en verenigingen die langs die weg hun community willen warmhouden met nieuwtjes en aankondigingen. Vroeger ontwikkelden professionele programmeurs dit soort Chrome-extensies, maar met Tab Maker kan iedereen gepersonaliseerde tabbladen maken.

Werkingsprincipe

Om de werking van Google Tab Maker te begrijpen, is het handig om te weten hoe de tool in elkaar zit. Om mee te beginnen, zijn er elf verschillende sjablonen waaruit je kunt kiezen. Die sjablonen bepalen de basisvorm en verdelen de inhoud in vakken of blokken. In deze vakken kun je afbeeldingen, tekst, links of animated gifs plaatsen en ook koppelingen naar je favoriete nieuwsfeeds toevoegen. Je krijgt dan iedere keer als je een nieuw tabblad opent, het meest recente nieuws te zien. 

De inhoud van het sjabloon leg je vast in een Google-spreadsheet. Daarna verbind je het spreadsheet met het gekozen sjabloon, en in het vervolg wordt de inhoud in de juiste vakken geladen.

Sjabloon kiezen

Om aan de slag te gaan klik je op de groene knop rechtsboven: Make your own. In het volgende venster lees je dat de hele procedure slechts vijf stappen inneemt. Klik op Get started, je krijgt dan de elf sjablonen te zien. Wanneer je op zo’n template klikt, zie je rechts een grotere weergave. Er zijn ook sjablonen bij voor dubbele functies, voor als je bijvoorbeeld de resultaten wilt vergelijken van verschillende sportclubs of de weersvoorspellingen van verschillende steden naast elkaar wilt zetten. Heb je een template gekozen, dan klik je op Next.

Inhoud

In de volgende stap moet je in een Google-spreadsheet de inhoud vastleggen. Je kunt daarbij met een blanco werkblad beginnen, of de voorbeeldinhoud openen zodat je een idee krijgt wat er van je verwacht wordt. Onder de knop Add your own content zie je het vak waar je straks het internetadres moet plakken van de Google-spreadsheet. We gaan zelf onze gegevens invullen, dus kiezen voor de onderste knop.

Spreadsheet

Een Google-spreadsheet opent zich, waarin je in koeienletters gevraagd wordt om een kopie van dit werkblad te maken. Dat doe je via het menu Bestand / Kopie maken. Geef dit nieuwe document een herkenbare naam, bijvoorbeeld inhoud_tab_maker. Standaard zal Google Spreadsheets dit nieuwe document via Google Drive publiceren. Dat kun je zo laten staan.

Onderaan dit werkblad zie je dat deze spreadsheet uit drie tabbladen bestaat die je door de opbouw zullen leiden. Het eerste tabblad laat je dus een kopie van dit werkblad maken. Stap twee nodigt je uit om inhoud toe te voegen en in stap drie kun je het werkblad publiceren.

Kolommen en rijen

Nadat we het werkblad gekopieerd hebben, gaan we de inhoud maken. Dat is slechts een kwestie van het vullen van de cellen met afbeeldingen, links en tekst. Klik onderaan op het tabblad met de naam Step 2: Add content to this sheet. Omdat het blad automatisch wordt opgeslagen in je Google-account kun je er op ieder moment naar terugkeren en eraan verder werken. 

Bovenaan in de spreadsheet zie je de vakkenindeling van het sjabloon waarin je werkt. De nummers van de vakken zul je herkennen in de kolommen van het rekenblad. Ieder blok heeft een eigen kolom en er is ook een kolom voor de achtergrondafbeeldingen. De rijen in het rekenblad staan telkens voor een nieuw tabblad. Als je bijvoorbeeld tien rijen gebruikt, dan maak je evenveel nieuwe tabbladen. Het is van cruciaal belang dat je geen foto’s en gifs combineert met tekstuele inhoud in dezelfde kolom. 

Om een afbeelding of gif toe te voegen, ga je er online naar op zoek. Klik met rechts op het zoekresultaat en kies Adres van de afbeelding kopiëren. Daarna plak je deze link in de juiste cel. Hetzelfde doe je met hyperlinks naar andere bronnen, zoals nieuwsfeeds.

 In dit voorbeeld maken we een nieuwe tabbladpagina voor een fotoclub die iedere maand twee foto’s van leden onder de aandacht brengt. 

Publiceren

Zelfs al ben je nog niet helemaal klaar, je kunt de spreadsheet alvast publiceren door in Google Spreadsheets naar Bestand / Delen te gaan. Daar kies je de optie Publiceren op het internet. In het pop-upvenster moet je even opletten. Onder Link staat de optie standaard ingesteld op Heel document. Uiteraard moet je niet het hele spreadsheet-document publiceren, maar alleen het tabblad met de naam Step 2: Add content to this sheet. 

Daarnaast moet je kiezen in welk bestandsformaat je de spreadsheet publiceert. Standaard staat dit ingesteld op Webpagina. Wijzig dit in de optie Door komma’s gescheiden waarden (.csv). Pas deze instellingen aan en klik op Publiceren. Je krijgt dan een link die begint met https://docs.google.com/spreasheet/. Die link moet je kopiëren.

Body aanpassen

Daarna ga je terug naar de geopende pagina in Tab Maker. De link die je daarnet hebt gekopieerd, plak je in het url-vak. Klik vervolgens op Next. Er verschijnt nu een voorvertoning van de nieuwe tabbladpagina, waarna je de lay-out nog moet verfijnen. 

Eerst pas je de eigenschappen van de gehele pagina aan. Daarna kun je de eigenschappen blok voor blok wijzigen. Zo kun je de achtergrondkleur selecteren en bepalen hoe je de afbeeldingen en tekst in de vakken wilt hebben. Bij afbeeldingen heb je drie opties onder Image Fit: Repeat, Fill en Cover. Bij Repeat wordt de afbeelding herhaald tot het frame gevuld is. 

Met Fill zal de webapp de afbeelding in de hoogte en breedte uitrekken tot het in het frame past, waardoor het beeld vervormd wordt. Met Cover wordt de afbeelding zodanig geschaald en uitgesneden dat hij het frame vult zonder vervorming.

Verschillende tabbladen

In dit voorbeeld hebben we vijf rijen voor evenveel nieuwe tabbladen gemaakt. Onderaan kun je de voorvertoning per rij (dus per nieuwe tabbladpagina) opvragen. Selecteer de gewenste rij en klik op Refresh. Met Page Padding bepaal je de breedte van de marge. Met Block Spacing beslis je hoeveel ruimte er moet zijn tussen de verschillende blokken. 

Hoe groter de waarde die je hier ingeeft, hoe breder de ruimte tussen de inhoudsblokken wordt, maar hoe kleiner die inhoudsblokken zelf worden.

Blokinhoud aanpassen

Verzorg de inhoud van de blokken. Gaat het om tekst, dan kun je het lettertype, de lettergrootte, de stijl, de hoogte en nog meer andere eigenschappen bewerken. Als je op zo’n element klikt, dan verschijnt in de linkerkolom het nummer van het blok met de bijbehorende parameters waarmee je verticale en horizontale uitlijning regelt. 

Ieder blok kun je van een kleurtje voorzien met de regelaar Block Color en de dekking van die achtergrondkleur bepaal je met Background Alpha. Als je die bijvoorbeeld op 50 instelt, dan wordt de achtergrondkleur semitransparant. Verder is het mogelijk om de blokken van afgeronde hoeken te voorzien met Border Radius.

Bundelen

In de volgende stap bundel je alle eigenschappen die je hebt vastgelegd in het Google-spreadsheet samen met Tab Maker in een nieuwe extensie. Geef de nieuwe tab een naam en typ een korte beschrijving. Daaronder kies je een pictogram voor de extensie. 

Tab Maker presenteert een set pictogrammen die je vrij mag gebruiken, maar je mag zelf ook een grafisch bestandje van je harde schijf selecteren. Wanneer alle vakken zijn ingevuld, kun je klikken op de blauwe knop Download zip file.

Privé delen of via Web Store

Nu heb je de keuze. Wil je de extensie zelf delen met een groepje mensen die je kent? Of ben je zo trots op je project dat je de extensie wilt verspreiden via de Chrome Web Store? 

In dat laatste geval moet je jezelf registreren als ontwikkelaar en een eenmalige bijdrage van vijf dollar betalen aan registratiekosten. Daarna moet je het zip-bestand uploaden in het Developer Dashboard. Tenslotte moet je de extensie laten goedkeuren door Google voordat hij in de Web Store wordt opgenomen.

Om de extensie te delen binnen je eigen kring, zal Tab Maker ook een zip-bestand samenstellen. Dat kun je daarna naar de anderen versturen.

Installeren

De ontvanger van jouw extensie moet het bestand tab-maker.zip eerst uitpakken. Daarna opent hij Chrome en gaat hij naar het extensiebeheer door in het adresvak chrome://extensions te typen. Daar schakelt hij de Ontwikkelaarsmodus in, te vinden in de rechterbovenhoek.

Hierdoor komt de knop Uitgepakte extensie laden in beeld en kan hij de uitgepakte extensie uploaden. Om het resultaat te bekijken, moet diegene een nieuw tabblad openen.