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

Tạo extension đơn giản dành cho Google Chrome Trong viết hướng dẫn đây, giới thiệu với bạn số bước để tạo extension – tiện ích mở rộng trình duyệt Chrome Google, với chức gán thêm biểu tượng vào Chrome, người dùng nhấn chuột vào trình duyệt hiển thị trang dạng popup Biểu tượng trang web trông giống Cách làm tương tự bạn áp dụng phiên Chrome khác Windows, Mac Linux Trong phần đầu, tạo extension nho nhỏ với chức gán hành động trình duyệt tới toolbar Google Chrome Tạo thư mục nơi máy tính, đặt toàn file có liên quan tới extension Bên thư mục này, tạo file text đặt tên manifest.json với nội dung 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 vào thư mục Tiếp theo, mở cửa sổ quản lý extension Chrome qua menu > Tools > Extensions: Đánh dấu check vào ô Developer mode, sau nhấn nút Load unpacked extension hiển thị, trỏ đường dẫn tới thư mục extension vừa tạo OK: Kết bước trông giống hình Mở rộng chức năng: Tại bước này, bạn cần thay đổi chút chức chế hoạt động extension Trước tiên, mở file manifest.json 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": [ "http://api.flickr.com/" ] } Trong thư mục extension, tạo file text đổi tên thành popup.html, lưu đoạn mã 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&" + // is "safe" "content_type=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.html function 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 nội dung file Sau đó, nhấn vào biểu tượng Hello, cửa sổ dạng popup hiển thị với toàn nội dung trang popup.html: Rất đơn giản dễ dàng, chúc bạn thành công! ... phiên Chrome khác Windows, Mac Linux Trong phần đầu, tạo extension nho nhỏ với chức gán hành động trình duyệt tới toolbar Google Chrome Tạo thư mục nơi máy tính, đặt toàn file có liên quan tới extension. .. sổ quản lý extension Chrome qua menu > Tools > Extensions: Đánh dấu check vào ô Developer mode, sau nhấn nút Load unpacked extension hiển thị, trỏ đường dẫn tới thư mục extension vừa tạo OK: Kết... viết hướng dẫn đây, giới thiệu với bạn số bước để tạo extension – tiện ích mở rộng trình duyệt Chrome Google, với chức gán thêm biểu tượng vào Chrome, người dùng nhấn chuột vào trình duyệt hiển