Tạo phần mở rộng dành cho Speed Dial
Giới thiệu
Vào năm 2007, Opera đã giới thiệu Speed Dial với toàn thể người dùng Opera. Ngày nay tính năng này đã rất phổ biến và hầu như các trình duyệt khác cũng có tính năng tương tự. Nhưng chúng tôi vẫn tự hào rằng, chúng ta sẽ không phải là những bậc làm cha làm mẹ tốt nếu như không giúp những đứa trẻ của mình trưởng thành và phát triển thêm những kỹ năng mới? Từ khi Opera 11.10 được phát hành, Opera đã cải tiến hình ảnh hiển thị và UX của Speed Dial và đã được thêm công cụ để giúp các nhà lập trình điều khiển cách mà trang web của họ được hiển thị trong Speed Dial. Ở Opera 11.50, Opera đang nhắc đến một bước tiến xa hơn với Speed Dial extension.
Cũng giống như cách mà bạn mở rộng trình duyệt của bạn với hàng trăm Opera extension, bạn cũng có thể tùy biến và mở rộng Speed Dial nhằm làm cho nó hữu ích hơn. Thay vì chỉ giới hạn ở việc hiển thị trang web hay một biểu tượng, Speed Dial bây giờ có thể dựng những nội dung mở rộng trực tiếp, và bài viết này là để cho bạn biết điều đó.
Chú ý: Để thấy những ví dụ đang chạy dưới đây, bạn sẽ cần Opera 11.50 thêm một Speed Dial extension ví dụ: tải Speed Dial clock.
Những điều cơ bản
Để duy trì sự đồng nhất với các phần mở rộng với Opera Extension, Speed Dial extension dùng
cùng một định dạng và cấu trúc với Opera Extension nhưng sẽ có vài sự bổ sung. Nói cách khác,
những thay đổi nhỏ dưới đây vào file config.xml
có thể mang thay đổi đã tồn tại ở
Opera extension vào Speed Dial extension:
- Một lệnh
<feature>
với mộtname
thuộc tính của giá trịopera:speeddial
, để đưa phần mở rộng vào một Speed Dial extension. - Một
viewmodes
thuộc tính chứa thẻ<widget>
với giá trịminimized
: điều này làm hiển thị một trang nền trong ô Speed Dial.
Xin lưu ý, tuy nhiên, phần mở rộng này không thể dùng cho cả hai tính năng là Speed Dial và thanh công cụ trình duyệt. Nói cách khác, một phần mở rộng trên thanh công cụ không thể thực thi trong Speed Dial trong thời điểm hiện tại.
Chỉ định Speed Dial extension với config.xml
Bây giờ chúng ta cùng thực hành và khảo sát qua một ví dụ cụ thể. Để xem các đoạn mã, hãy xem và tải Speed Dial clock extension và xem file mã nguồn ở bên trong. Hình 1 cho thấy giao diện extension đồng hồ trong Speed Dial.
Hình 1 cho thấy giao diện extension đồng hồ trong Speed Dial.[/html:p
<p]Thường thì Speed Dial hiển thị một ảnh chụp toàn bộ trang web, Speed Dial extensions hiển thị
ohần bắt đầu (hoặc phần nền) trang của extension—đây là file index.html
theo mặc
định. Mở kích hoạt điều này, đầu tiên chúng ta cần phải thêm thuộc tínhviewmodes
vào config.xml
's thẻ <widget>
, với giá trị
minimized
:
<widget xmlns="http://www.w3.org/ns/widgets"
id="http://example.com/SimpleClockSD" viewmodes="minimized">
Lệnh trên làm cho trình duyệt hiển thị nền của phần mở rộng trong chế độ biểu mẫu cực tiểu—
kích thước mặc định của ô Speed Dial ở chế độ thu phóng 100% là 256 pixel chiều rộng và 160 pixel
chiều cao. Ngoài ra, chúng ta cũng cần thêm vào một lệnh feature
cho Opera Speed
Dial với thuộc tínhrequired
, và một lệnh param
:
<feature name="opera:speeddial" required="false">
<param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>
Phần tử feature
thuộc required
thuộc tính ở nơi mà Speed Dial
cần để extension này chạy. Ví dụ, có thể có những trình duyệt hoặc nhân trình duyệt tương tích với
Opera extension nhưng lại không có Speed Dial. Nếu extension của bạn hoạt động trên những nền
tảng đó thì hãy dùng giá trị false
; nếu extension của bạn không làm việc không cần
Speed Dial thì chọn true
.
Phần tử param
là bắt buộc phải có, và quy định cụ thể mà trang cần mở khi
biểu tượng Speed Dial được nhấp.
Đây là file config.xml
hoàn chỉnh cho extension này:
<?xml version="1.0" encoding="utf-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="http://example.com/SimpleClockSD"
defaultlocale="en" viewmodes="minimized">
<name short="Simple Clock">Clock Speed Dial Extension</name>
<description>This is an example Speed Dial extension showing a simple
clock.</description>
<author href="http://people.opera.com/danield/">Daniel Davis</author>
<icon src="images/icon_64.png"/> <!-- Icon source: http://www.openclipart.org/detail/17552 -->
<feature name="opera:speeddial" required="false">
<param name="url" value="http://en.wikipedia.org/wiki/Time"/>
</feature>>
</widget>
Thêm nội dung vào extension
Bước kế tiếp là tạo ra thứ gì đó thú vị để hiển thị trong cửa sổ Speed Dial. Đây là trang nền của
extension vì vậy chúng ta cần tạo một file tên là index.html
ở cùng thư mục với
config.xml
. Chẳng hạn như, chúng ta đang tạo ra một đoạn JavaScript đơn giản hiển
thị đồng hồ kỹ thuật số để hiển thị giờ hiện tại. Đầu tiên, chúng ta sẽ tạo ra một file cơ bản
index.html
với phần tử output
rỗng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Clock Speed Dial Extension</title>
</head>
<body>
<output></output>
<script src="scripts/background.js"></script>
</body>
</html>
Theo đó, chúng ta cần tạo một thư mục scripts
chứa
filebackground.js
mà chúng ta liên kết đến. Fiel JS có thể giống như sau:
window.addEventListener('load', function() {
// Simple function to prefix a zero if the value passed is less than 10
function formatTime(time) {
return (time < 10) ? '0' + time : time;
}
var output = document.querySelector('output');
var date, hours, mins, secs;
// Get and display the current time every 500 milliseconds
var timer = window.setInterval(function() {
date = new Date();
hours = date.getHours();
mins = date.getMinutes();
secs = date.getSeconds();
output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs);
}, 500); // Twice a second to allow for slight delays in JavaScript execution
}, false);
Bảng phong cách đi kèm (style.css
) thực sự rất đơn giản, nhưng bao gồm một
thủ thuật tinh vi:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
/* Use display:table and display:table-cell
so that we can use vertical-align:middle */
body {
background: #444;
color: #fff;
display: table;
height: 100%;
width: 100%;
}
output {
display: table-cell;
font-family: monospace;
font-size: 10em;
text-align: center;
text-shadow: 0 0.1em 0.1em #000;
vertical-align: middle;
}
/* Styles here are only applied in a "minimized" state */
@media screen and (view-mode: minimized) {
output {
font-size: 1.8em;
}
}
Như bạn có thể thấy, đây là một truy vấn truyền thông của CSS3 ở cuối của file này để kiểm tra
cho điều kiện <ode>view-mode: minimized, phù hợp với các view-mode
đặ điểm kỹ thuật
Media Feature . Nói cách khác, các phong cách trong phần này sẽ chỉ áp dụng khi trang được
hiển thị trong một trạng thái thu nhỏ chẳng hạn như một ô Speed Dial. Đây là một cách tiện dụng để
ghi đè phong cách cho một tình huống nhất định mà không cần phải duy trì thiết kế nhiều.
Kết thúc extension
Như thường lệ, để đóng gói một phần mở rộng thì zip tất cả các file trong thư mục (nhưng không
phải là chính thư mục đó) và đổi tên với đuôi là .oex
. Nếu không, bạn có thể tải về file clock_SD_extension.oex và bắt đầu thử nghiệm.
SpeedDialContext
API
Một khi đã được cài, phần mở rộng này có thể linh hoạt kiểm soát các ô Speed Dial với
SpeedDialContext
API. Đây là một API cực kỳ đơn giản với 2 thuộc tính có thể ghi:
title
and url
. Chúng được truy cập từ các nền JavaScript
thông qua đối tượng opera.contexts.speeddial
, như là:
if (opera.contexts.speeddial) {
var sd = opera.contexts.speeddial;
sd.title = "My title";
sd.url = "mypage.html";
}
Chúng ta có thể dùng tính năng này để cải thiện extension đồng hồ, ví dụ bằng cách làm cho nó
hiển thị một thông điệp thân thiện phụ thuộc vào thời gian trong ngày. Chỉ cần tạo một file chúng ta
cần chỉnh sửa vớibackground.js
JavaScript file:
window.addEventListener('load', function() {
// Simple function to prefix a zero if the value passed is less than 10
function formatTime(time) {
return (time < 10) ? '0' + time : time;
}
var output = document.querySelector('output');
var date, hours, mins, secs, tmp_hours, timeofday;
var messages = {
"morning": "Good morning!",
"afternoon": "Good afternoon!",
"evening": "Good evening!",
"night": "Shouldn't you be in bed?"
};
// Get and display the current time every 500 milliseconds
var timer = window.setInterval(function() {
date = new Date();
hours = date.getHours();
mins = date.getMinutes();
secs = date.getSeconds();
output.innerHTML = formatTime(hours) + ':' + formatTime(mins) + ':' + formatTime(secs);
// Make the Speed Dial title display time-related message
if (hours !== tmp_hours) {
if (hours > 15) {
timeofday = 'evening';
} else if (hours > 11) {
timeofday = 'afternoon';
} else if (hours > 3) {
timeofday = 'morning';
} else {
timeofday = 'night';
}
if (opera.contexts.speeddial) {
opera.contexts.speeddial.title = messages[timeofday];
}
tmp_hours = hours;
}
}, 500); // Twice a second to allow for slight delays in JavaScript execution
}, false);
Phần này tương tự như ví dụ đầu tiên nhưng có một vài thứ đã được bổ sung, như:
- Một đối tượng
messages
có chứa thông báo cho các thời điểm khác nhau trong ngày. - Một sự kiểm tra lặp đi lặp lại khi giờ đã thay đổi.
- Một dòng tin nhắn có liên quan cho thấy từ đối tượng
messages
ở tiêu đề Speed Dial.
Extension này có thể tảii về tại đây: friendly_clock_SD_extension.oex. Khi đã được cài, nó trông như thế này:
Hình 2: Một extension đồng hồ thân thiện đã được cài trong Speed Dial của trình duyệt.
Kết luận
Như bạn có thể thấy, các nhà phát triển extension bây giờ có một cửa sổ vượt trội để thêm sự tiện lợi, dễ-sử-dụng hoặc vui vẻ với các extension của họ.Các ví dụ ở đây là cơ bản nhưng cho thấy tiềm năng của các phần mở rộng Speed Dial khi kết hợp với những ý tưởng thông minh và kỹ năng phát triển web. Opera hi vọng sẽ thấy các extension dành cho Speed Dial trở nên hữu ích hơn việc chỉ liên kết đến một trang web, vì vậy chúng tôi rất mong được thấy những cách sáng tạo mà bạn sử dụng API này tại kho Opera extension!
Tham khảo
Opera Extensions API: Speed Dial guide
This article is licensed under a Creative Commons Attribution 3.0 Unported license.
Comments
The forum archive of this article is still available on My Opera.