Menu
I want to allow the user to select the icon that appears for their extension from a list. Is there a way to edit the manifest from within the extension?
So If I have the following in my chrome extension manifest file:
"browser_action": {
"default_icon": "ico32.gif",
}
And I want to give the user the ability to change it to the following from within the extension itself:
"browser_action": {
"default_icon": "ico32green.gif",
}
Is there a way to do that?
682
Chrome allows you to add as many extensions as you want. That being said, sometimes it can be difficult to find the page where you can change Chrome extension settings. From the Chrome extension settings page, you can perform functions like removing current, deactivating or activating your current extensions.
You can also do it by right-clicking on the unopened file and clicking on the “Rename” option. Simply change the extension to whatever file format you want and your computer will do the conversion work for you.
. CRX files are like . ZIP files, just change the extension and right click > Extract Files and you are done. Once you have extracted files --> modify them and add to zip and change extension back to .
Goto Chrome Settings using three dots on the top right corner. Then Select Extensions. Click on Load Unpacked and select your Unzip folder. Note: You need to select the folder in which the manifest file exists.
There is no way to directly edit the manifest file. However, you can use the following work around to modify the property on browser load. This particular code sets the icon on browser load and allows the user to specify what icon should be set on browser load:
In manifest.json:
{
"browser_action": {
"default_icon": "ico32.gif",
},
"options_page": "options.html",
"background_page":"background.html"
}
In background_page:
<script>
var icon = localStorage["icon"];
if(icon == undefined){
icon = "ico32.gif";
localStorage["icon"] = icon;
}
chrome.browserAction.setIcon({"path":localStorage["icon"]});
</script>
In options page:
<html>
<body>
<h1>Choose you color:</h1>
<p>
<img class="color" src="ico48.gif" />
<img class="color" src="icoGreen.gif" />
<img class="color" src="icoPurple.gif" />
<img class="color" src="icoRed.gif" />
</p>
<script>
var colors = document.getElementsByClassName("color");
for(var i=0,ii=colors.length;i<ii;i++){
colors[i].addEventListener("click", changeColor);
}
function changeColor(e){
localStorage["icon"] = e.target.src;
chrome.browserAction.setIcon({"path":localStorage["icon"]});
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With