วิธีการสร้าง Bookmarklet ค้นหาข้อความด้วย JavaScript

bookmarklets เป็น แอปพลิเคชัน JavaScript ที่สามารถเข้าถึงได้เป็น บุ๊คมาร์คของเบราว์เซอร์. พวกเขาจะใช้เพื่อให้ผู้ใช้ ดำเนินการต่าง ๆ บนหน้าเว็บ ตัวอย่างเช่น bookmarklet นี้โดย FontShop ใช้สำหรับดูตัวอย่างแบบอักษรเว็บ FontShop บนหน้าเว็บใด ๆ.

ในบทความนี้เราจะดูว่ามันง่ายและรวดเร็วเพียงใด ปรุง bookmarklet โดยการสร้างสิ่งนั้น ดำเนินการ Wikiwand (Wikipedia ที่ดูดีกว่า) ค้นหา สำหรับข้อความที่เลือกบนหน้าเว็บใด ๆ.

bookmarklet ทำงานอย่างไร

URI ของ bookmarklet ใช้ javascript: โปรโตคอล นั่นแสดงว่ามันเป็น ประกอบด้วยรหัส JavaScript. เมื่อคุณคลิกที่ bookmarklet คุณสามารถ เรียกใช้ JavaScript บนหน้าเว็บและทำงานต่าง ๆ เช่นการเปลี่ยนลักษณะที่ปรากฏของหน้าเปลี่ยนเส้นทางไปยังหน้าอื่นหรือแสดงข้อมูลใหม่บนหน้านั้น.

ตั้งแต่ที่คั่นหนังสือเป็นหลัก ชุดรหัส JavaScript, พวกเขาสร้างได้ง่ายด้วยความรู้ JavaScript เล็กน้อยไม่ว่าจะเป็นการใช้ส่วนตัวหรือเพื่อนำเสนอให้กับผู้ใช้ของคุณเช่น WordPress ทำได้ด้วยการกดที่คั่นหน้านี้.

เริ่มต้นด้วยรหัส JavaScript

โครงสร้าง URL Wikiwand ใช้สำหรับบทความภาษาอังกฤษคือ https://www.wikiwand.com/en/articleTitle. เราจำเป็นต้องเขียนสคริปต์ที่ข้ามไปยังหน้า Wikiwand ของ URL ใด ลงท้ายด้วยสตริงที่ผู้ใช้เพิ่งเลือก - ข้อความที่เลือกจะต้อง ถูกแทนที่ articleTitle.

ก่อนอื่นเรา รับข้อความ ผู้ใช้เลือกบนหน้าด้วยรหัสต่อไปนี้:

 getSelection. ToString () () 

เราจำเป็นต้อง โยน วัตถุที่ส่งคืนโดย getSelection () เป็นสตริง โดยใช้ toString () วิธีการเพื่อที่จะทำให้มัน เอาท์พุทข้อความที่เลือก.

ต่อไปเราต้อง ทำการเยี่ยมชม ไปที่หน้าบทความ Wikiwand เราจะบรรลุสิ่งนี้โดยใช้ตรรกะต่อไปนี้ที่ไหน NEWURL จะเป็น URL ของหน้าบทความ Wikiwand (ที่จะมีสตริงที่เลือกในตอนท้าย):

 location.href = newURL 

เมื่อเราวางข้อมูลโค้ดทั้งสองนี้เข้าด้วยกันเราจะพบกับสคริปต์ต่อไปนี้:

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

ตอนนี้เราแค่เพิ่ม javascript: โปรโตคอลไปข้างหน้าและเรามี รหัสสุดท้าย เราจะใช้ใน bookmarklet ของเรา:

 // เพิ่มในหนึ่งบรรทัดโดยไม่มีตัวแบ่งบรรทัด javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). แทนที่ (/ \ n / g, '% 20' ) 

ตัวเลือก แทนที่ (/ \ n / g '% 20') ในตอนท้าย แทนที่อักขระบรรทัดใหม่ (\ n) ในข้อความ ด้วยอักขระช่องว่างเดียว (20%).

รหัส JavaScript พร้อมใช้งาน โปรดทราบว่าจะต้องมีการวางรหัส ในบรรทัดเดียวโดยไม่มีการขึ้นบรรทัดใหม่, ตั้งแต่ต่อมามันจะเป็น เพิ่มลงในช่องป้อนข้อความ.

