Maak bladwijzers - de juiste manier

Bladwijzers kunnen worden gedefinieerd als minitoepassingen die zich voordoen als minuscule JavaScript-fragmenten die zich in uw browser bevinden en extra functies bieden voor een webpagina.

Vandaag gaan we kijken naar het maken van bookmarks van nul af aan en onderweg enkele best practices volgen.

Ze zijn niet voor de nerd, in feite zijn ze behoorlijk gebruikersgericht.

We zijn altijd op zoek naar manieren om onze browse-ervaring te verbeteren, of dit nu wijdverspreid of weinig bekend is. Bookmarklets, ik dacht vroeger, behoorde tot de laatste - het bastion van supernerds. Tot mijn ergernis ontdekte ik dat ik het helemaal niet bij het rechte eind had. Ze zijn niet voor de nerd, in feite zijn ze behoorlijk user-centric, implementeren veel mooie nette functionaliteiten en, net zoals mensen voorspelden, het is een essentieel onderdeel geworden van de manier waarop ik met de browser communiceer - en de internet.

Vandaag wil ik je graag helpen bij het ontwikkelen van bookmarklets die handige bladwijzers implementeren. Ja, bladwijzers. We zullen meer dan één bouwen, zij het vrij kleine. Geïntrigeerd? Laten we beginnen!

Dus wat precies zijn Bookmarklets?

Om mijn artikel intro te citeren:

Bladwijzers kunnen worden gedefinieerd als minitoepassingen die zich voordoen als minuscule JavaScript-fragmenten die zich in uw browser bevinden en extra functies bieden, met slechts één muisklik.

Het woord zelf is een blend, valies voor het pedant, van de woorden bladwijzer en applet. Deze kleine fragmenten van JavaScript, ook favelets genoemd, laten u extra functionaliteit oproepen voor elke pagina die u bezoekt.

Omdat ze alleen uit JavaScript bestaan, zijn ze behoorlijk draagbaar - ze worden door alle browsers op alle platforms ondersteund, zelfs op mobiele apparaten en tablets. Het installeren ervan is net zo eenvoudig als ze naar hun werkbalk slepen!

Ja, maar wat is het punt?

Het punt is dat bookmarklets je een heleboel dingen laten doen die anders te ontwikkelaargericht zijn om te bereiken. Elke functionaliteit die u krijgt met een bookmarklet kan gedupliceerd worden via een browserconsole en een beetje tijd. Bookmarklets vereenvoudigen het proces eenvoudig - het verpakken van de code die functionaliteit in een leuk knopje implementeert.

Bookmarklets kunnen grofweg worden onderverdeeld in een aantal categorieën:

Degenen die gegevens doorgeven. Bookmarklets die een pagina indienen bij een service vallen onder deze categorie. Bookmarklets die te maken hebben met sociale media, woordenboekzoekopdrachten, zoekopdrachten vallen allemaal onder deze categorie. We gaan er een bouwen die bij Reddit wordt ingediend.
Degenen die informatie verkrijgen en / of de huidige pagina wijzigen. We gaan een bookmarklet maken die de achtergrondkleur van een pagina instelt.
Degenen die achter de schermen werken. Een bookmarklet die cookies van de huidige site wist is een goed voorbeeld en een die we gaan bouwen.

# 1 - Aan de slag

Het eerste punt dat u moet onthouden, is om alle JavaScript-code bij de javascript URI. Browsers hebben dit specifieke voorvoegsel geïmplementeerd, zodat de daaropvolgende inhoud kan worden behandeld en geparseerd als juiste JavaScript-code.

Door bijvoorbeeld op deze link te klikken - zie de code hieronder - wordt een melding weergegeven.

 Linky

# 2 - Gebruik een anonieme functie als een omslag

Houd er rekening mee dat uw code tegen de momenteel geladen pagina zal lopen - een pagina die waarschijnlijk een eigen JavaScript heeft en alle resulterende botsingen die dit met zich meebrengt. Het laatste dat je nodig hebt, is dat je bookmarklet de huidige pagina doorbreekt.

Als u uw code netjes in een anonieme functie verpakt, zorgt u ervoor dat er geen botsingen met namen worden genoemd. Bovendien zullen JavaScript-noobs worden geflunderd en zullen denken dat je een god bent, als je van dat soort dingen houdt.

javascript: (function () // uw code hier) ();

Dit is relevant wanneer u JavaScript ook elders gebruikt. Altijd, altijd isoleer uw code.

# 3 - Externalize, indien nodig

Een bookmarklet hoeft niet per se klein te zijn, je bent vrij om zo groot te gaan als je wilt. In die gevallen is het in het belang van distributie en het up-to-date houden van uw code zonder handmatige tussenkomst van de gebruiker, het beste om een wrapper te maken die de code naar binnen haalt.

 javascript: (function () var jsCode = document.createElement ('script'); jsCode.setAttribute ('src', 'http: //path/to/external/file.js'); document.body.appendChild ( jsCode); ());

Dat is ongeveer wat de bovenstaande code doet: het maakt een scriptelement, stelt de bron in op een bestand dat elders wordt gehost en tenslotte voegt het toe aan het document. Op deze manier kunt u, telkens wanneer een deel van uw code verandert, uw wijzigingen in één enkele bron implementeren en deze direct laten doorgeven aan elke gebruiker.

Notitie: U bent niet beperkt tot dit alleen doen voor JavaScript. Als uw bookmarklet gebruikmaakt van een frontend, kunt u de HTML en CSS ook extern gebruiken, waardoor uw bookmarklet echt zelf wordt bijgewerkt.

# 4 - Oefening voorzichtig bij het toevoegen van een bibliotheek

Nogmaals, als je een kolos van een bookmarklet aan het bouwen bent, heb je misschien behoefte aan een van die JavaScript-bibliotheken. Maar het is niet zo eenvoudig om ze op uw pagina te gebruiken, maar u moet ervoor zorgen dat de bibliotheken nog niet beschikbaar zijn. Bibliotheken zoals jQuery en MooTools domineren de markt en u doet er goed aan om ervoor te zorgen dat deze nog niet is geladen.

Een ander probleem is dat de pagina mogelijk een andere bibliotheek heeft geladen, wat kan leiden tot conflicten over de besturing van het $ -symbool. Versiebotsingen kunnen op een bepaald moment ook van invloed zijn, houd daar dus ook rekening mee.

Hier is een snelle shell voor de code die ik over het algemeen gebruik. Houd er rekening mee dat u in uw productiecode rekening moet houden met de problemen die ik hierboven heb genoemd.

 if (! ($ = window.jQuery)) // typeof jQuery == 'undefined' werkt te script = document.createElement ('script'); script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; script.onload = releasetheKraken; document.body.appendChild (script);  else releasetheKraken ();  function releasetheKraken () // The Kraken is vrijgegeven, meester! // Ja, ik ben kinderachtig. Plaats hier uw code

De code moet redelijk duidelijk zijn. Laten we er toch snel doorheen rennen.

Eerst bepalen we of jQuery wordt geladen door te controleren of het jQuery-object in de naamruimte bestaat.
Zo niet, dan bereiden we het snel voor op opname. We volgen de aanbevolen procedures en laden deze op vanaf een CDN. Zorg er ten slotte voor dat u naar de hoofdfunctie verwijst die de code bevat die moet worden uitgevoerd.
Als het al is opgenomen, voert u alleen de hoofdwrapper-functie uit.

Als je al dit gedoe wilt vermijden, raad ik de uitstekende bookmarklet-generator van Ben Alman van harte aan. Het zorgt op een zeer schone manier voor naamruimte- en versieconflicten. Goed spul!

# 5 - Knoei niet met de bovenliggende pagina, tenzij je moet

Bladwijzers zijn nutteloos als ze onbedoeld een pagina doorbreken.

Ik kan dit punt niet genoeg benadrukken. Bladwijzers zijn nutteloos als ze onbedoeld een pagina doorbreken. En je zorgen maken over JavaScript is niet het enige waar je mee te maken hebt.

Als je een frontend hebt, spelen de HTML en CSS ook een rol. Wijs uw containers en klassen geen algemene namen toe - als u het 'container' noemt, zult u voor altijd mijn eeuwige haat hebben.

Een eenvoudige manier is om prefix [of achtervoegsel, ik vind het niet erg] alles met een specifieke string voor een bookmarklet. En als je je CSS schrijft, wees dan heel, heel specifiek. Gebruik maken van cascadering is leuk, maar gebruik het met uiterste precisie. Stijlen die naar de hoofdpagina lekken, zijn onregelmatig en wekken geen vertrouwen op.

# 6 - Testen, testen, testen

Als u een kleinere bookmarklet aan het bouwen bent, waarbij het niet zinvol is om een bibliotheek van derden toe te voegen, zult u een altijd aanwezige demon-cross-browser compatibiliteit tegenkomen.

Het lijkt misschien nogal voor de hand liggend, maar dit is iets dat veel mensen vaak vergeten. Zorg ervoor dat u zoveel browsers op zoveel mogelijk platforms test.

Een andere gemakkelijke val om in te vallen is een bookmarklet die bedoeld is om te werken op alle sites die alleen selectief werken. Pagina's kunnen verschillende hiërarchieën hebben en gebruikmaken van verschillende methodologieën. Sommige sites kunnen HTML5 omarmen en de bijbehorende containers gebruiken, terwijl andere mogelijk veilig spelen en generieke div's gebruiken. Terwijl je mijnbouwt voor informatie, zorg er dan voor dat je rekening houdt met elke school van ontwikkeling.

En Off We Go

Nu we enkele punten hebben bekeken om in gedachten te houden tijdens de ontwikkeling, gaan we de drie bookmarklets bouwen waar ik het eerder over had - een die tot elke categorie behoort.

Een boekenmarkt die zich onderwerpt aan Reddit
Een boekenmarkt die cookies van de huidige website opruimt
Een bookmarklet die de achtergrondkleur van een pagina verandert

Als u al vertrouwd bent met standaard JavaScript, zou de volgende code een makkie moeten zijn - het zijn maar een paar regels code! De onderstaande bladwijzers zijn al een hele tijd bij me en ik kan er niet achter komen waar ik ze oorspronkelijk zag. Als je dat doet, laat me een kort berichtje achter in de opmerkingen en ik voeg dienovereenkomstig credits toe.

Bookmarklet # 1 - Verzenden naar Reddit

We beginnen met een supereenvoudige oplossing - indienen bij een externe service, Reddit in ons geval.

 javascript: location.href = 'http: //www.reddit.com/submit? url =' + encodeURIComponent (location.href) + '& title =' + encodeURIComponent (document.title)

Dit zijn een aantal vrij simpele dingen, rechtstreeks vanaf de site. Geen anonieme wrapper of namespacing omdat de functionaliteit vrij beperkt is.

Wanneer de bookmarklet wordt aangeroepen, gebeurt het volgende in logische volgorde:

De titel en de URL van de pagina worden vastgelegd met behulp van location.href en document titel
Om ervoor te zorgen dat er geen illegale personages binnensluipen, coderen we het met de encodeURIComponent methode
Ten slotte voegen we alles samen om onze URL te verkrijgen en de locatie van de pagina daar naartoe te wijzigen

Dit patroon werkt vrijwel voor de meeste zoek- en indieningsdoeleinden. De enige variabele hier is de URL die u verzendt - elke toepassing heeft een andere benadering. Onder een minuut zoeken moet je door.

Een validerende bookmarklet ziet er bijvoorbeeld zo uit:

 javascript: location.href = 'http:? //validator.w3.org/check uri =' + encodeURIComponent (location.href)

Merk op dat we alleen de titel van de pagina hebben weggegooid en de URL-structuur zodanig hebben gewijzigd dat deze naar de W3-validatieservice verwijst.

Bookmarklet # 2 - De achtergrond van een pagina wijzigen

 javascript: void (document.bgColor = prompt ('Kleur? Hex of naam zal doen. Mag ik roze suggereren?', 'roze'))

Dit is net zo eenvoudig als het lijkt. Om dingen supereenvoudig te houden, heb ik ervoor gekozen om geen variabelen en validatie te introduceren. We zullen alleen naar de kerncode kijken.

Als eerste, we maken een prompt die de gebruiker vraagt om een kleur om de achtergrond in te stellen. Omdat we de invoer niet controleren, vertrouw ik erop dat je niet stout bent.
Tenslotte, we zetten de achtergrond naar de gekozen kleur door document.bgColor. Dat is het!

Ja ik weet het bgColor is verouderd en ja, ik weet dat ik me vies moet voelen, maar dit zal redelijk goed werken omdat een snelle test op moderne browsers positief uitpakte.

Je kunt hier redelijk wat mee spelen. Dit is vergelijkbaar met hoe je CSS-stijl in het algemeen zou toepassen op elementen via JavaScript. We passen het alleen toe op willekeurige pagina's. Merk op dat verschillende pagina's verschillende structuren hebben, dus als de pagina een volledige verpakkingscontainer heeft, is het effect mogelijk zinloos. In deze gevallen moet u mogelijk op de hoofdcontainer jagen en de styling daarop toepassen.

Bookmarklet # 3 - Cookies wissen

 javascript: function () var c = document.cookie.split (";"); for (var i = 0; i-? 1 c [i] .substr (0, e): c [i]; document.cookie = n + "=; verloopt = Do, 01 Jan 1970 00:00:00 GMT";  ()

Niet zo ingewikkeld als het eruit ziet - cookies hebben slechts een zeer strikte syntaxis, dus we zullen het stap voor stap moeten analyseren. Laten we de code eens doorlopen:

Split document.cookie op basis van semicolors. c wordt nu een array met alle cookies die zijn ingesteld voor het huidige domein.
Loop door de array.
Controleer of de cookie het gelijk aan symbool bevat, dat wil zeggen of een cookiewaarde is ingesteld en geretourneerd
Zo ja, dan zullen we alle informatie tot het einde vastleggen. Zo niet, laat het koekje dan zijn zoals het is
Voeg ten slotte een tekenreekswaarde toe die de waarde van de cookie leegt, samen met het definiëren van een vervaldatum uit het verleden, en deze dus effectief wist

Vergeet niet dat bookmarklets nog steeds onder de pagina werken, zodat u geen toegang krijgt tot cookies van andere domeinen. U bent beperkt tot de pagina waarop u de bookmarklet aanroept.

Het zit er op

En we zijn klaar. Bedenk dat we slechts het oppervlak van bookmarklets hebben bekrast. Veel van hen zijn complete applicaties binnen zichzelf, met een goede front-end om op te starten. Die nemen veel tijd in beslag en zijn van plan om te bouwen, net als elke niet-triviale toepassing. Dit was slechts om je voet tussen de deur te krijgen van de ontwikkeling van de bookmarklet. Hopelijk heb je deze tutorial interessant gevonden en dit was nuttig voor jou.

Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Heel erg bedankt voor het lezen!

Code