Dấu trang javascript
Đây là một chương trong hướng dẫn "Hội thảo mở rộng Chrome" của tôi, xem phần còn lại tại đây. https. //ý chính. github. com/caseywatts/8eec8ff974dee9f3b247 Show
Cập nhật không liên quan. cuốn sách của tôi đã hết. Gỡ lỗi bộ não của bạn là một cuốn sách tâm lý học ứng dụng / tự giúp đỡ Làm Bookmarklettôi cảm thấy rất thông minh. Tôi có dòng javascript ngọt ngào này thay thế "đám mây" bằng "mông". Mẹ tôi sẽ THÍCH điều này, nhưng bà ấy không giỏi máy tính lắm. Tôi sợ phải cho cô ấy xem Bảng điều khiển dành cho nhà phát triển và yêu cầu cô ấy nhập/dán cái này vào. Nhưng cô ấy đánh dấu trang khá giỏi, cô ấy biết cách nhấp vào chúng Dấu trang thường đưa bạn đến một trang web mới. Bookmarklet là dấu trang chạy javascript trên trang hiện tại thay vì đưa bạn đến một trang mới. Để tuyên bố rằng đó là một bookmarklet, "vị trí" mà nó trỏ đến bắt đầu bằng 2Hướng dẫn này sẽ hướng dẫn bạn tạo bookmarklet đầu tiên của bạn. Để có hướng dẫn kỹ lưỡng hơn, hãy xem trang web tuyệt vời Bookmarklets - Browser Power Một số bookmarklet khá thú vị. Trở thành một con tàu vũ trụ bắn và phá hủy các yếu tố trên trang web bạn đang truy cập với Kick Ass. Hoặc làm cho các trang cầu vồng và lấp lánh với Cornify Ghi bànLấy một đoạn mã javascript ngắn và đặt nó vào một bookmarklet Thử một lầnCài đặt bookmarklet này Tạo một dấu trang mới trong trình duyệt của bạn (nhấp chuột phải vào thanh dấu trang và nhấp vào 3)
Điều hướng đến google và nhấp vào bookmarklet. thì đấy Hãy làm của riêng của chúng tôiĐể tạo một bookmarklet, chúng ta có ba bước
Đây là chức năng từ đám mây đến mông của chúng tôi
Hãy thử đặt 2 trước nó
giữa chừng ở đó. Trang đã thực hiện MỘT SỐ ĐIỀU GÌ nhưng nó dường như được làm mới và sau đó CSS/hình ảnh không tải. . ( Chúng ta có thể giải quyết vấn đề này bằng cách đặt nó trong Biểu thức hàm được gọi ngay lập tức. Bạn không cần phải hiểu điều này hoàn toàn để trở thành một bookmarkleteer. Sử dụng IIFE là một cách để tránh có giá trị trả về, hãy xem Quy tắc dành cho Dấu trang (Sức mạnh trình duyệt và Dưới đây là hai cách ví dụ để viết IIFE tiêu chuẩn (function(){})(); // or function(){}(); Đây là mẫu chung tôi luôn sử dụng
Hãy dùng thử với mã đám mây của bạn
Gỡ lỗi nhanh hơnChỉnh sửa "vị trí" bookmarklet mỗi khi bạn thay đổi mã có thể rất tẻ nhạt. Bạn có thể tiết kiệm thời gian trong khi gỡ lỗi nếu bạn sử dụng thanh Vị trí. Nếu nó hoạt động khi bạn dán vào thanh vị trí, nó sẽ hoạt động như một bookmarklet đã lưu Hãy thử dán cái này
Rắc rối với thanh vị trí là nó loại bỏ "javascript. " từ phía trước của bất cứ điều gì bạn dán. Điều này có thể giữ an toàn cho hầu hết mọi người khỏi việc sao chép mã từ internet dù muốn hay không, nhưng bạn đang viết mã của riêng mình. Mong bạn tin tưởng mình. ) Chỉnh sửa bookmarkletKhi bạn lưu một bookmarklet, trình duyệt sẽ xóa các dòng mới. Nếu bạn muốn chỉnh sửa bookmarklet, nó có thể rất xấu. Bạn có ít nhất hai lựa chọn Bookmarklet là dấu trang của trình duyệt thực thi JavaScript thay vì mở trang web. Chúng còn được gọi là bookmark applet, favlet hoặc JavaScript bookmarks Bookmarklet vốn có sẵn trong tất cả các trình duyệt chính, bao gồm Mozilla Firefox và các trình duyệt dựa trên Chromium như Chrome hoặc Brave Viết kịch bản với JavaScriptHọc cách viết kịch bản mang lại nhiều lợi ích, cụ thể là tiết kiệm thời gian rất lớn từ việc tự động hóa các tác vụ lặp đi lặp lại hoặc tẻ nhạt Nếu bạn không phải là nhà phát triển, ý tưởng học cách viết mã có thể đáng sợ, tuy nhiên, viết kịch bản không yêu cầu kiến thức về công nghệ phần mềm hoặc các mẫu thiết kế. Mục tiêu không phải là tạo ra phần mềm có thể mở rộng, mà là để tự động hóa các tác vụ chuyên biệt hoặc tầm thường Bất kể nghề nghiệp nào, ngay cả khi bạn chưa bao giờ viết mã trước đây, hãy xem xét những gì bạn làm trong trình duyệt của mình. Nếu bạn từng cảm thấy những gì bạn làm là lặp đi lặp lại hoặc máy móc, hãy xem xét khả năng giao nhiệm vụ cho một người máy thực tế Các trường hợp sử dụng cho BookmarkletVới bookmarklet, bạn có thể thao tác với trang hiện tại vì chức năng sẽ có ngữ cảnh của tab hiện tại. Điều này có nghĩa là bạn có thể
Bạn cũng có thể tạo dấu trang hoàn toàn không sử dụng ngữ cảnh, chẳng hạn như mở URL có điều kiện hoặc tạo HTML cho tab mới Bạn sẽ tìm thấy một số dấu trang tôi đã tạo cho bài viết này trong. Chúng chỉ để trình diễn, nhưng sẽ làm cho các khả năng và triển khai trở nên rõ ràng Cách tạo BookmarkletTạo bookmarklet gần giống với tạo bookmark thông thường. Điểm khác biệt duy nhất là bạn sẽ viết JavaScript trong trường URL thay vì URL HTTP/HTTPS Điều hướng đến Menu Dấu trangMozilla FirefoxTrong thanh dấu trang hoặc trong thanh bên Dấu trang ( 2 + 3), bạn có thể nhấp chuột phải, sau đó nhấp vào "Thêm dấu trang. "cromBạn có thể nhấp chuột phải vào thanh dấu trang của mình, sau đó nhấp vào "Thêm trang. ". Ngoài ra, bạn có thể vào trình quản lý Dấu trang, sau đó nhấp chuột phải và nhấp vào "Thêm dấu trang mới" Cách viết một BookmarkletTrong trường URL của phương thức dấu trang, hãy viết một hàm JavaScript theo định dạng sau
4 là giao thức của URL. Điều này chỉ ra rằng trình duyệt sẽ thực thi dấu trang dưới dạng JavaScript 5 định nghĩa một hàm ẩn danh (lambda). Bạn nên viết mã bạn muốn thực thi giữa các dấu ngoặc nhọn 6 sẽ thực thi chức năng ẩn danh mà bạn vừa tạo "Xin chào, Thế giới. " dưới dạng bookmarklet của trình duyệt. Bạn cũng có thể làm cho nó tạo HTML và mở nó dưới dạng tài liệu HTML. 4Khoảng cách cho BookmarkletHầu hết các trình duyệt không cho phép trường nhập nhiều dòng trong URL dấu trang, vì vậy bạn thường phải sử dụng nghiêm ngặt các dấu ngoặc nhọn ( 7 và 8) và dấu chấm phẩy ( 9) khi viết dấu trang. Điều này đặc biệt quan trọng khi xác định phạm vi cấu trúc có điều kiện ( 40/ 41/ 42)Khác với điều này, khoảng cách không thành vấn đề. Đừng ngại có nhiều mã trong một dòng vì đó là tất cả những gì bạn có 1Ví dụ về hàm JavaScript được viết trong một dòngNếu tập lệnh của bạn phức tạp, việc duy trì bookmarklet của bạn trong trình chỉnh sửa mã như Visual Studio Code sẽ dễ dàng hơn. Bạn có thể sao chép và dán nó vào trình duyệt của mình khi nó sẵn sàng Cách tương tác với các trang webĐiều phổ biến nhất bạn làm với bookmarklet là thao tác hoặc tương tác với các trang web bạn đã mở Đối tượng tài liệu toàn cầuVì bookmarklet có ngữ cảnh của trang bạn đang truy cập, nên bạn có quyền truy cập vào đối tượng 43Các chức năng lý tưởng để chọn các phần tử cho trường hợp sử dụng của chúng tôi là
Có các chức năng khác như 47 và 48, nhưng chúng tôi muốn tránh các kết quả dương tính giả, vì vậy chúng tôi sẽ luôn thực hiện lựa chọn nghiêm ngặt bằng cách sử dụng nhiều thuộc tính thành phầnBộ chọn CSS và XPathNếu bạn chỉ chọn các phần tử dựa trên tên phần tử, ID, lớp và các thuộc tính khác, thì việc sử dụng bộ chọn CSS sẽ đơn giản và hiệu quả Bộ chọn CSS được sử dụng để chọn các phần tử trong tài liệu HTML để áp dụng các kiểu. Nếu bạn quen thuộc với phát triển web hoặc CSS nói chung, thì bạn đã biết cách sử dụng bộ chọn CSS. (Thêm thông tin. MDN, freeCodeCamp) Nếu bạn cũng cần khớp nội dung văn bản của một phần tử, thì bạn sẽ phải sử dụng XPath để thay thế XPath được sử dụng để duyệt qua các tài liệu XML, nó cung cấp tất cả các khả năng của bộ chọn CSS và hơn thế nữa, bao gồm so sánh nội dung của các phần tử hoặc sử dụng biểu thức chính quy để khớp nội dung đó. (Thêm thông tin. MDN, Wikipedia) Cách chọn các phần tử từ trang webMột trong những cách sử dụng phổ biến nhất cho bookmarklet là thao túng các trang web. Để tương tác, thao tác hoặc xóa các phần tử khỏi trang, bạn sẽ luôn phải chọn các phần tử trước
Ví dụ: giả sử tôi muốn loại bỏ tất cả các đề xuất chủ đề trên Twitter vì chúng gây phiền nhiễu. Đây là cách một phần tử có thể nhấp để loại bỏ một chủ đề trông như thế nào Đề xuất chủ đề trên Twitter, với nút X để đánh dấu là "Không quan tâm".(function(){})(); // or function(){}();8 Một bộ chọn thích hợp là 19Chúng ta cần sử dụng hàm 45 từ , sau đó gọi phương thức (function(){})(); // or function(){}();81 để mô phỏng nhấp chuột Có thể triển khai bookmarklet để chọn mọi nút loại bỏ và kích hoạt sự kiện nhấp cho tất cả chúng với khoảng thời gian 250 mili giây 2Đánh dấu tất cả các chủ đề được đề xuất trên Twitter là "Không quan tâm"Cách phân phối lại BookmarkletĐể "cài đặt" một bookmarklet, người dùng tạo một bookmark trên trình duyệt của mình rồi sao chép và dán mã vào đó Điều này có thể bất tiện, do đó, người ta thường liên kết các bookmarklet khi chia sẻ. Điều này đơn giản như đặt nó vào thuộc tính (function(){})(); // or function(){}();82 của liên kết neo của bạn 4Giờ đây, người dùng có thể nhấp chuột phải và "Liên kết dấu trang" hoặc kéo nó vào thanh dấu trang để dễ dàng truy cập Nhấp vào liên kết trên trang web sẽ thực thi tập lệnh ngay lập tức. Đảm bảo rằng nó sẽ không cản trở những gì người dùng đang cố gắng đạt được trên trang web của bạn nếu họ vô tình nhấp vào nó Ví dụ: liên kết sau sẽ hiển thị cảnh báo với "Xin chào, Thế giới. " Bỏ qua chính sách bảo mật nội dung và nội dung người dùngNếu bạn chạy một dịch vụ cho phép nội dung do người dùng tạo chứa HTML tùy chỉnh, thì điều quan trọng là phải làm sạch các neo liên kết ( (function(){})(); // or function(){}();83) Bookmarklet đang thực thi giống như mã trong bảng điều khiển công cụ dành cho nhà phát triển và bỏ qua Chính sách bảo mật nội dung (CSP) đã định cấu hình "Xin chào, thế giới. " liên kết có thể dễ dàng gửi dữ liệu đến một máy chủ khác, bao gồm đầu vào của các trường biểu mẫu hoặc cookie Là nhà cung cấp dịch vụ, điều quan trọng là phải cảnh giác rằng người dùng có thể khai thác điều này để chia sẻ mã độc hại trên nền tảng của bạn. Nếu liên kết neo của họ đang chạy trên một trang thuộc miền của bạn, nó có thể truy cập thông tin nhạy cảm trên trang và (function(){})(); // or function(){}();84 Bạn có thể tự thử trong môi trường sandbox 7Chỉ chạy mã bạn tin tưởngLà người dùng, điều quan trọng cần lưu ý là bất kỳ mã nào cũng có thể độc hại, chỉ nhấp hoặc thêm dấu trang khi ít nhất một trong những điều sau đây là đúng
Quyền riêng tư và bảo mậtBookmarklet có thể tiện dụng, nhưng chúng tôi cũng có tiện ích mở rộng web và tập lệnh người dùng. Điều gì làm cho họ khác nhau? Tiện ích mở rộng web cực kỳ thân thiện và linh hoạt. Bookmarklet không thể chặn các yêu cầu mạng, cập nhật nội dung khi trang thay đổi hoặc quản lý các tab Tuy nhiên, có một số lợi ích khi sử dụng bookmarklet hơn bất kỳ thứ gì khác, đó là quyền riêng tư và bảo mật Tiện ích sửa đổi phông chữ trên tất cả các trang phải có quyền truy cập vào tất cả dữ liệu trên tất cả các trang web. Trên Firefox và Chrome, điều này bao gồm tất cả các trường nhập và mật khẩu. (Thêm thông tin. , ) Ngược lại, bookmarklet chỉ có quyền truy cập vào trang ngay tại thời điểm nó đang thực thi và chỉ khi được người dùng kích hoạt thủ công Điều này dẫn đến ít rủi ro về phần mềm độc hại hơn, nhân viên lừa đảo không thể đẩy bản cập nhật độc hại và dữ liệu sẽ không được gửi âm thầm đến các máy chủ khác Cửa hàng Chrome trực tuyến trước đây đã có một số tiện ích mở rộng độc hại phải bị gỡ xuống. Một số trong số đó đã có hàng triệu lượt cài đặt trước khi bị xóa. () Ví dụ BookmarkletĐây là danh sách các ý tưởng về bookmarklet, cùng với mã triển khai nó. Bạn có thể sao chép và dán chúng vào dấu trang mới để dùng thử 8Thu thập tất cả các địa chỉ email trên trang hiện tại và hiển thị chúng dưới dạng cảnh báo. 9Tìm liên kết "Việc làm", "Nghề nghiệp" hoặc "Tuyển dụng" trên trang và nhấp vào liên kết đó. 0Đặt phông chữ của tất cả văn bản trên trang hiện tại thành "Comic Sans MS". 1Mở freeCodeCamp, nhưng thay vào đó hãy mở GIF nếu nó nằm trong khoảng từ 03. 00 và 06. 00Cảm ơn bạn đã đọc. Bây giờ hãy tiếp tục và tạo bookmarklet của riêng bạn QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Quan trọng là vui vẻ Nếu bài viết này hữu ích, hãy tweet nó Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu |