Viết Extension cho Google Chrome – Đơn giản ... và phức tạp

Ngày đăng: 30/3/2012, 10:35:46PM | Lượt xem: 10,689

Chrome, Extension,

Tạo một extension cho trình duyệt Chrome là một công việc vô cùng đơn giản (nếu như bỏ đi phần chức năng của extension). Bạn chỉ cần tạo một vài tập tin và nạp vào Chrome là có ngay một extension của riêng mình. Nếu muốn tạo một extension chuyên nghiệp, bạn có thể tham khảo thư viện lập trình về Chrome API của Google tại: Google Chrome Extensions.

Từ đơn giản …

Các bước thực hiện:

1. Tạo một thư mục với tên bất kì để chứa các tập tin của extension.

2. Tạo tập tin manifest.json trong thư mục trên. Tập tin này được viết theo cú pháp JSON của javascript để định nghĩa các dữ liệu theo từng cặp name/value.

3. Trong tập tin sau thì default_icon sẽ là tên tập tin .ico mà tôi đặt làm biểu tượng của extension, và popup là tên tập tin .html sẽ hiển thị khi người dùng click vào icon của extension.

manifest.json:

{
  "name": "Hello World",
  "version": "1.0",
  "description": "My First Chrome Extension",
  "browser_action": {
    "default_icon": "yinyang.ico",
	"popup":"myPopup.html"
  }
}

4. Copy một tập tin ảnh bất kì (nên sử dụng định dạng .icon) và đổi tên thành yinyang.ico vào thư mục đang làm việc.

5. Tạo tập tin myPopup.html với nội dung bạn cần hiển thị cùng với các chức năng cần thiết. Bạn có thể thêm các tập tin các như hình ảnh, script, … Trong ví dụ này, tôi chỉ tạo một trang html đơn giản hiển thị hộp thoại chào người dùng:

myPopup.html:

<html>
<head><title>My First Chrome Extension</title></head>
<script type="text/javascript">
function doSomething()
{
	var name=document.getElementById("inputBox").value.trim();

	var time =new Date().getHours();
	var text;

	if(time < 12)
		text="Good morning, "+name+"!";
	else if(time < 18)
		text="Good afternoon, "+name+"!";
	else
		text="Good evening, "+name+"!";

	if(name=="")
		text = text.replace(", ","");
	alert(text);

}

</script>

<body style="background:url('yinyang.jpg'); background-repeat:no-repeat;">
Your name:<input type="text" id="inputBox"></input>
<button onclick="doSomething()">Click Me!</button>
</body>
</html>

6. Mở Chrome và mở giao diện Tools>Extensions. Check vào Developer mode tại góc phải trên, tiếp tục nhấn nút Load unpacked extension… và chọn đến thư mục chứa các tập tin vừa tạo. Lúc này, extension của bạn sẽ được thêm vào và hiển thị bên dưới, đồng thời biểu tượng của extension cũng xuất hiện trên toolbar (bên phải address bar).

Kết quả như sau:

… đến phức tạp

Để phát triển một extension hữu ích và tận dụng được mọi khả năng của Chrome. Bạn hãy:

Học HTML, CSS và Javascript.
Đọc các tài liệu hướng dẫn của Google: Developer’s Guide.
Tham khảo các ví dụ tại: Samples
Và cuối cùng là Hosting.

Download thư mục ví dụ (.zip)

http://yinyangit.wordpress.com

Chia sẻ qua:

Ý kiến bạn đọc

Tin tức khác

C# – Thread Signaling: Auto và Manual Reset Event - 22/2/2013

C# – Giao tiếp giữa các process bằng Pipe Stream (Inter-process communication) - 19/2/2013

.NET – Tạo instance và chuyển đổi kiểu dữ liệu bất kì - 10/4/2012

OOP – Interface vs Abstract class - 4/4/2012

Codecademy – “Cách đơn giản nhất để học lập trình” - 30/3/2012

.NET 4 – System.Tuple vs Anonymous Type - 30/3/2012

Thiết kế Entity Data Model – Part 3: Code First - 28/3/2012

Thiết kế Entity Data Model – Part 2: Model First - 28/3/2012

Thiết kế Entity Data Model – Part 1: Database First - 28/3/2012

Tổng quan kiến trúc của Entity Framework - 28/3/2012

Tin tiêu điểm

Đọc và ghi tập tin bằng C# – read and write file with C# .net (62,460)
Định dạng kiểu DateTime C# (49,926)
Đọc và ghi XML với C# – Read and Write XML with C# (34,381)
Sử dụng control ListView trong C# – Using ListView control in C# (30,846)
C# hướng đối tượng - ĐỐI TƯỢNG VÀ LỚP_1 (28,965)
Sử dụng control TreeView trong C# – Using TreeView control in C# (26,123)
C# - Sử Dụng Delegate Để Truyền Giá Trị Giữa Các Form (25,214)
Định dạng hiển thị cho kiểu dữ liệu Double, Float trong C# (24,934)
C# hướng đối tượng - ĐỐI TƯỢNG VÀ LỚP_2 (22,110)
Thiết kế Entity Data Model – Part 3: Code First (17,525)

Gallery

In hac habitasse platea dictumst

In imperdiet, magna quis cursus gravida, lacus mi vehicula ante, at pharetra nisl arcu et nisi. In hac habitasse platea dictumst. Integer vel iaculis lacus. Fusce quis ipsum enim

Proin eleifend tincidunt velit

Proin eleifend tincidunt velit, at fermentum tortor aliquam vel! Pellentesque viverra, eros non pharetra tristique, sem nulla mollis ante, at blandit libero sapien a dolor. Duis tincidunt sem et quam…

Proin eleifend tincidunt velit

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
ca do bong da online

Vietshare

Viết Extension cho Google Chrome – Đơn giản ... và phức tạp

Từ đơn giản …

manifest.json:

myPopup.html:

… đến phức tạp

Download thư mục ví dụ (.zip)

Tin tức khác

C# – Thread Signaling: Auto và Manual Reset Event - 22/2/2013

C# – Giao tiếp giữa các process bằng Pipe Stream (Inter-process communication) - 19/2/2013

.NET – Tạo instance và chuyển đổi kiểu dữ liệu bất kì - 10/4/2012

OOP – Interface vs Abstract class - 4/4/2012

Codecademy – “Cách đơn giản nhất để học lập trình” - 30/3/2012

.NET 4 – System.Tuple vs Anonymous Type - 30/3/2012

Thiết kế Entity Data Model – Part 3: Code First - 28/3/2012

Thiết kế Entity Data Model – Part 2: Model First - 28/3/2012

Thiết kế Entity Data Model – Part 1: Database First - 28/3/2012

Tổng quan kiến trúc của Entity Framework - 28/3/2012

Tin tiêu điểm

Gallery

In hac habitasse platea dictumst

Proin eleifend tincidunt velit

Proin eleifend tincidunt velit

Maecenas viverra rutrum pulvinar

Text Links

Tags