สร้างบุ๊คมาร์ค

เปิดหน้าต่างบุ๊กมาร์กของเบราว์เซอร์และ เพิ่มบุ๊คมาร์คใหม่:

• Firefox: กด ctrl + shift + B / cmd + shift + B คลิกขวาที่ "แถบเครื่องมือที่คั่นหน้า" และเลือก "ที่คั่นหน้าใหม่".
• โครเมียม: กด ctrl + shift + O / cmd + alt + B คลิกขวาที่ "แถบบุ๊กมาร์ก" และเลือก "เพิ่มหน้า ... & quot.

ในช่อง URL คัดลอกวางรหัส JavaScript จากก่อนหน้านี้ เมื่อสร้างบุ๊คมาร์คแล้วก็พร้อมใช้งาน ไปที่หน้าเว็บใด ๆ, เลือกคำ คุณต้องการค้นหาใน Wikiwand และ คลิกที่ bookmarklet - หน้าบทความ Wikiwand จะเปิดขึ้นทันที.

เข้าถึงด่วน

แทนที่จะไปถึงเมนูบุ๊กมาร์กทุกครั้งที่คุณต้องการบุ๊คมาร์คเล็ตคุณสามารถเลือกได้ แสดงโดยตรง ในเบราว์เซอร์ของคุณเพื่อการเข้าถึงที่รวดเร็ว.

• Firefox: คลิก "ดู> แถบเครื่องมือ" ในแถบเมนูด้านบนและเลือก "แถบเครื่องมือบุ๊กมาร์ก".
• โครเมียม: กด ctrl + shift + B / cmd + shift + B.

สร้างลิงค์ bookmarklet

คุณสามารถเพิ่ม bookmarklet ของคุณไปยังเว็บไซต์ เป็นการเชื่อมโยงหลายมิติ เช่นกันซึ่งผู้เข้าชม สามารถคั่นหน้า โดยเพียงลากและวางลิงก์ไปยังแถบเครื่องมือบุ๊คมาร์คหรือคลิกขวาที่ลิงก์แล้วเลือกตัวเลือกเพื่อคั่น.

หากต้องการเปลี่ยน bookmarklet ให้เป็นการเชื่อมโยงหลายมิติให้สร้าง แท็ก HTML พร้อมสคริปต์ bookmarklet ตามมูลค่าของมัน href คุณลักษณะ:

   ค้นหาคั่นหนังสือ Wikiwand  

วิธีการจัดเก็บ bookmarklets แยกกัน

นอกจากนี้คุณยังสามารถ ใช้ไฟล์ JavaScript แยกต่างหาก ในการจัดเก็บรหัส bookmarklet ซึ่งอาจไม่จำเป็นถ้าคุณมีสคริปต์สั้น ๆ - เช่นเดียวกับที่เราเพิ่งเห็นในบทช่วยสอนนี้ - แต่อาจมีประโยชน์เมื่อรหัส JavaScript ยาวเกินไปที่จะคัดลอกวางลงในแถบบุ๊คมาร์ค ของเบราว์เซอร์ของคุณ.

ไฟล์ MyScript.js จะ บ้านรหัส JavaScript หลัก สำหรับ bookmarklet และคุณต้องเพิ่มรหัสต่อไปนี้ เป็น URL บุ๊กมาร์ก (ไปยังแถบบุ๊กมาร์กของเบราว์เซอร์หรือเป็นค่าของ href คุณลักษณะในไฟล์ HTML):

 // เพิ่มในหนึ่งบรรทัดโดยไม่มีตัวแบ่งบรรทัด javascript: (() => พร้อม (เอกสาร) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

ข้อมูลโค้ดด้านบนคือ ห่อด้วยฟังก์ชั่นลูกศรที่เรียกตัวเอง, และใช้คุณสมบัติของ ECMAScript 6 เช่น ปล่อย คำหลักเพื่อลดความยาวรหัส มันเพิ่ม > แท็กชี้ไปที่ MyScript.js ไฟล์ไปที่ ส่วนของเอกสาร เมื่อผู้ใช้คลิกที่ bookmarklet (โปรดทราบว่าคุณอาจต้องใช้เส้นทางที่แน่นอนสำหรับ MyScript.js ไฟล์).