Cách tạo Bookmarklet tìm kiếm văn bản bằng JavaScript

Bookmarklets là Các ứng dụng JavaScript có thể được truy cập như dấu trang trình duyệt. Chúng được sử dụng để cho phép người dùng thực hiện các hành động khác nhau trên các trang web. Chẳng hạn, bookmarklet này của FontShop là để xem trước các phông chữ của FontShop trên bất kỳ trang web nào.

Trong bài viết này, chúng ta sẽ xem nó nhanh và dễ dàng như thế nào pha chế một bookmarklet bằng cách tạo ra một thực hiện một Wikiwand (Wikipedia đẹp hơn) Tìm kiếm cho một văn bản được chọn trên bất kỳ trang web nào.

Làm thế nào bookmarklets hoạt động

URI của bookmarklet sử dụng javascript: giao thức điều đó cho thấy nó bao gồm mã JavaScript. Khi bạn nhấp vào bookmarklet, bạn có thể chạy JavaScript trên một trang web và thực hiện các tác vụ, chẳng hạn như thay đổi giao diện của trang, chuyển hướng đến một trang khác hoặc hiển thị thông tin mới trên đó.

Vì dấu trang về cơ bản là bộ mã JavaScript, chúng rất dễ tạo với ít kiến ​​thức JavaScript, cho mục đích sử dụng cá nhân hoặc cung cấp cho người dùng của bạn, chẳng hạn như WordPress với Presslet bookmarklet của nó.

Bắt đầu với mã JavaScript

Các Cấu trúc URL Wikiwand sử dụng cho một bài báo bằng tiếng Anh là https://www.wikiwand.com/en/articleTitle. Chúng ta cần viết một tập lệnh nhảy đến trang Wikiwand của URL nào kết thúc bằng chuỗi người dùng vừa chọn - văn bản được chọn sẽ cần được đặt vào vị trí của bài viết Tiêu đề.

Đầu tiên, chúng tôi giữ văn bản người dùng đã chọn trên trang với mã sau:

 getSelection (). toString () 

Chúng ta cần phải diễn viên đối tượng được trả về bởi getSelection () như một chuỗi bằng cách sử dụng toString () phương pháp, để làm cho nó xuất văn bản đã chọn.

Tiếp theo, chúng ta cần phải thực hiện chuyến thăm đến trang bài viết Wikiwand. Chúng ta sẽ đạt được điều này bằng cách sử dụng logic sau, trong đó newURL sẽ là URL của trang bài viết Wikiwand (sẽ chứa chuỗi được chọn ở cuối):

 vị trí.href = newURL 

Khi chúng ta đặt hai đoạn mã này lại với nhau, chúng ta sẽ có đoạn script sau:

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

Bây giờ chúng ta chỉ phải thêm javascript: giao thức ra phía trước, và chúng ta có mã cuối cùng chúng tôi sẽ sử dụng trong bookmarklet của chúng tôi:

 // thêm vào một dòng mà không ngắt dòng javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). thay thế (/ \ n / g, '% 20' ) 

Tùy chọn thay thế (/ \ n / g, '% 20') cuối cùng thay thế bất kỳ ký tự dòng mới (\ n) trong văn bản với một nhân vật không gian duy nhất (% 20).

Mã JavaScript đã sẵn sàng. Lưu ý rằng mã cần được đặt trong một dòng không có ngắt dòng, kể từ sau này được thêm vào trường nhập văn bản.

Tạo dấu trang

Mở cửa sổ dấu trang của trình duyệt của bạn và thêm một dấu trang mới:

• Firefox: Nhấn ctrl + shift + B / cmd + shift + B, nhấp chuột phải vào "Thanh công cụ Bookmarks" và chọn "Bookmark mới".
• Chrome: Nhấn ctrl + shift + O / cmd + alt + B, nhấp chuột phải vào "Thanh dấu trang" và chọn "Thêm trang & &.

Trong trường URL sao chép-dán mã JavaScript từ trước Khi dấu trang được tạo, nó sẵn sàng để sử dụng; đi đến bất kỳ trang web nào, chọn một từ bạn muốn tìm kiếm trong Wikiwand và nhấp vào bookmarklet - trang bài viết Wikiwand sẽ mở cùng một lúc.

Truy cập nhanh

Thay vì tiếp cận với menu bookmark mỗi khi bạn cần bookmarklet, bạn có thể chọn hiển thị trực tiếp trong trình duyệt của bạn để truy cập nhanh.

• Firefox: Nhấp vào "Xem> Thanh công cụ" trong thanh menu trên cùng và chọn "Thanh công cụ Dấu trang".
• Chrome: Nhấn ctrl + shift + B / cmd + shift + B.

Tạo một liên kết bookmarklet

Bạn có thể thêm bookmarklet của bạn vào một trang web như một siêu liên kết cũng như du khách nào có thể đánh dấu bằng cách chỉ cần kéo và thả liên kết vào thanh công cụ đánh dấu hoặc nhấp chuột phải vào liên kết và chọn tùy chọn để đánh dấu nó.

Để biến bookmarklet của bạn thành một siêu liên kết, hãy tạo một Thẻ HTML với tập lệnh bookmarklet như giá trị của nó href thuộc tính:

   Wikiwand Tìm kiếm Bookmarklet  

Cách lưu trữ bookmarklets riêng

Bạn cũng có thể sử dụng một tệp JavaScript riêng để lưu mã bookmarklet, điều này có lẽ không cần thiết nếu bạn có một đoạn script ngắn - giống như đoạn mã chúng ta vừa thấy trong hướng dẫn này - nhưng có thể hữu ích khi mã JavaScript quá dài để sao chép-dán nó vào thanh dấu trang của trình duyệt của bạn.

Tập tin myscript.js sẽ chứa mã JavaScript chính cho bookmarklet và bạn cần thêm đoạn mã sau làm URL đánh dấu (vào thanh dấu trang của trình duyệt hoặc là giá trị của href thuộc tính trong tệp HTML):

 // thêm vào một dòng không ngắt dòng javascript: (() => with (document) let s = createEuity ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Đoạn mã trên là bọc trong một chức năng mũi tên tự gọi, và sử dụng các tính năng của ECMAScript 6, chẳng hạn như để cho từ khóa, để giảm chiều dài mã. Nó thêm một > thẻ chỉ vào myscript.js gửi đến phần của tài liệu khi người dùng nhấp vào bookmarklet (lưu ý rằng bạn có thể cần sử dụng một đường dẫn tuyệt đối cho myscript.js tập tin).