Chrome extension using Ionic Framework


I built a sample chrome extension using Ionic framework, just to try out if it actually works or not. I understand Ionic framework is meant for mobile apps, but after seeing Ionic demos embedded in the webpage working perfectly fine, I thought I would give it a shot in chrome-extension.

After installing the chrome-extension, It renders the extension’s UI just fine (i believe platform is treated as ios). But, something changes that makes browser render normal webpages in mobile/tablet layout (as shown below), instead of desktop layout. The only thing that restores it back to normal is - by uninstalling the extension, it goes back to normal desktop layout.

Before Installing the chrome extension,

After installing the chrome extension,

Any ideas what might be happening? I would appreciate if someone could let me know a solution, that would let me use the chrome extension and also browser rendering pages normally at the same time?



My extension’s CSS was getting injected into browser’s pages. Nothing wrong with Ionic… Now, by using right CSS selector, i was able to fix it.

Hey mate,

I’ve tried to do the same as you, in my app I have a sidebar menu and it does not work. I think is by security of chrome browser in extensions. The content of the default template is displayed and work fine.

It display the following error

Refused to evaluate a string as JavaScript because ‘unsafe-eval’ is not an allowed source of script in the following Content Security Policy directive: “script-src ‘self’ chrome-extension-resource:”.

Do you know any config in manifest or other to avoid this security?


Hope this helps…