0

I'm doing an extension to getting the selected text from websites and drop it into my frame that i open with pop-up button, I'm encountering challenges when i want to get my DropZone from frame.html that already injected into a frame.

Manifest.json looks like this:

"content_scripts": [{
"js": ["jquery-3.5.1.min.js", "contentscript.js"],
"matches": ["*://*/*","<all_urls>", "http://*/*","https://*/*","ftp://*/*","file://*/*"],
"all_frames": true
}],
"web_accessible_resources": [
    "frame.html"
],
"background": {
    "scripts": ["jquery-3.5.1.min.js","background.js"]
},
"browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
   },
"permissions": [
    "tabs", "<all_urls>","activeTab"
],

ContentScript.js looks like this:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    if( request.todo == "showFrame"){
        var iframe = document.createElement('iframe');
        // Declared at web_accessible_resources in manifest.json
        iframe.src = chrome.runtime.getURL('frame.html');
        // Some styles for sidebar
        iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
                               'width:300px;height:100%;z-index:1000;';
        document.body.appendChild(iframe);
    }
}); 
//DnD
window.addEventListener('mouseup', wordSelected);
//Get selected text
function wordSelected(){
    let selectedText = window.getSelection().toString();
    if(selectedText.length > 0){
        var draggable = document.createElement('div')
        draggable.setAttribute('id', 'ghost');
        draggable.setAttribute('draggable', 'true');
        draggable.innerHTML += selectedText;
        console.log(draggable);
        var message = {
            text: selectedText
        }
        chrome.runtime.sendMessage(message);
    };
}
//triying to get iframe.html no way
chrome.runtime.sendMessage({cmd: "read_file"}, function(html){
    myDiv = $("#dropTarget").html(html);
    console.log(typeof html)
});

I'm getting: enter image description here Background.js looks like this:

console.log("Bg Running");
chrome.runtime.onMessage.addListener(receiver);
//receive selected text
function receiver(request, sender, sendResponse){
    console.log(request)
}
//listen request 
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "read_file") {
        $.ajax({
            url: chrome.extension.getURL("frame.html"),
            dataType: "html",
            success: sendResponse
        });
       return true;
    }
})

I think it's likely there is something I'm not understanding about getting to the frame DOM

Thanks in advance for any feedback or assistance.

Amine Zel
  • 391
  • 3
  • 15
  • 1
    There's no need to read frame.html via $.ajax and add its html, doing this is definitely wrong because the frame contains scripts which can't run in page context of `myDiv`. I vaguely remember that to drop onto an iframe you'll have to add a transparent div in the main page that overlaps the iframe, and this div should have a listener to receive the `drop` event (if you use HTML5 drag'n'drop events) or `mouseup`. – wOxxOm May 26 '20 at 05:21
  • Yes it is definitely wrong, thank you for your feedback @wOxxOm you helped me to adjust my logic. **BUT** the problem is i can't access DOM , [https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe?rq=1] ,of the frame(my dropzone) I have to do it through "background script"? – Amine Zel May 28 '20 at 00:46
  • You can't access the iframe's DOM from a cross-origin page so your content script can't do it as it runs in a web page but the iframe is a chrome-extension:// page. Normally there's no need to access iframe's DOM because the iframe is a normal page where you can load normal js files and do anything with its DOM in a standard fashion. To pass data you can use messaging. Strictly speaking the background script can access iframe's DOM via chome.extension.getViews() but it's really wrong. – wOxxOm May 28 '20 at 06:33

0 Answers0