Tạo extension xem ảnh random cho Chrome

Trong bài viết này, chúng ta sẽ cùng nhau tạo một extension xem ảnh random cho Chrome. Extension này sẽ hiển thị một hình ảnh ngẫu nhiên mỗi khi người dùng nhấp vào biểu tượng của extension.

Chuẩn bị

Trước khi bắt đầu, bạn cần chuẩn bị một số thứ sau:

Một trình duyệt Chrome
Một IDE hoặc editor code (ví dụ: Visual Studio Code, Sublime Text)
Một chút kiến thức về HTML, CSS và JavaScript

Tạo một thư mục mới

Tạo một thư mục mới để chứa extension của bạn. Trong thư mục này, bạn sẽ tạo các file HTML, CSS và JavaScript.

Tạo file manifest.json

File manifest.json là file cấu hình cho extension của bạn. File này sẽ chứa các thông tin cơ bản về extension, chẳng hạn như tên, phiên bản, quyền truy cập, v.v.

Mở một file mới trong editor code của bạn và dán nội dung sau vào file:

{
  "name": "Xem ảnh random",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Extension xem ảnh random",
  "permissions": ["tabs", "webNavigation"],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["background.js"]
  }
}

Tạo file popup.html

File popup.html sẽ được hiển thị khi người dùng nhấp vào biểu tượng của extension. File này sẽ chứa một nút để người dùng nhấp vào để xem ảnh random.

Tạo một file mới trong thư mục của bạn và dán nội dung sau vào file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Xem ảnh random</title>
</head>
<body>
  <h1>Xem ảnh random</h1>
  <button id="random-image">Xem ảnh random</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="background.js"></script>
</html>

Tạo file background.js

File background.js sẽ chạy trong nền và sẽ được gọi khi người dùng nhấp vào nút "Xem ảnh random". File này sẽ lấy một hình ảnh ngẫu nhiên từ một API và hiển thị hình ảnh đó trong popup.

Tạo một file mới trong thư mục của bạn và dán nội dung sau vào file:

// Lấy một hình ảnh ngẫu nhiên từ API
function getRandomImage() {
  // Sử dụng API của Unsplash để lấy một hình ảnh ngẫu nhiên
  const response = await fetch("https://api.unsplash.com/photos/random");
  const data = await response.json();

  // Trả về hình ảnh
  return data.urls.regular;
}

// Handler cho sự kiện click của nút "Xem ảnh random"
$(document).on("click", "#random-image", async function() {
  // Lấy một hình ảnh ngẫu nhiên
  const imageUrl = await getRandomImage();

  // Hiển thị hình ảnh trong popup
  $("#image").attr("src", imageUrl);
});

Cài đặt extension

Để cài đặt extension, bạn cần bật chế độ developer trong Chrome.

Mở Chrome và truy cập vào trang chrome://extensions.
Nhấp vào nút Trình phát triển.
Nhấp vào nút Tải unpacked.
Chọn thư mục chứa extension của bạn.

Extension của bạn sẽ được cài đặt và hiển thị trong danh sách các extension.

Kiểm tra extension

Để kiểm tra extension, bạn có thể mở một trang web bất kỳ. Nhấp vào biểu tượng của extension để xem ảnh random.

Thêm tính năng cho extension

Bạn có thể thêm các tính năng cho extension của mình, chẳng hạn như:

Cho phép người dùng chọn nguồn ảnh
Cho phép người dùng lọc ảnh theo chủ đề
Cho phép người dùng lưu ảnh

Tạo extension xem ảnh random cho Chrome

Tạo extension xem ảnh random cho Chrome

Phan Thành Công