18 Understanding Chrome Extensions Management

The chrome.management API enable the extensions to retrieve details and manage other installed extensions on the client’s browser. Essentially, the chrome.management can enable, disable or uninstall other extensions in browser.

For more info you can see Google Chrome Documentation on it: https://developer.chrome.com/docs/extensions/reference/api/management

How to declare it in Manifest.json

{
...
"permissions": [
"management"
],
...
}

How to get other Extension Details

By running the chrome.management.get or chrome.management.getAll you can retrieve of one or all extensions respectively. Information such the namedescription versionpermissionsicons and more can be retrieved.

// https://developer.chrome.com/docs/extensions/reference/api/management#method-get
chrome.management.get("extensionID", (extension) => {
const id = extension.id;
const enabled = extension.enabled
const description = extension.description
const version = extension.version;
const name = extension.name;
});
// https://developer.chrome.com/docs/extensions/reference/api/management#method-getAll
chrome.management.getAll((extensionDetails) => {
for (const extension of extensionDetails) {
const id = extension.id;
const enabled = extension.enabled
const description = extension.description
const version = extension.version;
const name = extension.name;
}
});

Get details about your extensions

// https://developer.chrome.com/docs/extensions/reference/api/management#method-getSelf
chrome.management.getSelf((extension) => {
const id = extension.id;
const enabled = extension.enabled
const description = extension.description
const version = extension.version;
const name = extension.name;
});

How to Enable/Disable other Extensions

let enable = false; //disable
chrome.management.setEnabled('extensionID', enable, () => {
console.log('Extension Disabled');
});

How to Uninstall other Extensions

chrome.management.uninstall('extensionID', {showConfirmDialog:true }, () => {
console.log('Extension Uninstalled');
});

You can also uninstall your current extension

chrome.management.uninstallSelf({showConfirmDialog:true }, () => {
console.log('Your extensions Uninstalled');
});

Listening for Extensions events

You can run code when an 3rd party extension is installed, uninstalled, enabled or disabled by by adding a listener in your extension page code or background script.

chrome.management.onEnabled.addListener((extension) => {
console.log(extension);
// Your code
});

chrome.management.onDisabled.addListener((extension) => {
console.log(extension);
// Your code
});

chrome.management.onInstalled.addListener((extension) => {
console.log(extension);
// Your code
});

chrome.management.onUninstalled.addListener((id) => {
console.log(id);
// Your code
});

Sample Project

We are going to build a chrome extension that manages other chrome extensions. You can get access to the source code here: https://github.com/BuildChromeExtensions/chromeExtensionManager

We are going to need 3 files for this chrome extension project manifest.jsonpopup.html and popup.js

manifest.json

{
"name": "Extension Manager Super",
"version": "1.0.0.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
},
"permissions": [
"management"
]
}

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
width: 400px;
height: 200px;
padding: 10px 20px;

}

form {
display: flex;
flex-direction: column;
align-items: center;
}

input,
select {
padding: 4px 8px;
margin: 5px 0px;
width: 70%;
border-radius: 30px;
}

button {
background: #03c2fc;
color: #ffffff;
padding: 10px 20px;
border: none;
cursor: pointer;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
transition: all 0.4s;
border-radius: 30px;
font-weight: 700;
}

button:hover {
background: #026482;
}
</style>
</head>

<body>
<form>
<h1>Extensions</h1>
<select name="action" value="0">
<option value="enable">Enable</option>
<option value="disable">Disable</option>
<option value="uninstall">Uninstall</option>
</select>
<select id="extensions" name="extensionId" value="0">
</select>
<button>Perform Action</button>
</form>
<script type="text/javascript" src="./popup.js"></script>
</body>

</html>

popup.js

// https://developer.chrome.com/docs/extensions/reference/api/management#method-getAll
chrome.management.getAll((extensionDetails) => {
for (const extension of extensionDetails) {
const id = extension.id;
const enabled = extension.enabled
const description = extension.description
const version = extension.version;
const name = extension.name;
const option = document.createElement('option');
option.value = id;
option.title = description;
if (enabled) {
option.textContent = `✅ ${name} (${version})`;
} else {
option.textContent = `❌ ${name} (${version})`;
}

// add option to select in UI
const select = document.getElementById('extensions');
select.appendChild(option);
}
})

// https://developer.chrome.com/docs/extensions/reference/api/notifications#type-NotificationOptions
document.querySelector('form').onsubmit = async function (e) {
e.preventDefault();

// Get Form details
const action = e.target.action.value
const extensionId = e.target.extensionId.value;
const extension = await chrome.management.get(extensionId);

// User confirmation
const result = confirm(`Do you want to ${action} ${extension.name}?`);

// Perform Action
if (result) {
switch (action) {
case "enable":
chrome.management.setEnabled(extensionId, true);
alert(`Enabled ${extension.name}! Reopen the extension.`)
break;
case "disable":
chrome.management.setEnabled(extensionId, false);
alert(`Disabled ${extension.name}! Reopen the extension.`)
break;
case "uninstall":
chrome.management.uninstall(extensionId, { showConfirmDialog: true });
alert(`Uninstalled ${extension.name}! Reopen the extension.`)
break;
default:
break;
}

}
}

Chrome Extension

Manager

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts