JSON formatter for the developer info

[TheWebTech]

I don't want to go and write my own JSON formatter, but it would be nice if built into the extension was a feature to auto prettify the developer info, as well as it would be great if on the child nodes you could do something to see the parents of the child nodes.

For example when you're working on a blog post if you add a hubl image tag and have it export_to_template_context you now need to figure out what the parents of that hubl tag are, is it wideget_data.imgfield.body.src or is it widgets.imgfield.body.src

Hopefully there's a script for this we can either incorporate in or even a system where we can send the json feed to an online service that will load in a new page which will format the json.

[TheWebTech]

If anyone knows a library for json formatting or anything that we could build into the plugin to handle this, that would be amazing.

I think this functionality would be a pretty killer feature to a lot of people.

[GonzaloTorreras]

I really like the idea about the parent stuff. Even a "copy snippet" would be great too. I have been using JSONView extension for Chrome but we can check some options and tweak them: Found this with a fast search: https://github.com/summerstyle/jsonTreeViewer I think it look better than the extension mentioned before, and we can tweak a bit to get working this feature.

[TheWebTech]

ooh I like your copy snippet idea.

And the json tree viewer you found is pretty slick. It looks like what we'd need to do is grab all of the text in the page (on the developer info url) and set it to a variable then var tree = jsonTree.create(jsonvar, div);

So looks like one thing we need to figure out is how to detect if you're currently viewing the developer Info. The only thing I can tell is that the URL always contains: /__context__/

And the URL will never start with app.hubspot.com.

[GonzaloTorreras]

I don't know if this is the best idea, but I just realised that the JSON is always wrapped with: <pre style="word-wrap: break-word; white-space: pre-wrap;"> so we can check for this element with that style and exec the JSON formater. But, as said, that will do a check for all the pages that we visit so not the most optimised...

Here is how I tested it: if(document.querySelector('body > pre')){ //probably the json structure //double check with the inline styles: var elem = document.querySelector('body > pre'); if( elem.style.cssText == "word-wrap: break-word; white-space: pre-wrap;"){ //it's our JSON lets run formater } }

[TheWebTech]

well we might be able to make the script be a content script that would only run if that context path was in the URL, so it wouldn't be trying it on every page.

[TheWebTech]

updating because Matt Coley shared some wisdom in slack and I don't want slack to delete it

Matt Coley [1:27 PM] You can request GET https://login.hubspot.com/login/api-verify?portalId={portalId} and then use the data.auth.access_token.token (edited)

Jon McLaren [1:28 PM] noting this and will definitely see if that will work

Matt Coley [1:28 PM] I put a breakpoint on that intermediate page and looked at the JS that does the redirect

Jon McLaren [1:29 PM] i had done that too, but I recall we weren’t able to get the token for some reason but we weren’t pinging the login url i dont think (edited)

Matt Coley [1:30 PM] Maybe CORS?

Jon McLaren [1:31 PM] Maybe, but if that were the case I should be able to get around that by requesting a permission for access to login.hubspot.com in the extension’s permissions.

That would solve the CORS issue(extensions have special rules when it comes to cross origin stuff) (edited)

Matt Coley [1:32 PM] :+1:

[TheWebTech]

Updating with some todo's - this feature is in devtools branch

What we need to do to finish this off.

• [x] make domain name and path dynamic

• [x] fix font-size(it's a bit huge)

• [x] See if it's possible to detect if user has tabs permission granted already to not even require button click. Will need to handle throwing error if page is not HS hosted.

• [x] Add warning banner across top stating the feature may stop working all-together May 23rd. That way people understand, if it just stops rendering anything.

Future Features:

• [ ] Need ability to find/search text chrome doesn't seem to really support it.

[TheWebTech]

HubSpot updated their implementation. It's now much easier for us to deal with and they say it's more secure on their end.

Change Implementation to ajax request the URL of the developer info. Voila done.

[TheWebTech]

@bradhavell Question for you, I've got the devtools developer info feature working again in branch devtools-restore

I was wondering if you knew of any ways to make it so we don't need the <all_urls> permission to do this.

Here's basically how the feature works right now. You click a button, chrome requests permission to "view and change everything everywhere". User accepts and then hsinspector.js gets injected into the inspected page. That file runs a small script to get the dev info url, and sends it back to the devtools pane.

The Dev tools pane makes an ajax call to that dev info url. Grabbing the JSON.

I want to eliminate the need for the all_urls permission because it sounds scary to users, also as a security precaution it's better to not use unnecessary powerful permissions like that.

It seems to me that inspected windows should have different permission requirements. Or atleast a way to do something similar to activeTab, where I can make 1 action against the page when user does a button click, or something. I've tried using the active tab id, I've tried inspected window ID, but that doesn't seem to work - might just be I'm doing it wrong, but I can't tell.

Any insight is appreciated.

[TheWebTech]

AJ Laporte found a way to make it so you can search the json https://markjs.io/ will take a little setup but should work.