Tutorial Cara Mengganti Background Chrome Otomatis

Ingin background Chrome berubah otomatis sesuai waktu atau tema? Ikuti Tutorial Cara Mengganti Background Chrome Otomatis untuk mengatur ekstensi sederhana yang mengubah tampilan New Tab.

Ringkasan Panduan

Setelah selesai, Anda dapat menginstal ekstensi Chrome yang mengganti gambar latar New Tab setiap jam atau hari. Panduan ini cocok untuk pengguna Windows 10/11 atau macOS 12 ke atas yang familiar dengan file teks. Memanfaatkan manifest v3, background script, dan CSS untuk mengatur gambar.

Anda akan belajar membuat folder proyek, menulis manifest.json, menulis skrip JavaScript yang memuat gambar berdasarkan waktu, serta mengaktifkan ekstensi melalui chrome://extensions.

Sebelum Memulai

• Google Chrome versi 108 ke atas
• Komputer dengan Windows 10/11 atau macOS 12
• Editor teks (misalnya VS Code)
• Gambar latar (format JPG/PNG) disimpan di folder images

Tutorial Cara Mengganti Background Chrome Otomatis

Langkah 1: Siapkan Struktur Folder

Buat folder chrome-bg-auto. Di dalamnya buat subfolder images untuk menyimpan gambar, dan file manifest.json, background.js, serta styles.css.

Langkah 2: Tulis manifest.json

{
  "name": "Auto Background Chrome",
  "version": "1.0",
  "manifest_version": 3,
  "description": "Ganti latar New Tab otomatis",
  "permissions": ["storage", "activeTab"],
  "chrome_url_overrides": {
    "newtab": "newtab.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}

Manifest mendefinisikan ekstensi, mengizinkan akses penyimpanan, dan mengganti halaman New Tab dengan file newtab.html yang akan dibuat.

Langkah 3: Buat newtab.html dan styles.css

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div id="bg"></div>
</body>
</html>

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

Div #bg menampung gambar latar yang akan diubah oleh skrip.

Langkah 4: Tambahkan background.js

function setBackground() {
  const hour = new Date().getHours();
  let img = 'images/default.jpg';
  if (hour >= 6 && hour < 12) img = 'images/morning.jpg';
  else if (hour >= 12 && hour < 18) img = 'images/afternoon.jpg';
  else if (hour >= 18 && hour < 21) img = 'images/evening.jpg';
  else img = 'images/night.jpg';
  document.getElementById('bg').style.backgroundImage = `url(${img})`;
}
chrome.runtime.onInstalled.addListener(setBackground);
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (tab.url && tab.url.startsWith('chrome://newtab')) {
    chrome.scripting.executeScript({
      target: {tabId},
      func: setBackground
    });
  }
});

Skrip menentukan gambar berdasarkan jam, lalu menyuntikkan gaya ke halaman New Tab.

Langkah 5: Aktifkan Ekstensi

Buka chrome://extensions, aktifkan mode Pengembang, klik “Muat tanpa paket”, pilih folder chrome-bg-auto. Lihat perubahan saat membuka tab baru.

Tips dan Kesalahan Umum

• Pastikan nama file gambar cocok dengan yang disebut di skrip.
• Gunakan format JPG atau PNG, ukuran tidak lebih dari 2 MB untuk performa.
• Jika gambar tidak muncul, periksa konsol JavaScript untuk error path.
• Jangan lupa menyimpan manifest.json dengan koma yang tepat.
• Reload ekstensi setelah mengubah kode.