Google Picker in Chrome Extension

[Gerry E]

Hi 

we're building a chrome Extension using inbox sdk to add a button to gmail. The button opens a Google Picker window for the user to select a folder from his Drive. after closing the picker window, you're not able to open Mails with any attachment (file, calendar event, ...).

In the console we get this error (see attachment). I've been using pretty much this code for the google picker https://developers.google.com/picker/docs/#hiworld. authentication is made via chrome.identity.getauthtoken and not with gapi.load('auth',.... This is the only major difference. I've had the link ("https://apis.google.com/js/api.js?onload=onApiLoad") integrated as a web-accesible-ressource, copy pasted it into a js file that I injected into the page and I left it, so the picker would use the api.js file in gmail.

Does someone have an idea, why this is happening and how to solve it?  If you need any code/further information, let me know.

cheers

Gerry

[Chris Cowan]

Google's API libraries generally function by injecting a <script> tag will run in the page context instead of the extension's isolated world. Code running in the page context can cause conflicts with Gmail itself (and other extensions doing the same thing) so we don't recommend this. Gmail itself uses certain Google API libraries, and re-loading and re-configuring one in the page context can mess up Gmail. I believe the easiest thing for you to do would be to create an iframe that uses the Google API libraries and inject that into the page. You should have the iframe's html be contained within the extension (listed within the web_accessible_resources section of the manifest.json) rather than be a remote URL so that it can't be blocked by any Content-Security-Policy headers included with Gmail.

[Gerry E]

Hi Chris,

thanks a lot for your help.

I tried putting it all in an Iframe, but I get follow up errors. Here's what I did:

in my content page I inject an iframe like this

var j = document.createElement('iframe');
j.setAttribute('id', 'pickerFrame');
j.src = chrome.extension.getURL('picker.html');
(document.head || document.documentElement).appendChild(j);

