Nếu bạn là người dùng Chrome, có thể bạn sẽ sử dụng một hoặc nhiều tiện ích mở rộng. Cho dù đó là để chặn quảng cáo hoặc để thêm các tính năng, tiện ích mở rộng sẽ thêm rất nhiều tiện ích cho trình duyệt. Vì vậy, sẽ không hay nếu bạn có thể xây dựng tiện ích mở rộng Chrome của riêng mình? Đó chính xác là những gì tôi sẽ chỉ cho bạn ở đây.
Cũng xem bài viết của chúng tôi Chromebook màn hình cảm ứng tốt nhất
Khi tôi duy trì trang web cho khách hàng, tôi muốn biết mỗi trang web hoạt động như thế nào với việc tải trang. Vì Google hiện sử dụng thời gian tải trong các tính toán SEO của mình, việc biết tốc độ tải trang chậm hay chậm là một số liệu quan trọng khi tối ưu hóa trang web. Điều này thậm chí còn đúng hơn khi tối ưu hóa một trang web cho thiết bị di động. Nó phải nhẹ, nhanh và tải mà không có bất kỳ lỗi nào để đạt điểm cao trong Google.
Thêm vào đó, thực tế là một người dám nghĩ dám làm tại SitePoint cũng sử dụng cùng một trang web tôi làm để kiểm tra tốc độ trang, GTmetrix và đã phát triển một tiện ích mở rộng Chrome để kiểm tra, tôi nghĩ tôi sẽ làm như vậy và hướng dẫn bạn qua đó.
Tiện ích mở rộng của Chrome
Tiện ích mở rộng Chrome là các chương trình nhỏ có thêm tính năng cho trình duyệt lõi. Chúng có thể đơn giản như cái mà chúng ta sẽ tạo hoặc phức tạp như trình quản lý mật khẩu an toàn hoặc trình giả lập tập lệnh. Được viết bằng các ngôn ngữ tương thích như HTML, CSS và JavaScript, chúng là các tệp độc lập nằm cạnh trình duyệt.
Do sự cần thiết, hầu hết các tiện ích mở rộng là các thực thi nhấp chuột biểu tượng đơn giản thực hiện một hành động nhất định. Hành động đó thực sự có thể là bất cứ điều gì bạn muốn Chrome làm.
Xây dựng tiện ích mở rộng Chrome của riêng bạn
Với một nghiên cứu nhỏ, bạn có thể điều chỉnh tiện ích mở rộng của mình để làm bất cứ điều gì bạn thích nhưng tôi thích ý tưởng kiểm tra tốc độ một nút vì vậy tôi sẽ thực hiện điều đó.
Thông thường, khi bạn kiểm tra tốc độ trang web, bạn sẽ dán URL của trang bạn đang truy cập vào GTmetrix, Pingdom hoặc bất cứ nơi nào và nhấn Phân tích. Chỉ mất vài giây nhưng sẽ không hay nếu bạn chỉ có thể chọn một biểu tượng trên trình duyệt của mình và để nó làm điều đó cho bạn? Sau khi làm việc qua hướng dẫn này, bạn sẽ có thể làm điều đó.
Bạn sẽ cần tạo một thư mục trên máy tính của mình để giữ mọi thứ. Tạo ba tệp trống, manifest.json, popup.html và popup.js. Nhấp chuột phải vào thư mục mới của bạn và chọn Tệp mới và tệp văn bản. Mở từng tệp trong số ba tệp của bạn trong trình soạn thảo văn bản bạn chọn. Đảm bảo popup.html được lưu dưới dạng tệp HTML và popup.js được lưu dưới dạng tệp JavaScript. Tải xuống biểu tượng mẫu này từ Google cũng chỉ cho mục đích của hướng dẫn này.
Chọn manifest.json và dán đoạn mã sau vào nó:
{"manifest_version": 2, "name": "Trình phân tích tốc độ trang GTmetrix", "mô tả": "Sử dụng GTmetrix để phân tích tốc độ tải trang của trang web", "phiên bản": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "quyền":}
Như bạn có thể thấy, chúng tôi đã đặt cho nó một tiêu đề và mô tả cơ bản. Chúng tôi cũng đã gọi một hành động trình duyệt bao gồm biểu tượng chúng tôi đã tải xuống từ Google sẽ xuất hiện trong thanh trình duyệt và popup.html của bạn. Popup.html là những gì được gọi khi bạn chọn biểu tượng tiện ích mở rộng trong trình duyệt.
Mở popup.html và dán phần sau vào nó.
Trình phân tích trang bằng cách sử dụng GTMetrix
Popup.html là những gì được gọi khi bạn chọn biểu tượng tiện ích mở rộng trong trình duyệt. Chúng tôi đã đặt cho nó một cái tên, dán nhãn bật lên và thêm một nút. Chọn nút sẽ gọi popup.js là tệp chúng tôi sẽ hoàn thành tiếp theo.
Mở popup.js và dán các mục sau vào nó:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getEuityById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected = document; var f = d.createEuity ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createEuity ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, sai);}, sai);
Tôi sẽ không giả vờ biết JavaScript, đó là lý do tại sao thật tiện lợi khi SitePoint đã có sẵn tệp. Tất cả những gì tôi biết là nó bảo GTmetrix phân tích trang trong tab Chrome hiện tại. Trong đó có ghi 'chrome.tabs.getSelected', tiện ích mở rộng lấy URL từ tab hoạt động và nhập nó vào biểu mẫu web. Đó là xa như tôi có thể đi.
Kiểm tra tiện ích mở rộng Chrome của bạn
Bây giờ chúng ta đã có khung cơ bản tại chỗ, chúng ta cần thử nghiệm để xem nó hoạt động như thế nào.
- Mở Chrome, chọn Công cụ và Tiện ích mở rộng khác.
- Chọn hộp bên cạnh Chế độ nhà phát triển để kích hoạt nó.
- Chọn Tải phần mở rộng đã giải nén và điều hướng đến tệp bạn đã tạo cho tiện ích mở rộng này.
- Chọn OK để tải tiện ích mở rộng và nó sẽ xuất hiện trong danh sách Tiện ích mở rộng của bạn.
- Chọn hộp bên cạnh Kích hoạt trong danh sách và biểu tượng sẽ xuất hiện trong trình duyệt của bạn.
- Chọn biểu tượng trong trình duyệt để cửa sổ bật lên xuất hiện.
- Chọn nút, Kiểm tra trang này ngay bây giờ!
Bạn sẽ thấy trang đang được kiểm tra và báo cáo hiệu suất từ GTmetrix. Như bạn có thể thấy từ trang web của riêng tôi trong hình ảnh chính, tôi có một số việc phải làm để tăng tốc thiết kế mới của mình!
Đưa phần mở rộng về phía trước
Tạo tiện ích mở rộng Chrome của riêng bạn không khó như có vẻ. Mặc dù chắc chắn đã có một khởi đầu bằng cách biết một ít mã, nhưng có hàng trăm tài nguyên trực tuyến sẽ cho bạn thấy điều đó. Thêm vào đó, Google có một kho thông tin, hướng dẫn và hướng dẫn khổng lồ sẽ giúp ích. Tôi đã sử dụng trang này từ trang Google Developer để giúp tôi mở rộng. Trang này hướng dẫn bạn qua từng phần của việc tạo tiện ích mở rộng và cung cấp biểu tượng mà chúng tôi đã sử dụng trước đó.
Với đủ nghiên cứu, bạn có thể tạo các tiện ích mở rộng thực hiện hầu hết mọi thứ mà trình duyệt có khả năng. Một số tiện ích mở rộng tốt nhất trong cửa hàng Chrome là của các cá nhân chứ không phải công ty, chứng minh rằng bạn thực sự có thể tạo riêng cho mình.
Tất cả tín dụng cho John Sonmez tại SitePoint cho hướng dẫn ban đầu. Anh ấy làm công việc khó khăn, tôi chỉ tổ chức lại một chút và cập nhật nó một chút.
Bạn đã tạo tiện ích mở rộng Chrome của riêng mình chưa? Bạn muốn quảng bá hoặc chia sẻ nó? Hãy cho chúng tôi biết dưới đây nếu bạn làm!
