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.. Cụ thể tron

Trang 1

Tự làm extension đơn giản cho trình duyệt

Opera

Trang 2

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

Trang 3

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

Trang 4

<?xml version="1.0" encoding="utf-8"?>

<widget xmlns="http://www.w3.org/ns/widgets">

<name>Slashdotty</name>

<description>Hide Slashdot side blocks you don't need.</description> <author href="http://people.opera.com/danield/">Daniel Davis

(@ourmaninjapan)</author>

</widget>

Gán thêm JavaScript:

Tiếp theo, chúng ta tạo mới 1 thư mục và 1 file JavaScript rỗng bên trong

Tại đây, các bạn thiết lập chế độ chỉ hiển thị trên những trang trong domain

slashdot.org:

// ==UserScript==

// @include http://slashdot.org/*

// @include https://slashdot.org/*

// @include http://*.slashdot.org/*

// @include https://*.slashdot.org/*

// ==/UserScript==

Trang 5

Cũng trong file JavaScript này, chúng ta gán thêm chức năng tự động kích

hoạt khi website được tải:

window.addEventListener('DOMContentLoaded', function() {

// Functionality will go here

}, false);

Việc tiếp theo tại đây là duyệt tất cả các khối có chứa dữ liệu trên trang, nhưng thật không may rằng một số thành phần nhất định lại không có ID, thay vào đó là title và chúng ta sẽ sử dụng chúng Được áp dụng ở đây là Selectors API Level 1:

var block_titles = document.querySelectorAll('.block title');

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:

Trang 6

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==

var block_name, block_content; // Declare variables outside the loop for

Trang 7

efficiency

// Remove the "-title" suffix to get the block name

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:

Trang 8

- 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

Trang 9

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:

// Add a show/hide text link

block_toggle = document.createElement('span');

block_toggle.textContent = 'Hide/Show';

block_title.appendChild(block_toggle);

Trang 10

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==

// 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';

Trang 11

}, false);

}

var block_name, block_content, block_toggle; // Declare variables outside the loop for efficiency

// Remove the "-title" suffix to get the block name

block_content = document.getElementById(block_name + '-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);

Trang 12

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!

Định dạng
Số trang	12
Dung lượng	144,8 KB