18 Understanding Chrome Extensions Management
3 min read4 days ago
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 name, description version, permissions, icons 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.json, popup.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;
}
}
}