Tải bản đầy đủ (.pdf) (9 trang)

Tạo extension đơn giản dành cho google chrome

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (837.98 KB, 9 trang )

Tạo extension đơn giản dành cho
Google Chrome


Trong bài viết hướng dẫn 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ạo extension – tiện ích mở rộng đối với trình
duyệt Chrome của Google, với chức năng chính là gán thêm 1 biểu tượng
vào Chrome, khi người dùng nhấn chuột vào đó thì trình duyệt sẽ hiển thị 1
trang mới dưới dạng popup.

Biểu tượng và trang web sẽ trông giống như vậy
Cách làm tương tự như vậy các bạn có thể áp dụng trên các phiên bản
Chrome khác nhau trên Windows, Mac hoặc Linux.
Trong phần đầu, chúng ta sẽ tạo 1 extension nho nhỏ với chức năng chính là
gán hành động của trình duyệt tới thanh toolbar của Google Chrome. Tạo 1
thư mục ở bất kỳ nơi nào trên máy tính, và tại đây chúng ta sẽ đặt toàn bộ các


file có liên quan tới extension. Bên trong thư mục này, tạo mới 1 file text và
đặt tên là manifest.json với nội dung như sau:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
" />]
}
Sau đó, copy icon này vào cùng thư mục. Tiếp theo, mở cửa sổ quản lý


extension chính của Chrome qua menu chính > Tools > Extensions:


Đánh dấu check vào ô Developer mode, sau đó nhấn nút Load unpacked
extension mới hiển thị, trỏ đường dẫn tới thư mục extension vừa tạo và OK:


Kết quả của chúng ta tại bước này sẽ trông giống như hình trên
Mở rộng chức năng:
Tại bước này, các bạn cần thay đổi một chút chức năng trong cơ chế hoạt
động của extension. Trước tiên, mở file manifest.json và chỉnh sửa theo đoạn
mã sau:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {


"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
" />]
}
Trong thư mục extension, tạo mới 1 file text và đổi tên thành popup.html,
lưu đoạn mã dưới đây vào:
<style>
body {
min-width:357px;

overflow-x:hidden;
}

img {
margin:5px;
border:2px solid black;


vertical-align:middle;
width:75px;
height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();
req.open(
"GET",
" +
"method=flickr.photos.search&" +
"api_key=90485e931f687a9b9c2a66bf58a3861a&" +
"text=hello%20world&" +
"safe_search=1&" + // 1 is "safe"
"content_type=1&" + // 1 is "photos only"
"sort=relevance&" + // another good one is "interestingness-desc"
"per_page=20",
true);


req.onload = showPhotos;

req.send(null);

function showPhotos() {
var photos = req.responseXML.getElementsByTagName("photo");

for (var i = 0, photo; photo = photos[i]; i++) {
var img = document.createElement("image");
img.src = constructImageURL(photo);
document.body.appendChild(img);
}
}

// See: />function constructImageURL(photo) {
return "http://farm" + photo.getAttribute("farm") +
".static.flickr.com/" + photo.getAttribute("server") +
"/" + photo.getAttribute("id") +
"_" + photo.getAttribute("secret") +


"_s.jpg";
}
</script>
Trở lại cửa sổ quản lý extension chính, nhấn nút Reload để tải lại toàn bộ nội
dung mới của file. Sau đó, nhấn vào biểu tượng Hello, cửa sổ dưới dạng
popup sẽ hiển thị với toàn bộ nội dung của trang popup.html:

Rất đơn giản và dễ dàng, chúc các bạn thành công!




×