programming javascript

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

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 Bookmarklet

tô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

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

Hướ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àn

Lấy một đoạn mã javascript ngắn và đặt nó vào một bookmarklet

Thử một lần

Cà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

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

Đối với "Tên", bạn có thể đặt "Pinker"
Sao chép khối mã bên dưới, dán mã này vào "Vị trí" của dấu trang mới

javascript:[function[]{document.body.style.background = 'pink';}][];

Đ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

Viết một số mã javascript mà bạn muốn trong bookmarklet [sử dụng bảng điều khiển]

Đặt

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

2 trước mã

Bọc mọi thứ trong IIFE để trang không bị rối mắt

Đây là chức năng từ đám mây đến mông của chúng tôi

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Hãy thử đặt

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

2 trước nó

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Bạn có thể gỡ lỗi bookmarklet nhanh hơn nhiều nếu bạn sử dụng thanh Vị trí - xem "Gỡ lỗi nhanh hơn" bên dưới để biết thông tin lưu ý

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

javascript:[function[]{CONTENTGOESHERE}][];

Hãy dùng thử với mã đám mây của bạn

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

Gỡ lỗi nhanh hơn

Chỉ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

javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];

Bạn sẽ phải nhập lại
javascript:[function[]{
  document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];
}][];
2 ở phía trước nội dung bạn dán

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 bookmarklet

Khi 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 JavaScript

Họ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 Bookmarklet

Vớ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ể

Nhấp vào nút hầu như
Sửa đổi nội dung
Sử dụng nội dung của trang để mở một trang mới
Xóa các phần tử khỏi trang

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 Bookmarklet

Tạ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 trang

Mozilla Firefox

Trong thanh dấu trang hoặc trong thanh bên Dấu trang [

javascript: [[] => {
  alert['Hello, World!'];
}][];

2 +

javascript: [[] => {
  alert['Hello, World!'];
}][];

3], bạn có thể nhấp chuột phải, sau đó nhấp vào "Thêm dấu trang. "

crom

Bạ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 Bookmarklet

Trong 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

javascript: [[] => {
  // Your code here!
}][];

javascript: [[] => {
  alert['Hello, World!'];
}][];

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

javascript: [[] => {
  alert['Hello, World!'];
}][];

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

javascript: [[] => {
  alert['Hello, World!'];
}][];

6 sẽ thực thi chức năng ẩn danh mà bạn vừa tạo

javascript: [[] => {
  alert['Hello, World!'];
}][];

"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.

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Khoảng cách cho Bookmarklet

Hầ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 [

javascript: [[] => {
  alert['Hello, World!'];
}][];

7 và

javascript: [[] => {
  alert['Hello, World!'];
}][];

8] và dấu chấm phẩy [

javascript: [[] => {
  alert['Hello, World!'];
}][];

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 [

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

40/

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

41/

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

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ó

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

1Ví dụ về hàm JavaScript được viết trong một dòng

Nế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ầu

Vì 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

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Cá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à

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

44 để chọn một phần tử bằng bộ chọn CSS

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

45 để chọn tất cả các phần tử phù hợp bằng bộ chọn CSS

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

46 để chọn tất cả các phần tử phù hợp bằng XPath

Có các chức năng khác như

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

47 và

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

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ần

Bộ chọn CSS và XPath

Nế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 web

Mộ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

Trước tiên hãy mở các công cụ phát triển trình duyệt bằng cách nhấn

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

49 hoặc

javascript: [[] => {
  alert['Hello, World!'];
}][];

2 +

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

11 +

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Nhấp vào tab Trình kiểm tra/Thành phần, tab này sẽ hiển thị toàn bộ tài liệu HTML của trang bạn đã mở

Sử dụng công cụ chọn phần tử [

javascript: [[] => {
  alert['Hello, World!'];
}][];

2 +

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

11 +

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

15] và nhấp vào phần tử bạn muốn tương tác. Trình xem tài liệu sẽ cuộn đến phần tử bạn đã nhấp vào trong tài liệu HTML. Bạn sẽ thấy ID phần tử, lớp và thuộc tính

Kiểm tra xem bạn có đang ở đúng phần tử không. Các phần tử có thể được lồng vào nhau ở nơi dễ dàng điều hướng đến nó theo cách thủ công trong HTML. Ví dụ: bạn có thể đã nhấp vào một phần tử

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

16, nhưng thực sự cần

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

17 hoặc

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

18 mà nó ở bên trong

Xác định bộ chọn CSS hoặc XPath phù hợp với mọi thứ bạn muốn, bạn có thể muốn làm cho nó nghiêm ngặt hơn mức cần thiết để tránh các kết quả dương tính giả tiềm ẩn

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[]{}[];

Một bộ chọn thích hợp là

javascript:document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

Chúng ta cần sử dụng hàm

document.body.innerHTML = document.body.innerHTML.replace[/cloud/g, "butt"].replace[/Cloud/g, "Butt"];

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

javascript:[function[]{CONTENTGOESHERE}][];

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

javascript:[function[]{CONTENTGOESHERE}][];

Giờ đâ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ùng

Nế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[]{}[];

Bạn có thể tự thử trong môi trường sandbox

javascript:[function[]{CONTENTGOESHERE}][];

Chỉ chạy mã bạn tin tưởng

Là 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

Nó đến từ một nguồn có uy tín
Bạn biết JavaScript và bạn đã xem xét những gì nó làm
Người mà bạn tin tưởng biết JavaScript và họ đã xem xét nó cho bạn

Quyền riêng tư và bảo mật

Bookmarklet 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ử

javascript:[function[]{CONTENTGOESHERE}][];

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.

javascript:[function[]{CONTENTGOESHERE}][];

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 đó.

javascript: [[] => {
  alert['Hello, World!'];
}][];

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".

javascript: [[] => {
  alert['Hello, World!'];
}][];

1Mở freeCodeCamp, nhưng thay vào đó hãy mở GIF nếu nó nằm trong khoảng từ 03. 00 và 06. 00

Cả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

Seth Falco

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