Kā izveidot teksta meklēšanas grāmatzīmi ar JavaScript

Grāmatzīmes ir JavaScript lietojumprogrammas kuru var piekļūt kā pārlūka grāmatzīmes. Tos izmanto, lai lietotāji varētu veikt dažādas darbības tīmekļa lapās. Piemēram, šis FontShop grāmatzīmes ir paredzēts FontShop tīmekļa fontu priekšskatīšanai jebkurā tīmekļa lapā.

Šajā rakstā mēs redzēsim, cik ātri un viegli tas ir ielieciet grāmatzīmi izveidojot to veic Wikiwand (labāka izskata Wikipedia) Meklēt izvēlētajam tekstam jebkurā tīmekļa lapā.

Kā grāmatzīmes darbojas

Grāmatzīmes lapas URI izmanto javascript: protokolu tas norāda, ka tas ir sastāv no JavaScript koda. Noklikšķinot uz grāmatzīmes, varat palaist JavaScript tīmekļa lapā un veic uzdevumus, piemēram, izmainot lapas izskatu, novirzot uz citu lapu vai parādot jaunu informāciju par to.

Tā kā grāmatzīmes ir būtībā JavaScript koda kopas, tos ir viegli izveidot ar nelielām JavaScript zināšanām, vai nu personiskai lietošanai, vai arī piedāvājot to saviem lietotājiem, piemēram, WordPress ar savu presi. Šī grāmatzīme.

Sāciet darbu ar JavaScript kodu

The URL struktūra Wikiwand lieto angļu valodas rakstu https://www.wikiwand.com/lv/articleTitle. Mums ir jāraksta skripts, kas pāriet uz Wikiwand lapu, kura URL beidzas ar virkni, ko lietotājs tikko izvēlējies - atlasītajam tekstam būs nepieciešams jāievieš Raksts.

Pirmkārt, mēs saņemt tekstu lietotājs lapā ir izvēlējies šādu kodu:

 getSelection () toString () 

Mums vajag nodot atpakaļ nosūtītais objekts getSelection () kā virkni izmantojot toString () metodi, lai to izdarītu izvºlieties izvºlºto tekstu.

Tālāk mums ir nepieciešams veikt vizīti uz Wikiwand rakstu lapu. Mēs to sasniegsim, izmantojot šādu loģiku, kur NewURL būs Wikiwand raksta lapas URL (kas satur atlasīto virkni beigās):

 atrašanās vieta.href = newURL 

Kad mēs ievietojam šos divus koda fragmentus kopā, mēs nonākam pie šāda skripta:

 location.href = 'https://www.wikiwand.com/lv/'+getSelection () .toString () 

Tagad mums tikai jāpievieno javascript: protokols uz priekšu, un mums ir galīgais kods mēs izmantosim mūsu grāmatzīmē:

 // pievienot vienā rindā bez rindu pārtraukumiem javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () .SString (). aizstāt (/ n / g, '% 20' ) 

Izvēles aizstāt (/ n / g, '% 20') beigās aizstāj jebkuru jaunu līniju rakstzīmi (n) tekstā ar vienu atstarpi (% 20).

JavaScript kods ir gatavs. Ņemiet vērā, ka kods ir jānovieto vienā rindā bez līnijas pārtraukumiem, jo vēlāk tas būs pievienots teksta ievades laukam.

Izveidojiet grāmatzīmi

Atveriet pārlūkprogrammas grāmatzīmju logu un pievienot jaunu grāmatzīmi:

• Firefox: Nospiediet taustiņu ctrl + shift + B / cmd + nobīde + B, ar peles labo pogu noklikšķiniet uz "Grāmatzīmju rīkjosla" un atlasiet "Jauna grāmatzīme".
• Chrome: Nospiediet taustiņu ctrl + shift + O / cmd + alt + B, ar peles labo pogu noklikšķiniet uz "Grāmatzīmju josla" un atlasiet "Pievienot lapu ...".

URL laukā kopējiet JavaScript kodu no iepriekš. Kad grāmatzīme ir izveidota, tā ir gatava lietošanai; dodieties uz jebkuru tīmekļa lapu, izvēlieties vārdu jūs vēlaties meklēt Wikiwand, un noklikšķiniet uz grāmatzīmes - Wikiwand rakstu lapa tiks atvērta uzreiz.

Ātra piekļuve

Tā vietā, lai grāmatzīmju izvēlne tiktu sasniegta katru reizi, kad jums ir nepieciešams grāmatzīmes, jūs varat izvēlēties parādīt to tieši jūsu pārlūkprogrammā, lai ātri piekļūtu.

• Firefox: Augšējā izvēlnes joslā noklikšķiniet uz "Skatīt> Rīkjoslas" un atlasiet "Grāmatzīmju rīkjosla".
• Chrome: Nospiediet taustiņu kombināciju ctrl + shift + B / cmd + shift + B.

Izveidojiet grāmatzīmju saites saiti

Jūs varat pievienot grāmatzīmi tīmekļa vietnei kā hipersaiti kā arī apmeklētāji var grāmatzīmi vienkārši velkot un nometot saiti uz grāmatzīmju rīkjoslu vai ar peles labo pogu noklikšķinot uz saites un izvēloties opciju, lai to atzīmētu.

Lai pārvērstu grāmatzīmi hipersaiti, izveidojiet HTML tagu ar grāmatzīmju skriptu kā tās vērtību href atribūts:

   Wikiwand Meklēt grāmatzīmi  

Kā uzglabāt grāmatzīmes atsevišķi

Jūs varat arī izmantot atsevišķu JavaScript failu lai saglabātu grāmatzīmju koda kodu, kas, iespējams, nav nepieciešams, ja jums ir īss skripts - tāpat kā tas, ko mēs tikko redzējām šajā apmācībā -, bet var būt ērts, ja JavaScript kods ir pārāk garš, lai to kopētu uz grāmatzīmju joslu jūsu pārlūkprogrammas.

Fails myscript.js gribu galveno JavaScript kodu grāmatzīmi, un jums ir nepieciešams pievienot šādu kodu kā grāmatzīmes URL (vai nu pārlūkprogrammas grāmatzīmju joslā, vai kā href atribūts HTML failā):

 // pievienot vienā rindā bez rindas pārtraukumiem javascript: (() => ar (dokumentu) let s = createElement ('skripts'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Iepriekš minētais koda fragments ir iesaiņota ar sevi atsaucošu bultiņu funkciju, un izmanto ECMAScript 6 funkcijas, piemēram, ļaut atslēgvārdu, lai samazinātu kodu garumu. Tas papildina a > tagu, kas norāda uz myscript.js failu dokumenta sadaļu kad lietotājs noklikšķina uz grāmatzīmes (Ņemiet vērā, ka jums var būt nepieciešams izmantot absolūtu ceļu myscript.js fails).