addSidebarContentPanel unable to add html

[Will Bewley]

Hey, I've been following the sidebar example as well as trying to unpick the Stripe example but still cannot find a way to inject an html page into the sidebar.

I'm attempting to build a Chrome Extension that adds a sidebar widget (ie, sidebar.html) in ThreadView that shows when people with my @example domain are the sender with some useful information. Eventually I hope to be able to get API info to show in the sidebar.

Using the sidebar content.js :

InboxSDK.load(1, 'sidebar-example').then(function(sdk) {


 sdk.Conversations.registerThreadViewHandler(function(threadView){


 var el = document.createElement("div");
 el.innerHTML = 'Hello world!';




 threadView.addSidebarContentPanel({
 title: 'Sidebar Example',
 el: el
 });


 });


});

I've tried with examples such as:

using jQuery:

$('#el').get(chrome.runtime.getURL('sidebar.html')); or

$get(chrome.runtime.getURL('sidebar.html'), null, null);

I have also tried to inject into the innerHTML element or .load without success.

How do you suggest I proceed?

Thanks! 

[Omar Ismail]

Hi Will, can you send the exact code that you're trying out? Is the difference between the example content.js, and your code that you're trying to load through ajax?

ᐧ

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/7fbcd541-8a85-4f00-9934-ccbbb8a82702%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Will Bewley]

Hey Omar

I'm looking for a way to call an external html page into the content script so that my widget can show in the sidebar and happy to try any way, ajax or otherwise. I haven't got a completed script yet because I've tried a bunch of ways to no avail.

Unfortunately the sidebar example only shows a way to add plain text through el.innerHTML which I assume you can't use to add an external html page in?

Once I've managed to get an external page to load in then I plan to use js to pull email details and return API data into the loaded html file, similar to the Stripe example.

Hope this makes sense- and thanks so much!

[Omar Ismail]

can you send over the code you have written? it's fine that the script is not complete.

ᐧ

Omar

To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/4028ebd9-c51c-423f-bd68-cb4a65a287ca%40googlegroups.com.

[Will Bewley]

Omar

Here's the basic outline, thanks!

//manifest.json
{
  "name": "Sidebar extension",
  "description": "ThreadView sidebar",
  "version": "0.1",
  "content_scripts": [
    {
      "matches": [
        "https://mail.google.com/*",
        "https://inbox.google.com/*"
      ],
      "js": ["jquery.min.js","inboxsdk.js","content.js"],
      "css": ["styles.css"],
      "run_at": "document_end"
    }
  ],
  "permissions": [
    "https://mail.google.com/",
    "https://inbox.google.com/"
  ],
    "web_accessible_resources": [
    "sidebar.html"
  ],
  "manifest_version": 2
}

//content.js
InboxSDK.load(1, 'myappid').then(function(sdk) {

 sdk.Conversations.registerThreadViewHandler(function(ThreadView){
 addSidebar(ThreadView);
 });
});

function addSidebar(ThreadView) {

 var el = document.createElement("div");

 $('#el').get(chrome.runtime.getURL('sidebar.html')); //attempted different ways to insert sidebar.html, this is 1 of them

 ThreadView.addSidebarContentPanel({
      title: 'App Title',
      iconUrl: 'icon.png',
      el: el
 })
 };
...

//sidebar.html
<div class="class1">
 <div class="name">contact.Name</div>
<div>some text</div>
</div>
...

It'll be great to hear what I'm missing, it's been driving me crazy - this version of content.js shows no issues in Console.

Thanks!

[Omar Ismail]

Hi Will, I think you shouldn't rely on jQuery for the ajax call. I tried it using Chrome's built in fetch api and it worked fine.

fetch(chrome.extension.getURL("helloworld.html"))

.then(function(response){

return response.text();

})

.then(function(text){

var el = document.createElement('div');

el.innerHTML = text;

threadView.addSidebarContentPanel({

title: 'Hi',

iconUrl: chrome.runtime.getURL('monkey-face.jpg'),

el: el

});

});

ᐧ

Omar

To view this discussion on the web visit https://groups.google.com/d/msgid/inboxsdk/d4b76f6f-322a-4e19-a6e4-0e02055d8e30%40googlegroups.com.

[Will Bewley]

Great- thanks a lot Omar, that works well!

[Anirban Haldar]

But how to reduce the side bar and the color and other style and html,'

how?????

I have the sidebar. i couldn't add html and css