Cách tạo tiện ích mở rộng Google Chrome của riêng bạn
Bạn đã bao giờ thấy mình không hài lòng với các tính năng đi kèm với trình duyệt web của mình chưa? Ngay cả khi bạn tìm kiếm hàng giờ đồng hồ trên Google Web Store, việc nhấn “tải xuống” để nâng cao trải nghiệm lướt web của bạn không phải lúc nào cũng là vấn đề đơn giản.
Đây là nơi các tiện ích mở rộng trình duyệt xuất hiện. Trong bài viết này, chúng ta sẽ khám phá quá trình tạo Tiện ích mở rộng Google Chrome tự làm của riêng bạn từ đầu.
Mục Lục
Tiện ích mở rộng của Google Chrome là gì?
Các trình duyệt web hiện đại như Google Chrome đi kèm với một loạt các tính năng giúp chúng dễ sử dụng và có thể đáp ứng nhu cầu của hầu hết người dùng. Mặc dù vậy, việc mở rộng các tính năng chứng khoán này có thể đi kèm với vô số lợi ích khác nhau. Đây là lý do tại sao các nhà phát triển trình duyệt thường tạo khả năng tạo tiện ích mở rộng, tiện ích bổ sung và trình cắm thêm cho chúng.
Google Chrome cung cấp tính năng này, giúp bất kỳ ai có kinh nghiệm phát triển web đều có thể dễ dàng tạo Tiện ích mở rộng Chrome của riêng mình. Bạn có thể tạo tiện ích mở rộng bằng HTML, JavaScript và CSS, giống như nhiều trang web.
Không giống như một trang web, tiện ích mở rộng có thể chạy ở chế độ nền trong khi bạn duyệt, thậm chí đôi khi tương tác với các trang web mà bạn truy cập.
Tiện ích mở rộng Google Chrome của chúng tôi sẽ làm gì?
Chúng tôi sẽ xây dựng một tiện ích mở rộng Chrome đơn giản cho phép bạn truy cập trang web Tận dụng và thực hiện tìm kiếm ngẫu nhiên dựa trên các danh mục bài viết được tìm thấy trên trang web. Đây là một dự án nhanh chóng và dễ dàng, nhưng bạn vẫn sẽ học được nhiều điều.
Bạn sẽ học cách làm
- Tạo một Tiện ích mở rộng của Google Chrome
- Chèn mã tùy chỉnh vào các trang web bằng Tiện ích mở rộng của Chrome
- Tạo trình nghe sự kiện và mô phỏng các lần nhấp
- Tạo số ngẫu nhiên
- Làm việc với mảng và biến
Tạo tiện ích mở rộng Chrome tự làm của riêng bạn
Google đã làm cho việc tạo Tiện ích mở rộng Chrome của riêng bạn trở nên dễ dàng một cách đáng ngạc nhiên, vì vậy sẽ không mất nhiều thời gian trước khi bạn có thứ gì đó hoạt động. Thực hiện theo các bước bên dưới sẽ chỉ mất 10 đến 15 phút nhưng chúng tôi khuyến khích bạn thử nghiệm với mã của riêng mình.
Bước 1: Tạo tệp
Bạn có thể lưu trữ tiện ích mở rộng của mình trên máy cục bộ của riêng bạn khi bạn không định phân phối nó. Chúng tôi chỉ cần tạo bốn tệp khác nhau để tạo tiện ích mở rộng của chúng tôi; tệp HTML, tệp CSS, tệp JavaScript và tệp JSON.
Chúng tôi đã gọi các tệp của mình là index.html, style.css, script.js và manifest.json. Tệp kê khai phải có tên này để hoạt động bình thường, nhưng bạn có thể đặt cho những người khác bất kỳ tên nào bạn thích, miễn là bạn thay đổi mã của mình cho phù hợp.
Bạn nên đặt các tệp này trong cùng một thư mục gốc.
Bước 2: Xây dựng tệp kê khai
Tệp kê khai đi kèm với mọi Tiện ích mở rộng của Google Chrome. Nó cung cấp thông tin về tiện ích mở rộng cho Chrome đồng thời đưa một số cài đặt cơ bản vào đúng vị trí. Tệp này phải chứa tên, số phiên bản, mô tả và phiên bản kê khai. Chúng tôi cũng đã bao gồm các quyền và một hành động tải index.html dưới dạng cửa sổ bật lên xuất hiện cho tiện ích mở rộng.
{
"name": "smartreviewaz.com Automated Search",
"version": "1.0.0",
"description": "A search tool to find interesting articles",
"manifest_version": 3,
"author": "Samuel Garbett",
"permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
"host_permissions": [""],
"action":{
"default_popup": "index.html",
"default_title": "MUO Auto Search"
}
}Bước 3: Xây dựng HTML & CSS
Trước khi có thể bắt đầu viết tập lệnh của mình, chúng ta cần tạo một giao diện người dùng cơ bản bằng HTML và CSS. Bạn có thể sử dụng thư viện CSS như Bootstrap để tránh tạo thư viện của riêng bạn, nhưng chúng tôi chỉ cần một vài quy tắc cho tiện ích mở rộng của mình.
Tệp index.html của chúng tôi có các thẻ html, head và body. Thẻ head chứa tiêu đề trang và liên kết đến biểu định kiểu của chúng tôi, trong khi phần thân là nơi chứa thẻ h1, nút đưa bạn đến smartreviewaz.com và một nút khác mà chúng tôi sẽ sử dụng làm trình kích hoạt cho tập lệnh. Một thẻ script ngay ở cuối tài liệu bao gồm script.js tập tin.
<html>
<head>
<title>MUO Auto Search</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>MUO Auto Search</h1>
<a href="https://www.smartreviewaz.com/" target="_blank"><button id="buttonOne">Go to smartreviewaz.com</button></a>
<button id="buttonTwo">Start Random Search</button>
</body>
<script src="script.js"></script>
</html>
Tệp CSS của chúng tôi thậm chí còn đơn giản hơn HTML của chúng tôi, chỉ thay đổi kiểu của năm phần tử. Chúng tôi có các quy tắc cho các thẻ html và body của chúng tôi, cũng như cho các thẻ h1 và cả hai nút của chúng tôi.
html {
width: 400px;
}
body {
font-family: Helvetica, sans-serif;
}
h1 {
text-align: center;
}
border-radius: 0px;
width: 100%;
padding: 10px 0px;
}
border-radius: 0px;
width: 100%;
padding: 10px 0px;
margin-top: 10px;
}Bước 4: Xây dựng JavaScript
Bước cuối cùng trong quá trình này, đã đến lúc xây dựng tệp script.js của chúng tôi.
Hàm đầu tiên trong tệp này, được gọi là insertScript ()có sẵn để chèn chức năng khác (autoSearch ()) vào trang hiện tại. Điều này cho phép chúng tôi thao tác trên trang và sử dụng các tính năng tìm kiếm đã có trên trang smartreviewaz.com.
Tiếp theo là trình xử lý sự kiện đợi cho đến khi nhấp vào nút Bắt đầu tìm kiếm ngẫu nhiên trước khi gọi hàm mà chúng ta đã khám phá ở trên.
Các autoSearch () chức năng phức tạp hơn một chút. Nó bắt đầu bằng một mảng chứa 20 danh mục trên trang web MUO, cho chúng ta một mẫu hay để rút ra khi thực hiện các tìm kiếm ngẫu nhiên. Sau đây, chúng tôi sử dụng Math.random () hàm tạo một số ngẫu nhiên từ 0 đến 19 để chọn một mục từ mảng của chúng tôi.
Với cụm từ tìm kiếm của chúng tôi trong tay, bây giờ chúng tôi cần mô phỏng một lần nhấp vào nút để mở thanh tìm kiếm MUO. Trước tiên, chúng tôi sử dụng bảng điều khiển dành cho nhà phát triển Chrome để tìm ID của nút tìm kiếm, sau đó chúng tôi thêm ID này vào mã JavaScript của mình với nhấp chuột() hàm số.
Giống như nút tìm kiếm, chúng ta cũng cần tìm ID của thanh tìm kiếm xuất hiện, giúp chúng ta có thể chèn cụm từ tìm kiếm ngẫu nhiên mà chúng ta đã chọn. Với sự hoàn chỉnh này, việc gửi biểu mẫu để chúng tôi thực hiện tìm kiếm là một vấn đề đơn giản.
function insertScript() {
chrome.tabs.query({active: true, currentWindow: true}, tabs => {
chrome.scripting.executeScript({target: {tabId: tabs[0].id}, function: autoSearch})
})
window.close();
}
// This is an event listener that detects clicks on our "Start Random Search" button
document.getElementById('buttonTwo').addEventListener('click', insertScript)
function autoSearch() {
const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac",
"Linux", "Android", "Apple", "Internet", "Security",
"Programming", "Entertainment", "Productivity", "Career", "Creative",
"Gaming", "Social Media", "Smart Home", "DIY", "Review"];
let selectorNumber = Math.floor(Math.random() * 20);
let selection = searchTerms[selectorNumber];
document.getElementById("js-search").click();
var searchBar = document.getElementById("js-search-input");
searchBar.value = searchBar.value + selection;
document.getElementById("searchform2").submit();
}
Bước 5: Thêm tệp của bạn vào Chrome: // extensions
Tiếp theo, đã đến lúc thêm các tệp bạn vừa tạo vào trang tiện ích mở rộng của Chrome. Sau khi bạn thực hiện xong việc này, tiện ích sẽ có thể truy cập được trong Chrome và sẽ tự cập nhật bất cứ khi nào bạn thực hiện thay đổi đối với tệp của mình.
Mở Google Chrome, truy cập chrome: // extensions và đảm bảo rằng thanh trượt Chế độ nhà phát triển ở góc trên cùng bên phải đã ở vị trí bật.
Nhấp chuột Tải Unpacked ở góc trên cùng bên trái, sau đó chọn thư mục bạn đã lưu các tệp tiện ích mở rộng của mình bên trong và nhấp vào Chọn thư mục.
Bây giờ tiện ích mở rộng của bạn đã được tải, bạn có thể nhấp vào biểu tượng mảnh ghép ở góc trên cùng bên phải và ghim tiện ích mở rộng của bạn vào thanh tác vụ chính để truy cập dễ dàng hơn.
Bây giờ bạn có thể truy cập vào tiện ích mở rộng đã hoàn chỉnh trong trình duyệt của mình. Cần lưu ý rằng tiện ích mở rộng này sẽ chỉ hoạt động trên trang web MUO hoặc các trang web có cùng ID cho nút và thanh tìm kiếm của chúng.
Tạo một Tiện ích mở rộng Google Chrome
Bài viết này chỉ trình bày sơ lược về các tính năng khả thi mà bạn có thể tích hợp vào tiện ích mở rộng Google Chrome của riêng mình. Rất đáng để khám phá những ý tưởng của riêng bạn khi bạn đã học được những kiến thức cơ bản.
Các tiện ích mở rộng của Chrome có thể giúp bạn nâng cấp trình duyệt của mình nhưng hãy cố gắng tránh xa một số tiện ích mở rộng Chrome mờ ám đã biết để duyệt web an toàn và bảo mật.
Đọc tiếp
Giới thiệu về tác giả
