Trong bài viết này, chúng tôi sẽ nói về các tiện ích mở rộng Trình duyệt - chúng là gì, cách chúng hoạt động và cách bạn có thể xây dựng tiện ích mở rộng của riêng mình.
Chúng tôi sẽ hoàn thành bằng cách thực sự viết tiện ích mở rộng của riêng chúng tôi (Super Fun!) Cho phép chúng tôi sao chép bất kỳ đoạn mã nào vào khay nhớ tạm của chúng tôi chỉ bằng một cú nhấp chuột.
Để tiếp tục với bài viết này:
- Bạn cần có hiểu biết cơ bản về JavaScript.
- Bạn cần có trình duyệt Firefox (hoặc bất kỳ trình duyệt nào khác cũng sẽ hoạt động)
Tiện ích mở rộng trình duyệt là gì?
Tiện ích mở rộng trình duyệt là thứ bạn thêm vào trình duyệt của mình để nâng cao trải nghiệm duyệt web của bạn bằng cách mở rộng dung lượng trình duyệt của bạn.
Ví dụ:hãy nghĩ về một trình chặn quảng cáo mà bạn có thể đã cài đặt trên thiết bị của mình. Điều này làm cho trải nghiệm duyệt web của bạn tốt hơn bằng cách chặn quảng cáo khi bạn lướt web.
Cách viết tiện ích mở rộng trình duyệt cơ bản của riêng bạn
Bây giờ hãy bắt đầu bằng cách viết một phần mở rộng rất cơ bản.
Để bắt đầu, chúng tôi sẽ tạo một thư mục bên trong chúng tôi tạo một tệp có tên manifest.json .
Tệp kê khai là gì?
Tệp kê khai là tệp phải có trong bất kỳ tiện ích mở rộng trình duyệt nào. Tệp này chứa dữ liệu cơ bản về tiện ích mở rộng của chúng tôi như tên, phiên bản, v.v.
Bây giờ bên trong manifest.json tập tin sao chép đoạn mã sau:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
}
Cách tải tệp mở rộng
Đối với người dùng Firefox, hãy làm theo các bước sau:
Trong thanh địa chỉ, hãy tìm kiếm cái này:
about:debugging#/runtime/this-firefox
Bạn sẽ thấy một tùy chọn để Tải Tiện ích bổ sung Tạm thời . Nhấp vào tùy chọn đó và chọn manifest.json tệp từ thư mục.
Đối với người dùng Chrome:
Trong thanh địa chỉ, hãy tìm kiếm cái này:
chrome://extensions.- Bật Chế độ nhà phát triển và chuyển sang Chế độ đó.
- Nhấp vào nút Tải giải nén và chọn thư mục mở rộng.
Tiếng hoan hô! Bạn đã cài đặt tiện ích mở rộng thành công. Nhưng tiện ích mở rộng hiện không làm bất cứ điều gì. Bây giờ hãy thêm một số chức năng vào tiện ích mở rộng của chúng tôi. Để thực hiện việc này, chúng tôi sẽ chỉnh sửa manifest.json của chúng tôi tệp như thế này:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["main.js"]
}
]
}
Trong đoạn mã trên, chúng tôi đã thêm một tập lệnh nội dung vào manifest.json . Tập lệnh nội dung có thể thao tác với Mô hình Đối tượng Tài liệu của trang web. Chúng ta có thể đưa JS (và CSS) vào một trang web bằng cách sử dụng tập lệnh nội dung.
"matches" chứa danh sách các miền và miền phụ nơi tập lệnh nội dung sẽ được thêm vào và js là một mảng các tệp JS sẽ được tải.
Bây giờ bên trong cùng một thư mục, hãy tạo một main.js tệp và thêm mã sau:
alert("The test extension is up and running")
Bây giờ hãy tải lại tiện ích mở rộng và khi bạn truy cập bất kỳ URLs nào bạn sẽ thấy một thông báo cảnh báo.
Đừng quên tải lại tiện ích mở rộng bất kỳ lúc nào bạn chỉnh sửa mã.
Cách tùy chỉnh tiện ích mở rộng trình duyệt của bạn
Bây giờ, hãy vui vẻ hơn với tiện ích mở rộng của chúng tôi.
Những gì chúng ta sẽ làm bây giờ là tạo một phần mở rộng web để thay đổi tất cả các hình ảnh của trang web mà chúng ta truy cập thành một hình ảnh mà chúng ta chọn.
Đối với điều này, chỉ cần thêm bất kỳ hình ảnh nào vào thư mục hiện tại và thay đổi main.js nộp vào:
console.log("The extension is up and running");
var images = document.getElementsByTagName('img')
for (elt of images){
elt.src = `${browser.runtime.getURL("pp.jpg")}`
elt.alt = 'an alt text'
}Hãy xem chuyện gì đang xảy ra ở đây:
var images = document.getElementsByTagName('img')
Dòng mã này chọn tất cả các phần tử trong trang web với img thẻ.
Sau đó, chúng tôi lặp qua các hình ảnh mảng bằng vòng lặp for, nơi chúng tôi thay đổi src thuộc tính của tất cả img các phần tử của một URL với sự trợ giúp của runtime.getURL chức năng.
Đây pp.jpg là tên của tệp hình ảnh trong thư mục hiện tại trên thiết bị của tôi.
Chúng tôi cần thông báo cho tập lệnh nội dung của mình về pp.jpg bằng cách chỉnh sửa manifest.json nộp vào:
{
"manifest_version":2,
"version":"1.0",
"name":"Test",
"content_scripts":[
{
"matches":["<all_urls>"],
"js":["main.js"]
}
],
"web_accessible_resources": [
"pp.jpg"
]
}
Sau đó, chỉ cần tải lại tiện ích mở rộng và truy cập bất kỳ URL nào bạn thích. Bây giờ bạn sẽ thấy tất cả các hình ảnh được thay đổi thành hình ảnh có trong thư mục làm việc hiện tại của bạn.
Cách thêm biểu tượng vào tiện ích mở rộng của bạn
Thêm mã sau vào manifest.json tệp:
"icons": {
"48": "icon-48.png",
"96": "icon-96.png"
}
Cách thêm nút thanh công cụ vào tiện ích mở rộng của bạn
Bây giờ chúng tôi sẽ thêm một nút nằm trong thanh công cụ của trình duyệt của bạn. Người dùng có thể tương tác với tiện ích mở rộng bằng nút này.
Để thêm nút trên thanh công cụ, hãy thêm các dòng sau vào manifest.json tệp:
"browser_action":{
"default_icon":{
"19":"icon-19.png",
"38":"icon-38.png"
}
}Tất cả các tệp hình ảnh phải có trong thư mục hiện tại của bạn.
Bây giờ, nếu chúng ta tải lại tiện ích mở rộng, chúng ta sẽ thấy biểu tượng cho tiện ích mở rộng của mình trên thanh công cụ của trình duyệt.
Cách thêm sự kiện nghe cho nút thanh công cụ
Có thể chúng tôi muốn làm điều gì đó khi người dùng nhấp vào nút - giả sử chúng tôi muốn mở một tab mới mỗi khi nhấp vào nút.
Đối với điều này, chúng tôi sẽ thêm phần sau vào manifest.json tệp:
"background":{
"scripts":["background.js"]
},
"permissions":[
"tabs"
]
Sau đó, chúng tôi sẽ tạo một tệp mới có tên background.js trong thư mục làm việc hiện tại và thêm các dòng sau vào tệp:
function openTab(){
var newTab = browser.tabs.create({
url:'https://twitter.com/abhilekh_gautam',
active:true
})
}
browser.browserAction.onClicked.addListener(openTab)
Bây giờ hãy tải lại tiện ích mở rộng!
Bất cứ khi nào ai đó nhấp vào nút, nó sẽ gọi openTab chức năng mở một tab mới với URL liên kết đến hồ sơ twitter của tôi. Ngoài ra, khóa hoạt động, khi được đặt thành true, sẽ làm cho tab mới được tạo thành tab hiện tại.
Lưu ý rằng bạn có thể sử dụng các API do trình duyệt cung cấp trong tập lệnh nền. Để biết thêm về API, hãy tham khảo bài viết sau:API Javacript.
Bây giờ chúng ta đã tìm hiểu một số kiến thức cơ bản về tiện ích mở rộng trình duyệt, hãy tạo một tiện ích mở rộng mà chúng ta với tư cách là nhà phát triển có thể sử dụng trong cuộc sống hàng ngày của mình.
Dự án cuối cùng
Được rồi, bây giờ chúng ta sẽ viết một cái gì đó hữu ích cho chúng ta trong cuộc sống hàng ngày. Chúng tôi sẽ tạo một tiện ích mở rộng cho phép bạn sao chép các đoạn mã từ StackOverflow chỉ với một cú nhấp chuột. Vì vậy, tiện ích mở rộng của chúng tôi sẽ thêm Copy vào trang web sao chép mã vào khay nhớ tạm thời của chúng tôi.
Demo
![Cách viết tiện ích mở rộng trình duyệt của riêng bạn [Bao gồm dự án mẫu]](/article/uploadfiles/202210/2022101315381039.png)
Đầu tiên, chúng tôi sẽ tạo một thư mục / thư mục mới, bên trong chúng tôi sẽ thêm một manifest.json tệp.
Thêm mã sau vào tệp:
{
"manifest_version":2,
"version":"1.0",
"name":"copy code",
"content_scripts":[
{
"matches":["*://*.stackoverflow.com/*"],
"js":["main.js"]
}
]
}
Nhìn vào matches bên trong content script - tiện ích mở rộng sẽ chỉ hoạt động cho miền và miền phụ của StackOverflow.
Bây giờ, hãy tạo một tệp JavaScript khác có tên là main.js trong cùng một thư mục và thêm các dòng mã sau:
var arr =document.getElementsByClassName("s-code-block")
for(let i = 0 ; i < arr.length ; i++){
var btn = document.createElement("button")
btn.classList.add("copy_code_button")
btn.appendChild(document.createTextNode("Copy"))
arr[i].appendChild(btn)
//styling the button
btn.style.position = "relative"
if(arr[i].scrollWidth === arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetHeight)
btn.style.left = `${arr[i].offsetWidth - 70}px`
else if(arr[i].scrollWidth != arr[i].offsetWidth && arr[i].scrollHeight === arr[i].offsetWidth)
btn.style.left = `${arr[i].offsetWidth - 200}px`
else
btn.style.left = `${arr[i].offsetWidth - 150}px`
if(arr[i].scrollHeight === arr[i].offsetHeight)
btn.style.bottom = `${arr[i].offsetHeight - 50}px`
else
btn.style.bottom = `${arr[i].scrollHeight - 50}px`
//end of styling the button
console.log("Appended")
}
Trước hết, tôi đã chọn tất cả các phần tử có tên lớp s-code-block - nhưng tại sao? Điều này là do khi tôi kiểm tra trang web của StackOverflow, tôi thấy rằng tất cả các đoạn mã được lưu trong một lớp có tên đó.
Và sau đó chúng tôi lặp qua tất cả các phần tử đó và thêm một nút trong các phần tử đó. Cuối cùng, chúng tôi chỉ định vị trí và tạo kiểu cho nút phù hợp (kiểu dáng vẫn chưa hoàn hảo - đây mới chỉ là bước khởi đầu).
Khi chúng tôi tải tiện ích mở rộng bằng quy trình chúng tôi đã trải qua ở trên và truy cập StackOverflow, chúng tôi sẽ thấy một nút sao chép.
Cách thêm chức năng vào nút
Bây giờ, khi nút được nhấp, chúng tôi muốn toàn bộ đoạn mã được sao chép vào bảng clip của chúng tôi. Để thực hiện việc này, hãy thêm dòng mã sau vào main.js tệp:
var button = document.querySelectorAll(".copy_code_button")
button.forEach((elm)=>{
elm.addEventListener('click',(e)=>{
navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
alert("Copied to Clipboard")
})
})
Trước hết, chúng tôi chọn tất cả các nút mà chúng tôi đã thêm vào trang web bằng cách sử dụng querySelectorAll . Sau đó, chúng tôi lắng nghe sự kiện nhấp chuột bất cứ khi nào nút được nhấp.
navigator.clipboard.writeText(elm.parentNode.childNodes[0].innerText)
Dòng mã trên sao chép mã vào khay nhớ tạm của chúng tôi. Bất cứ khi nào một đoạn mã được sao chép, chúng tôi sẽ cảnh báo người dùng bằng thông báo Copied to clipboard và chúng tôi đã hoàn thành.
Lời cuối cùng
Tiện ích mở rộng Web có thể hữu ích theo nhiều cách khác nhau và tôi hy vọng với sự trợ giúp của bài viết này, bạn sẽ có thể viết các tiện ích mở rộng của riêng mình.
Tất cả mã có thể được tìm thấy trong kho lưu trữ GitHub này. Đừng quên đưa ra yêu cầu kéo bất cứ lúc nào bạn nghĩ ra một số kiểu hay hoặc một tính năng mới như lịch sử khay nhớ tạm và các tính năng khác.
Chúc bạn mã hóa thành công!