GoogleChrome · An-Yay · Feb 23, 2024 · Feb 23, 2024 · Feb 26, 2024 · Feb 26, 2024
diff --git a/api-samples/management/README.md b/api-samples/management/README.md
@@ -0,0 +1,41 @@
+# chrome.management Extension
+
+The [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/api/management) API provides ways to manage the list of extensions/apps that are installed and running. It is particularly useful for extensions that [override](https://developer.chrome.com/extensions/develop/ui/override-chrome-pages) the built-in New Tab page.
+
+## Features
+
+![Screenshot](images/screenshot.png)
+
+- List all installed extensions.
+- Display extension icons, names, and versions.
+- Provide an "Uninstall" button for each extension.
+
+## Installation
+
+1. Clone or download this repository.
+2. Load the extension in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+
+## Usage
+
+1. Click on the extension icon to open the extension manager.
+2. The manager will list all installed extensions.
+3. Each extension entry includes its icon, name, and version.
+4. Click the "Uninstall" button next to an extension to remove it.
+
+## Code Overview
+
+### `popup.js`
+
+- Uses `chrome.management.getAll` to get a list of all installed extensions.
+- Creates a list item for each extension, including its icon, name, version, and an "Uninstall" button.
+- Sends a message to background script (`background.js`) to uninstall an extension when the "Uninstall" button is clicked.
+
+### `background.js`
+
+- Listens for messages from the popup.
+- Handles uninstallation requests by calling `chrome.management.uninstall` with the extension id.
+- Sends a response back to the popup after uninstalling the extension.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
diff --git a/api-samples/management/background.js b/api-samples/management/background.js
@@ -0,0 +1,18 @@
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action === 'uninstall') {
+    // Uninstall the extension with the given id
+    chrome.management.uninstall(message.id, (result) => {
+      if (chrome.runtime.lastError) {
+        // Handle error during uninstallation
+        sendResponse({
+          success: false,
+          error: chrome.runtime.lastError.message
+        });
+      } else {
+        // Show confirmation message when extension is successfully uninstalled
+        sendResponse({ success: true });
+      }
+    });
+  }
+  return true; // Keep the message channel open for sendResponse
+});
diff --git a/api-samples/management/images/sample.png b/api-samples/management/images/sample.png
diff --git a/api-samples/management/images/screenshot.png b/api-samples/management/images/screenshot.png
diff --git a/api-samples/management/manifest.json b/api-samples/management/manifest.json
@@ -0,0 +1,17 @@
+{
+  "manifest_version": 3,
+  "name": "Extension Manager",
+  "version": "1.0",
+  "permissions": ["management"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "action": {
+    "default_popup": "popup.html",
+    "default_icon": {
+      "16": "images/sample.png",
+      "48": "images/sample.png",
+      "128": "images/sample.png"
+    }
+  }
+}
diff --git a/api-samples/management/popup.html b/api-samples/management/popup.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Extension Manager</title>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <script src="popup.js"></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <ul id="extensionList"></ul>
+    </div>
+  </body>
+</html>
diff --git a/api-samples/management/popup.js b/api-samples/management/popup.js
@@ -0,0 +1,43 @@
+chrome.management.getAll((extensions) => {
+  const extensionList = document.getElementById('extensionList');
+
+  extensions.forEach((extension) => {
+    // Create list item for each extension
+    const li = document.createElement('li');
+
+    // Create and set icon for the extension
+    const icon = document.createElement('img');
+    icon.src = extension.icons ? extension.icons[0].url : 'images/sample.png'; // Use default icon if not available
+    icon.width = 24;
+    icon.height = 24;
+    li.appendChild(icon);
+
+    // Create and set name of the extension
+    const name = document.createElement('span');
+    name.textContent = extension.name;
+    li.appendChild(name);
+
+    // Create and set version of the extension
+    const version = document.createElement('span');
+    version.textContent = ` (v${extension.version})`;
+    li.appendChild(version);
+
+    // Create and set uninstall button for the extension
+    const button = document.createElement('button');
+    button.textContent = 'Uninstall';
+    button.addEventListener('click', () => {
+      // Send message to background script to uninstall extension
+      chrome.runtime.sendMessage(
+        { action: 'uninstall', id: extension.id },
+        () => {
+          // Remove the extension from the list after uninstalling
+          li.remove();
+        }
+      );
+    });
+    li.appendChild(button);
+
+    // Append the list item to the extension list
+    extensionList.appendChild(li);
+  });
+});
diff --git a/api-samples/management/style.css b/api-samples/management/style.css
@@ -0,0 +1,54 @@
+body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      min-width: 300px;
+      /* Set a minimum width for the popup */
+      background-color: #b4bdef;
+      /* Set background color for the entire body */
+}
+
+.container {
+      padding: 16px;
+      max-height: 400px;
+      /* Limit the maximum height of the popup */
+      overflow-y: auto;
+      /* Enable vertical scrolling if needed */
+}
+
+ul {
+      list-style-type: none;
+      padding: 0;
+      margin: 0;
+}
+
+li {
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      border-bottom: 1px solid #ddd;
+}
+
+img {
+      margin-right: 8px;
+      width: 24px;
+      height: 24px;
+      object-fit: cover;
+      border-radius: 4px;
+}
+
+button {
+      margin-left: auto;
+      margin-right: 10px;
+
+      padding: 4px 8px;
+      background-color: #f44336;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+}
+
+button:hover {
+      background-color: #d32f2f;
+}