chrome扩展，jstree，iframe：拖放 [英] chrome extension, jstree, iframe: drag and drop
问题描述
我是新的chrome扩展开发，我正在建立一个需要一个侧面板（不是弹出窗口），像firebug，但在右边。
我在侧面板中使用jsTree（带有json_data），并且我要将元素从网页拖动到侧面板。
I'm new to chrome extensions development and I'm building one that requires a side panel (not the popup), like firebug but on the right side. I'm using jsTree (with json_data) in the side panel and I want to drag elements from the webpage to the side panel.
到目前为止，创建侧面板，我使用一个附加到主体的div和一个z-index，以便它出现在网页上面，但是我的侧面板中的元素样式因为网站的CSS而改变。
So far, to create the side panel, I've used a div appended to the body with a z-index so that it appears above the webpage, but the elements' styles in my side panel are altered because of the website's css.
所以我想我可以使用一个iframe，以避免任何css不兼容在我的侧面板。
我使用src =chrome-extension：///page.html动态创建iframe。
So I thought I could use an iframe to avoid any css incompatibility within my side panel. I create the iframe dynamically, with a src="chrome-extension:///page.html".
我设法使我的jstree在我的iframe通过直接在iframe的源页面加载jquery + jstree脚本...这很糟糕，但我不能得到内容脚本用于iframe的源页面（尽管all_frames：true）。
I've managed to make my jstree work fine in my iframe by loading the jquery+jstree scripts directly in the iframe's source page... that's pretty bad but I can't get the content script to be used for the iframe's source page (despite "all_frames": true).
我想将元素从网站的页面拖动到iframe中的jstree ...
我找到了iframeFix：true和refreshPositions：true ，但是这似乎没有改变任何东西...
任何人都知道如何这样做？
I'd like to drag elements from the website's page into jstree in the iframe... I've found the iframeFix: true and refreshPositions: true, but that doesn't seem to change anything... Anyone knows how to do that?
如果我不使用iframe，根据在web上的多个例子，我可以很容易地使用dnd插件删除一个元素到jstree。
我没有尝试过;即使它工作，我的侧面板中的CSS将被改变，我不能让这种情况发生。
If I don't use an iframe, according to the multiple examples on the web, I can easily drop an element to the jstree using the dnd plugin. I haven't tried it; even if it worked, the css in my side panel will be altered and I can't let that happen.
我已经看到div层上面的iframe技术。我可以从iframe上的div上的网页中成功删除一个元素。
但是，当我尝试通过端口发送一个消息（包含丢弃的元素的数据）到iframe iframe没有收到消息。
在这种情况下，我的想法是以某种方式将消息添加到jstree的json数据。
I've seen the "div layer above the iframe" technique. I can successfully drop an element from the webpage on that div above the iframe. But, when I try to post a message (containing the dropped elements' data) to the iframe through a port the iframe doesn't receive the message. My idea in this case is to somehow add the message to the json data of jstree.
我已经阅读所有关于content_scripts的帖子和iframe，我知道错误...我不知道它是否是固定的，如果是，我不知道如何使ifram和内容脚本之间的端口通信工作。
任何人都知道更多这些？
I've read all the posts I've found about content_scripts and iframe, I know about the bugs... I can't figure out if it's fixed or not, and if it is, I don't know how to make the port communication between the ifram and the content script work. Anyone knows more about that?
我还应该补充说，当我尝试使用端口在内容脚本和iframe之间通信，并复制侦听器从后台页面中的iframe，后台页面接收消息只是... ...这意味着端口通信正常工作，我想，但不是内容脚本和iframe之间...
I should also add that when I try to communicate between the content script and the iframe using a port, and copy the listener from the iframe in the background page, the background page receives the message just fine... which just means that the port communication is working fine I suppose, but not between the content script and the iframe...
有什么想法吗？我真的很困惑
Any thoughts? I'm really stuck
推荐答案
回答我自己的问题;
我还没有找到一个解决方案如何使用iframe在带有jstree的chrome扩展。
answering my own question; I haven't found a solution on how to use iframes in a chrome-extension with jstree.
我只是为了硬核的方式;将< div> 附加到< body> ，并确保通过大量测试css里面的< div> 将保持与网页的CSS隔离。
I'm just going for the hardcore way; append a <div> to the <body>, and make sure by doing a lot of testing that the css inside my <div> will remain isolated from the webpage's css.
干杯
这篇关于chrome扩展，jstree，iframe：拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