I copied the content from the api script (https://apis.google.com/js/api.js?onload=onApiLoad) into a js file (gapi.js) and added this for onload=onApiLoad:

window.onload = function () {
    onApiLoad();
}

I've got both picker.html and my gapi.js in the manifest within the web_accessible_resources. Just to check if this is allright.

trying to get the picker gives me these 4 errors

Do you have an idea what to do next? How do I solve this?

[Omar Ismail]

Why are you copying the content from Google's API scirpt and not just using their script directly in the iframe? The HTML in your iframe should have a script tag that hits the jsapi. We use the picker in the Streak extension and it basically comes to:

iframe with 2 script tags.

<script src="https://www.google.com/jsapi"></script>

<script src="https://www.streak.com/drivePicker.js"></div>

and in drivePicker.js the basic logic is

google.setOnLoadCallback(createPicker);

google.load('picker', '1');

function createPicker() {

   var picker = new google.picker.PickerBuilder()

                   .setDeveloperKey("blah")

                   .setOAuthToken(oauth2AccessToken)

                   .setCallback(pickerCallback)

                   .build();

   picker.setVisible(true);

}

ᐧ

--
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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/deeeb209-eb98-4242-9e6c-f426ddd9d7fd%40googlegroups.com.

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

[Gerry E]

Hi Omar, 

thanks a lot for your response. I'm getting  two new errors: 

aswell as the 1st error message from above

if I set the Attribute to

j.setAttribute('sandbox', 'allow-same-origin');

I get an error about the lack of allow-scripts flag 

if I add the allow-scripts flag

j.setAttribute('sandbox', 'allow-same-origin allow-scripts');

I get the two error messages from above again.

I did not even set the sandbox attribute until I got the error. Is this something that chrome extensions do automatically?

cheers Gerry

To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+u...@googlegroups.com.

[Omar Ismail]

can you put your code in github so I can see what you're doing?

ᐧ

To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/f12a04aa-6b1c-4077-a250-69bc1eea539c%40googlegroups.com.

[Gerry E]

https://github.com/IxGerryxI/picker-in-chrome-extension

I simplified the code a bit so its easier to find your way round

[Gerry E]

Does noone have an idea?

--

hello Gerry E from test ge...@dev.sotec.eu FORALLUSERS

[Omar Ismail]

hi Gerry, one fundamental problem you're making is that you're injecting main.js into the main Gmail context. You need to run your main.js in the content script context.

The SDK has a convenience function to handle this. in inboxsdk.com/docs look at the "Structuring Your App" section and specifically the "remote loading your app".

ᐧ

To unsubscribe from this group and stop receiving emails from it, send an email to inboxsdk+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/CAJ5o91Z-oTQmUetbv1LZPx3%2B50y5Zz9gTKzTHKKtEXctktacKQ%40mail.gmail.com.

[Gerry E]

​Hi Omar,

thanks for your help. You're being incredibly helpful. I'm not sure if you got my last mail, since it doesn't show up in this thread.

I kicked out a bunch of functions and pages, so it basically comes to this:  https://github.com/IxGerryxI/picker-in-chrome-extension/tree/master/simple

I still cant get it to run though. here's what I do:

in my content sheet (content.js): create an iframe with picker.html as src and append that to the dom (of Gmail).

picker.html consists of these two lines in the body:

 <script src="https://www.google.com/jsapi"></script>

<script src="https://myserver.com/picker.js"></script>

in picker.js I call    google.load('picker', '1');   --> no callback because I want the picker to show when the user clicks the button.

I then use InboxSDK.loadScript (in content.js)  to load the sdk.js containing the button I want the user to see in Gmail. 

the button has an onlick function that posts a message to my background.js requesting an authToken. 

background.js now creates a token and posts that back to content.js where I send a msg to the iframe containing the picker.

the message is recieved in picker.js and createPicker gets called and now I get these errors:

Just to get the basics right: is this the right approach? there must be mistake somewhere..

Also I'm not sure what you meant with "run your main.js in the content script context" cause it doesnt have anything to do with the picker? 

I'd be glad if you could have a look at this

thanks Gerry

[Matthias Feurer]

Hi,

I am a colleague of Gerry and we are still struggling with the InboxSDK enabled extension.

We have injected an IFrame into Gmail UI and in this IFrame we are loading the gapi, which works fine until we actually try to build the Drive picker. When we call

var picker = new gapi.picker.PickerBuilder()

         .setDeveloperKey(developerKey)

         .setOAuthToken(oauthToken)

         .setCallback(pickerCallback)

         .build();

we get a lot of security errors, so we don't know if this is really the right way of doing that. 

We tried loading the scripts in content.js using InboxSDK.loadScript() functions, but that did not work either, we got the error that gapi.loaded0 was not defined.

Also in background page of the app we did not manage to load the picker due to security constraints.

Any help would be appreciated.

Thanks a lot!

Cheers

Matthias

[Omar Ismail]

Looking at the github repo, why do you use sandbox for the iframe html? We don't use that for the Streak extension. Try taking it out.

Also, sorry I should have mentioned this earlier. We don't load the drive picker into the HTML of the iframe created by the extension directly. Instead what we do in Streak is create an iframe that loads a page on streak's servers. And then on that page that is loaded on Streak server's we load the gapi script.

Essentially for your repo, change line 13 on content.js to

j.src = 'some remote url hosting picker.html';

and then I think everything should work.

ᐧ

Besuchen Sie unseren Chrome Webshop unter shop.cloudwuerdig.com

www.sotec.eu | www.cloudwuerdig.com 
-- 
SOTEC Software Entwicklungs GmbH + Co Mikrocomputertechnik KG 
Calwer Straße 11, D-75395 Ostelsheim 
Sitz Ostelsheim, Amtsgericht Stuttgart HRA 330821/HRB 330664, Geschäftsführer: Florian Holz 
Cloudwürdig® ist eine eingetragene Marke der SOTEC Software Entwicklungs GmbH + Co Mikrocomputertechnik KG

Der Inhalt dieser e-Mail ist ausschließlich für den bezeichneten Adressaten bestimmt. Wenn Sie nicht der vorgesehene Adressat dieser e-Mail oder dessen Vertreter sein sollten, so beachten Sie bitte, dass jede Form der Kenntnisnahme, Veröffentlichung, Vervielfältigung oder Weitergabe des Inhalts dieser e-Mail unzulässig ist. Wir bitten Sie, sich in diesem Fall mit dem Absender der e-Mail in Verbindung zu setzen.

The content of this e-mail is meant exclusively for the person to whom it is addressed. If you are not the person to whom this e-mail is addressed or his/her representative, please be informed, that any form of knowledge, publication, duplication or distribution of the content of this e-mail is inadmissible. We ask you, therefore, in such a case to please contact the sender of this e-mail.

--
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+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/729dbccc-1974-4e7d-bbbd-969fea54d467%40googlegroups.com.

[Gerry E]

Thanks a lot for your help we finally got it running. Have a great week everyone.