Inserting HTML into modal

[Maximilian Paju]

Hi guys,

I'm trying to put some HTML into a ModalView, but I'm having problem doing it in a nice fashion. At the moment I've created an HTML file in my extension and by reading it with jQuery.parseHTML I'm able to insert the node into my modal view, as such:

$.get(chrome.extension.getURL('content/html/popup.html'), {}, function(data, status, xhr) {

        

        var dom = $.parseHTML(data);

        

        var options = {

            el: dom[0],

            chrome: true,

            title: "My modal",

            buttons: []

        };

        

        // the SDK has been loaded, now do something with it!

        sdk.Compose.registerComposeViewHandler(function (composeView) {

            

            // a compose view has come into existence, do something with it!

            composeView.addButton({

                title: "Button",

                iconUrl: chrome.runtime.getURL('content/images/icon.png'),

                onClick: function (event) {

                    sdk.Widgets.showModalView(options);

                }

            });

        });

    });

Is anyone familiar enough with modals to give me some pointers on how to approach this in a better way?

I also want to do some CSS on this stuff, but don't really understand how to do that either, so any help there would be appreciated aswell.

Thanks!
/Max

[Maximilian Paju]

To clarify that last part: I wish to add classes to my HTML elements from a CSS file in my extension, but I'm not sure how to do that.

[Omar Ismail]

Hi Maximillian, you can set your own css styles by adding the CSS file to the page. You can do that thusly:

var cssFile = chrome.extension.getURL('path/to/css');

var css = $('<link rel="stylesheet" type="text/css">');

css.attr('href', cssFile);

$('head').first().append(css);

a couple of things to keep in mind:

1. you need to make the css file "web accessible" in your manifest.json file [https://developer.chrome.com/extensions/manifest/web_accessible_resources]

2. CSS files are global, so please please please don't use generic class names like 'first', 'last', etc. Our recommendation is that you prepend your class names with a short form of your app name i.e. we do "streak__"

ᐧ

Omar

--
You received this message because you are subscribed to the Google Groups "InboxSDK" group.
To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/222a332f-b8d5-4d41-9299-b60123ccc436%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.