Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how I can change default icon in chrome extension?

Tags:

Here I am working with chrome extension development.

my manifest.json page as show

{ "name": "DemoExtension",   "version": "1.0",   "description": "Official addon from demeo",   "browser_action": {     "default_icon": "star-on.png",     "popup": "shopcmp.htm"     },   "permissions": [     "tabs"       ],   "background_page": "background.html"    } 

Here I want to change my default icon image at runtime.

like image 854
Yashwant Kumar Sahu Avatar asked Aug 04 '11 10:08

Yashwant Kumar Sahu


People also ask

What is manifest icon?

One or more icons that represent the extension, app, or theme.

What is the extension icon?

An ICON file contains image data for a computer icon used to represent files, folders, applications, and so on. ICON files are typically saved as small, square bitmap images, ranging from 16 x 16 to 256 x 256 pixels in size. Most Windows Icon files use the . ICO extension.

What is browser action icon?

A browser action is a button that your extension adds to the browser's toolbar. The button has an icon, and may optionally have a popup whose content is specified using HTML, CSS, and JavaScript.


2 Answers

If you want to change the browser action default icon, just change

"browser_action": {   "default_icon": "star-on.png", //<--this line: change "star-on.png" to the icon you want   "popup": "shopcmp.htm"   }, 

That line indicates the default icon on first load of the extension.
To change the icon in code, call chrome.browserAction.setIcon(details).

If you want to change the extension icon (the icons that shows during installation, in the Chrome Web Store, in the extension management page, and as a favicon), add an icons property to your manifest.json file.

like image 183
Digital Plane Avatar answered Oct 24 '22 22:10

Digital Plane


To change the default chrome extension pragmatically you can do:

chrome.browserAction.setIcon({ path: "my-icon.png" }); 

or for custom sizes:

chrome.browserAction.setIcon({   path: {     19: "my-icon19.png"   } }); 

Full docs: https://developer.chrome.com/docs/extensions/reference/browserAction/#method-setIcon

like image 29
Nathan Bertram Avatar answered Oct 24 '22 23:10

Nathan Bertram