Chrome extension using Ionic Framework

ionic-v1
1

Hi,

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,
good

After installing the chrome extension,
bad

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?

Thanks
Sreekanth

2

Fixed.

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.

3

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?

Greetings

4

Hope this helps…
https://developer.chrome.com/extensions/contentSecurityPolicy