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

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...
Nội dung trích xuất từ tài liệu:
Tạo extension đơn giản dành cho Google ChromeTạo extension đơn giản dành cho Google ChromeTrong 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ạnmột số bước cơ bản để tạo extension – tiện ích mở rộng đối với trìnhduyệt Chrome của Google, với chức năng chính là gán thêm 1 biểu tượngvào Chrome, khi người dùng nhấn chuột vào đó thì trình duyệt sẽ hiển thị 1trang mới dưới dạng popup. Biểu tượng và trang web sẽ trông giống như vậyCá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ảnChrome 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 1thư 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ácfile 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: [ http://api.flickr.com/ ]}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 unpackedextension 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ênMở 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ạnmã 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: [ http://api.flickr.com/ ]}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:body { min-width:357px; overflow-x:hidden;}img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px;}var req = new XMLHttpRequest();req.open( GET, http://api.flickr.com/services/rest/? + 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: http://www.flickr.com/services/api/misc.urls.htmlfunction constructImageURL(photo) { return http://farm + photo.getAttribute(farm) + .static.flickr.com/ + photo.getAttribute(server) + / + photo.getAttribute(id) + _ + photo.getAttribute(secret) + _s.jpg;}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ộidung mới của file. Sau đó, nhấn vào biểu tượng Hello, cửa sổ dưới dạngpopup 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!