Table of Contents

Snippet Chrome Extension.

Snippet Singkat untuk membuat Chrome Extension

Last updated: 3 weeks ago

🚀 Chrome Extension Snippets (Manifest V3)

📂 Struktur Folder

my-extension/
 ├── manifest.json
 ├── background.js
 ├── content.js
 ├── popup.html
 ├── popup.js
 └── icons/

1. manifest.json

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "Contoh Chrome Extension Snippet",
  "permissions": ["storage", "tabs", "scripting"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. background.js

chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed!");
});

// contoh: buka tab baru dari background
chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: "https://google.com" });
});

3. content.js

// ini jalan di dalam halaman web
console.log("Content script loaded!");

// contoh ubah background halaman
document.body.style.backgroundColor = "lightyellow";

4. popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Popup</title>
    <style>
      body {
        font-family: sans-serif;
        width: 200px;
        padding: 10px;
      }
      button {
        padding: 6px 12px;
        margin-top: 8px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <h3>My Extension</h3>
    <button id="btn">Say Hello</button>
    <script src="popup.js"></script>
  </body>
</html>

5. popup.js

document.getElementById("btn").addEventListener("click", () => {
  alert("Hello from Chrome Extension!");
});