Chrome extension, jstree, iframe: drag and drop

I am new to chrome extensions development and I am building one that requires a sidebar (not a popup) like firebug, but on the right side. I am using jsTree (with json_data) in the sidebar, and I want to drag items from the web page to the sidebar.

So far, to create a sidebar, I have used a div added to the body with a z-index so that it appears above the web page, but the styles of the elements in my sidebar have changed due to the CSS website.

So, I thought I could use an iframe to avoid any css incompatibility in my sidebar. I am creating an iframe dynamically using src = "chrome-extension: ///page.html".

I managed to get my jstree to work in my iframe by loading jquery + jstree scripts directly to the iframe source page ... this is very bad, but I can't get the script content that will be used for the iframe source page (despite "all_frames": true )

I would like to drag items from the site page to jstree in an iframe ... I found iframeFix: true and refreshPositions: true, but that doesn't change anything ... Does anyone know how to do this?

If I do not use an iframe, according to several examples on the Internet, I can easily remove an element in jstree using the dnd plugin. I have not tried; even if this worked, the css in my sidebar would be changed, and I cannot allow this.

I saw the "div layer over iframe" method. I can successfully remove an element from a webpage on this div above the iframe. But, when I try to send a message (containing data of discarded elements) to the iframe via the port, the iframe does not receive the message. My idea in this case is to somehow add a message to jstree's json data.

I read all the messages that I found about content_scripts and iframes, I know about errors ... I can’t understand if this is fixed or not, and if so, then I don’t know how to make the port link between ifram and the content of the script. Does anyone know more about this?

I should also add that when I try to establish a connection between the script content and the iframe using the port and copy the listener from the iframe on the background page, the background page receives the message just fine ... which just means that the port connection is working fine, I suppose but not between the contents of the script and iframe ...

Any thoughts? I'm really stuck

+1
source share
1 answer

answering my question; I have not found a solution on how to use iframes in a chrome extension with jstree.

I'm just going to hardcore; add a <div> to the <body> and make sure to check that the css inside my <div> will remain isolated from the css webpage.

Greetings

0
source

All Articles