Tự làm extension đơn giản cho trình duyệt
Opera
Trong bài viết dưới đây, chúng tôi sẽ giới thiệu với các bạn một số bước
cơ bản để tìm hiểu về cấu trúc cơ bản, cách xây dựng và thiết kế 1
extension cho trình duyệt Opera. Tuy nhiên các bạn cần phải có kiến thức
cơ bản về CSS và JavaScript để thực hiện mọi việc đơn giản hơn.
Cụ thể trong bài thử nghiệm này, chúng tôi sẽ hướng dẫn các bạn cách tạo
extension để hiển thị hoặc giấu những phần nhất định khi truy cập 1 website
bất kỳ, cho dù có phải đăng nhập hay không. Nhưng trước tiên, hãy cùng tìm
hiểu sơ qua về cấu trúc hệ thống của Opera extension. Đầu tiên là một số
nguyên tắc cơ bản:
- Extension bắt buộc phải có file config.xml
- Phải có quy trình xử lý dữ liệu ở chế độ background (thông thường là file
index.html)
- Đoạn JavaScript được chèn vào trang web phải đặt trong thư mục có tên là
includes
- File config.xml và các file khác phải được nén lại, đổi tên với phần mở
rộng là *.oex
Sơ đồ cấu trúc của 1 extension
Các bạn có thể dễ dàng nhận ra có rất nhiều nhiều loại extension, từ đơn giản
cho tới phức tạp, ảnh chụp màn hình trên thuộc dạng extension không đơn
giản. Chúng ta hãy thử áp dụng cách thực hiện này với website Slashdot với
mục đích chính là ẩn tất cả các khối nội dung trên sidebar.
File config.xml đơn giản:
Việc trước tiên cần làm tại đây là chỉnh sửa lại file config.xml – chứa thông
tin, dữ liệu về tên, mô tả ngắn gọn và tác giả của extension (xem thêm tại
đây). Các bạn hãy tưởng tượng rằng đây là 1 chiếc hộ chiếu, và chúng ta sẽ
không thể đi đâu được nếu không có nó.
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" /><name>Slashdotty</name>
<description>Hide Slashdot side blocks you don't need.</description>
Kết quả trả về sẽ có dạng mảng dữ liệu, có chứa tất cả các thành phần trong
trang với tên class của title cùng với tên class của khối. Thật may mắn rằng
Slashdot có sử dụng mô hình đặt tên theo mẫu chuẩn: blockname-title và
blockname-content do vậy nếu chúng ta bỏ hậu tố -title thì sẽ có được tên
chính xác của block. Và để lọc được ID của block, các bạn chỉ cần thêm content vào đằng sau. Để thực hiện được việc này, chúng ta sẽ phải sử dụng
tới cấu trúc lặp:
var block_name, block_content; // Declare variables outside the loop for
efficiency.
for (var i = 0, block_title; block_title = block_titles[i]; i++) {
block_name = block_title.getAttribute('id').replace('-title', '');
block_content = document.getElementById(block_name + '-content');
}
Phần cuối cùng của bước này là thiết lập thuộc tính display thành none đối
với từng phần nội dung của block. Kết hợp với các bước ở trên, chúng ta sẽ
có file includes/slashdotty.js:
// ==UserScript==
// @include />// @include />// @include http://*.slashdot.org/*
// @include https://*.slashdot.org/*
// ==/UserScript==
window.addEventListener('DOMContentLoaded', function() {
var block_titles = document.querySelectorAll('.block .title');
var block_name, block_content; // Declare variables outside the loop for
efficiency.
for (var i = 0, block_title; block_title = block_titles[i]; i++) {
// Remove the "-title" suffix to get the block name
block_name = block_title.getAttribute('id').replace('-title', '');
block_content = document.getElementById(block_name + '-content');
// Check for the block's existence to avoid errors
if (block_content) {
block_content.style.display = 'none';
}
}
}, false);
Download file extension gốc tại Opera hoặc tại đây. (nhớ đổi đuôi mở rộng
thành *.zip để kiểm tra các thành phần bên trong).
Mở rộng các tính năng của extension:
Khi một số tính năng chủ chốt đã được thiết lập, việc còn lại của chúng ta là
gán quyền điều khiển cho người dùng hiển thị hoặc giấu những khối dữ liệu
nào. Để thực hiện việc này, các bạn cần xóa bỏ dòng mã thiết lập chế độ hiển
thị từ display thành none và 2 chức năng hỗ trợ khác:
- Một là các đoạn text có thể nhấn được trên từng khối dữ liệu.
- Hai là hàm thay đổi giá trị thuộc tính của khối dữ liệu – display thành none
hoặc block.
Trước tiên là hàm được áp dụng để hiển thị hoặc giấu thông tin, dữ liệu hiển
thị trên khối:
// Function to show and hide a block's content
function addToggle(block_content, block_toggle) {
var block_style = block_content.style;
block_toggle.addEventListener('click', function() {
block_style.display = (block_style.display !== 'none') ? 'none' : 'block';
}, false);
}
Lưu ý rằng tại đây có 2 argument – phần nội dung của khối và toggle, nhưng
trong bài thử nghiệm này thì không thực sự cần thiết. Đơn giản, bởi vì chức
năng addToggle được đính kèm trong phần tính năng ở mức cao hơn – có
nhiệm vụ tự động thực thi khi trang web được tải, dù sao đi chăng nữa thì
việc sử dụng argument sẽ mang lại sự linh hoạt hơn cho người dùng.
Chúng ta có thể dễ dàng thấy rằng đã thiết lập giá trị display với dòng lệnh if.
Và cách làm như vậy cũng tương tự như các dòng lệnh dưới đây, nhưng ngắn
gọn hơn nhiều:
if (block_style.display !== 'none') {
block_style.display = 'none';
} else {
block_style.display = 'block';
}
Và phần cuối cùng của extension này tại đây là cho phép người dùng nhấn
chuột, ví dụ như thành phần block_toggle mà chúng ta đã chuyển vào trong
chức năng addToggle ở bên trên. Và để đơn giản hóa quá trình này, các bạn
hãy tạo thêm thành phần span với nội dung text có thể thay đổi được, trong
vòng lặp tại đây, chúng ta sẽ gán tới từng phần title của khối dữ liệu như sau:
if (block_content) {
// Add a show/hide text link
block_toggle = document.createElement('span');
block_toggle.textContent = 'Hide/Show';
block_title.appendChild(block_toggle);
addToggle(block_content, block_toggle);
}
Và ghép tất cả lại với nhau, chúng ta sẽ có file slashdotty.js hoàn chỉnh như
sau:
// ==UserScript==
// @include />// @include />// @include http://*.slashdot.org/*
// @include https://*.slashdot.org/*
// ==/UserScript==
window.addEventListener('DOMContentLoaded', function() {
// Function to show and hide a block's content
function addToggle(block_content, block_toggle) {
var block_style = block_content.style;
block_toggle.addEventListener('click', function() {
block_style.display = (block_style.display !== 'none') ? 'none' :
'block';
}, false);
}
var block_titles = document.querySelectorAll('.block .title');
var block_name, block_content, block_toggle; // Declare variables outside
the loop for efficiency.
for (var i = 0, block_title; block_title = block_titles[i]; i++) {
// Remove the "-title" suffix to get the block name
block_name = block_title.getAttribute('id').replace('-title', '');
block_content = document.getElementById(block_name + '-content');
if (block_content) {
// Add a show/hide text link
block_toggle = document.createElement('span');
block_toggle.textContent = 'Hide/Show';
block_title.appendChild(block_toggle);
addToggle(block_content, block_toggle);
}
}
}, false);
Các bạn có thể tải file extension này tại Opera hoặc tại đây. (đổi đuôi file
thành *.zip để kiểm tra các phần bên trong).
Chúc các bạn thành công!
