Tạo phần mở rộng dành cho Speed Dial

By SupValya, Ngọc Sơn

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ột name 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.

Extension đồng hồ đã được cài 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:

Một extension đồng hồ thân thiện đã được cài trong Speed Dial của trình duyệt.

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.

No new comments accepted.