Tekstihaku-kirjanmerkin luominen JavaScriptin avulla

kirjanmerkkejä olemme JavaScript-sovellukset jota voidaan käyttää nimellä selaimen kirjanmerkit. Niiden avulla käyttäjät voivat suorittaa erilaisia ​​toimia verkkosivuilla. Tämä FontShopin kirjanmerkki on esimerkiksi FontShopin web-fonttien esikatselu millä tahansa verkkosivulla.

Tässä artikkelissa näemme, kuinka nopea ja helppo se on kokkaa kirjanmerkki luomalla sellainen suorittaa Wikiwandin (parempi Wikipedia) Hae valitusta tekstistä millä tahansa verkkosivulla.

Miten kirjanmerkit toimivat

Kirjanmerkin URI käyttää javascript: protokolla joka osoittaa sen olevan koostuu JavaScript-koodista. Kun napsautat kirjanmerkin, voit suorittaa JavaScript verkkosivulla ja suorittaa tehtäviä, kuten sivun ulkoasun muuttaminen, ohjaaminen toiseen sivulle tai uuden tiedon näyttäminen.

Koska kirjanmerkit ovat olennaisesti JavaScript-koodit, niitä on helppo luoda pienillä JavaScript-tiedoilla, joko henkilökohtaiseen käyttöön tai sen tarjoamiseen käyttäjillesi, kuten WordPress tekee sen lehdistölle Tämä kirjanmerkki.

Aloita JavaScript-koodi

URL-osoitteen rakenne Wikiwand käyttää englanninkielistä artikkelia https://www.wikiwand.com/en/articleTitle. Meidän on kirjoitettava komentosarja, joka siirtyy Wikiwand-sivulle, jonka URL-osoite on päättyy merkkijonoon, jonka käyttäjä juuri valitsi - valitun tekstin on oltava on otettava käyttöön articleTitle.

Ensin me saada tekstiä käyttäjä on valinnut sivulla seuraavan koodin:

 getSelection (). toString () 

Meidän täytyy heittää palautettu esine getSelection () merkkijonona käyttämällä toString () menetelmä, jotta se voidaan tehdä lähetä valittu teksti.

Seuraavaksi meidän täytyy suorittaa vierailu Wikiwand-artikkelisivulle. Saavutamme tämän käyttämällä seuraavaa logiikkaa, missä newURL tulee olemaan Wikiwand-artikkelisivun URL-osoite (joka sisältää valitun merkkijonon lopussa):

 location.href = newURL 

Kun laitamme nämä kaksi koodinpätkää yhteen, päädymme seuraavaan komentosarjaan:

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

Nyt meidän täytyy vain lisätä javascript: protokollan etupuolella, ja meillä on lopullinen koodi käytämme kirjanmerkkimme:

 // lisää yhteen riviin ilman rivinvaihtoja javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () .SString (). korvaa (/ / g, '% 20' ) 

Valinnainen korvata (/ \ n / g,% 20 ') lopussa korvaa uuden linjan merkin (\ n) tekstissä yhdellä välilyönnillä (% 20).

JavaScript-koodi on valmis. Huomaa, että koodi on sijoitettava yhdellä rivillä ilman rivinvaihtoja, koska myöhemmin se tulee olemaan lisätään tekstinsyöttökenttään.

Luo kirjanmerkki

Avaa selaimesi kirjanmerkkiikkuna ja lisää uusi kirjanmerkki:

• Firefox: Paina ctrl + shift + B / cmd + shift + B, napsauta hiiren kakkospainikkeella "Kirjanmerkit-työkalurivi" ja valitse "Uusi kirjanmerkki".
• Kromi: Paina ctrl + shift + O / cmd + alt + B, napsauta hiiren kakkospainikkeella "Kirjanmerkkipalkki" ja valitse "Lisää sivu…".

URL-kentässä kopioi JavaScript-koodi ennen. Kun kirjanmerkki on luotu, se on valmis käytettäväksi; siirry mihin tahansa verkkosivuun, valitse sana haluat etsiä Wikiwandissa ja napsauta kirjanmerkkiä - Wikiwand-artikkelisivu avautuu kerralla.

Nopea pääsy

Sen sijaan, että haluat hakea kirjanmerkkivalikkoon aina, kun tarvitset kirjanmerkin, voit valita näyttää sen suoraan selaimesi nopeaa pääsyä varten.

• Firefox: Napsauta "Näytä> Työkalurivit" ylävalikkorivillä ja valitse "Kirjanmerkkien työkalurivi".
• Kromi: Paina ctrl + shift + B / cmd + shift + B.

Luo kirjanmerkkilinkki

Voit lisätä kirjanmerkkisi verkkosivustoon hyperlinkkinä samoin, mitä kävijöitä voi merkitä joko vetämällä ja pudottamalla linkki kirjanmerkin työkaluriville tai napsauttamalla linkkiä hiiren kakkospainikkeella ja valitsemalla sen kirjanmerkin.

Voit muuttaa kirjanmerkkisi hyperlinkiksi luomalla HTML-tunniste kirjanmerkkikirjoituksella sen arvona href ominaisuus:

   Wikiwand-haku Bookmarklet  

Miten kirjanmerkit tallennetaan erikseen

Voit myös käytä erillistä JavaScript-tiedostoa tallentaa kirjanmerkkikoodin, joka ei todennäköisesti ole tarpeen, jos sinulla on lyhyt komentosarja - kuten se, jota olemme juuri nähneet tässä opetusohjelmassa - mutta voi tulla käteväksi, kun JavaScript-koodi on liian pitkä kopioimaan sen kirjanmerkkipalkkiin selaimesi.

Tiedosto myscript.js tahtoa aseta tärkein JavaScript-koodi kirjanmerkin kohdalle, ja sinun on lisättävä seuraava koodi kirjanmerkin URL-osoitteeksi (joko selaimen kirjanmerkkipalkkiin tai href määrite HTML-tiedostossa):

 // lisää yhteen riviin ilman rivinvaihtoja javascript: (() => kanssa (asiakirja) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Yllä oleva koodinpätkä on kääritty itsestään kutsuvaan nuolitoimintoon, ja käyttää ECMAScript 6: n ominaisuuksia, kuten päästää avainsanan, jotta koodin pituus pienenee. Se lisää a > tunniste, joka osoittaa myscript.js tiedosto osassa asiakirjaa kun käyttäjä napsauttaa kirjanmerkkiä (Huomaa, että saatat joutua käyttämään absoluuttista polkua myscript.js file).