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

Tự làm extension đơn giản cho trình duyệt Opera Trong viết đây, giới thiệu với bạn số bước để tìm hiểu cấu trúc bản, cách xây dựng thiết kế extension cho trình duyệt Opera Tuy nhiên bạn cần phải có kiến thức CSS JavaScript để thực việc đơn giản Cụ thể thử nghiệm này, hướng dẫn bạn cách tạo extension để hiển thị giấu phần định truy cập website bất kỳ, cho dù có phải đăng nhập hay không Nhưng trước tiên, tìm hiểu sơ qua cấu trúc hệ thống Opera extension Đầu tiên số nguyên tắc bản: - Extension bắt buộc phải có file config.xml - Phải có quy trình xử lý liệu chế độ background (thông thường file index.html) - Đoạn JavaScript chèn vào trang web phải đặt thư mục có tên includes - File config.xml file khác phải nén lại, đổi tên với phần mở rộng *.oex Sơ đồ cấu trúc extension Các bạn dễ dàng nhận có nhiều nhiều loại extension, từ đơn giản phức tạp, ảnh chụp hình thuộc dạng extension không đơn giản Chúng ta thử áp dụng cách thực với website Slashdot với mục đích ẩn tất khối nội dung sidebar File config.xml đơn giản: Việc trước tiên cần làm chỉnh sửa lại file config.xml – chứa thông tin, liệu tên, mô tả ngắn gọn tác giả extension (xem thêm đây) Các bạn tưởng tượng hộ chiếu, đâu  Slashdotty Hide Slashdot side blocks you don't need. Daniel Davis (@ourmaninjapan) Gán thêm JavaScript: Tiếp theo, tạo thư mục file JavaScript rỗng bên Tại đây, bạn thiết lập chế độ hiển thị trang domain slashdot.org: // ==UserScript== // @include http://slashdot.org/* // @include https://slashdot.org/* // @include http://*.slashdot.org/* // @include https://*.slashdot.org/* // ==/UserScript== Cũng file JavaScript này, gán thêm chức tự động kích hoạt website tải: window.addEventListener('DOMContentLoaded', function() { // Functionality will go here }, false); Việc duyệt tất khối có chứa liệu trang, thật không may số thành phần định lại ID, thay vào title sử dụng chúng Được áp dụng Selectors API Level 1: var block_titles = document.querySelectorAll('.block title'); Kết trả có dạng mảng liệu, có chứa tất thành phần trang với tên class title với tên class khối Thật may mắn Slashdot có sử dụng mô hình đặt tên theo mẫu chuẩn: blockname-title blockname-content bỏ hậu tố -title có tên xác block Và để lọc ID block, bạn cần thêm content vào đằng sau Để thực việc này, 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 bước thiết lập thuộc tính display thành none phần nội dung block Kết hợp với bước trên, 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 Opera (nhớ đổi đuôi mở rộng thành *.zip để kiểm tra thành phần bên trong) Mở rộng tính extension: Khi số tính chủ chốt thiết lập, việc lại gán quyền điều khiển cho người dùng hiển thị giấu khối liệu Để thực việc này, bạn cần xóa bỏ dòng mã thiết lập chế độ hiển thị từ display thành none chức hỗ trợ khác: - Một đoạn text nhấn khối liệu - Hai hàm thay đổi giá trị thuộc tính khối liệu – display thành none block Trước tiên hàm áp dụng để hiển thị giấu thông tin, liệu hiển thị 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 ý có argument – phần nội dung khối toggle, thử nghiệm không thực cần thiết Đơn giản, chức addToggle đính kèm phần tính mức cao – có nhiệm vụ tự động thực thi trang web tải, dù việc sử dụng argument mang lại linh hoạt cho người dùng Chúng ta dễ dàng thấy thiết lập giá trị display với dòng lệnh if Và cách làm tương tự dòng lệnh đây, ngắn gọn nhiều: if (block_style.display !== 'none') { block_style.display = 'none'; } else { block_style.display = 'block'; } Và phần cuối extension cho phép người dùng nhấn chuột, ví dụ thành phần block_toggle mà chuyển vào chức addToggle bên Và để đơn giản hóa trình này, bạn tạo thêm thành phần span với nội dung text thay đổi được, vòng lặp đây, gán tới phần title khối liệu 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 lại với nhau, có file slashdotty.js hoàn chỉ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'; }, 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 tải file extension Opera (đổi đuôi file thành *.zip để kiểm tra phần bên trong) Chúc bạn thành công! [...]... = 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! ... cách xây dựng thiết kế extension cho trình duyệt Opera Tuy nhiên bạn cần phải có kiến thức CSS JavaScript để thực việc đơn giản Cụ thể thử nghiệm này, hướng dẫn bạn cách tạo extension để hiển thị... phần mở rộng *.oex Sơ đồ cấu trúc extension Các bạn dễ dàng nhận có nhiều nhiều loại extension, từ đơn giản phức tạp, ảnh chụp hình thuộc dạng extension không đơn giản Chúng ta thử áp dụng cách... cho dù có phải đăng nhập hay không Nhưng trước tiên, tìm hiểu sơ qua cấu trúc hệ thống Opera extension Đầu tiên số nguyên tắc bản: - Extension bắt buộc phải có file config.xml - Phải có quy trình