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?
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>