Nội dung

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ó.  Slashdotty Hide Slashdot side blocks you don't need. Daniel Davis (@ourmaninjapan) 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== 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: 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 http://slashdot.org/* // @include https://slashdot.org/* // @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 http://slashdot.org/* // @include https://slashdot.org/* // @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';