Сделать всплывающее окно расширения chrome в iframe перетаскиваемым?

Question

Я хочу, чтобы мое расширение открывалось в форме iframe вместо обычного всплывающего окна. Я смог достичь этого до сих пор. Сейчас я пытаюсь сделать этот iframe перетаскиваемым с помощью jQuery пользовательского интерфейса, но не могу этого сделать. Мой код для инъекции. js как показано ниже:

function toggleVisisbility (node) {
node.style.display = (node.style.display === 'none' || node.style.display === '') ? 'block' : 'none'
}

function appendIframe(app) {
var iframe = document.createElement('iframe');
iframe.id = 'popup-app';
iframe.style.cssText = 'position:absolute;top:0;right:0;display:block;' +
    'width:350px;height:500px;z-index:99999999;' +
    'border: none;' +
    'box-shadow: 0px 8px 16px rgba(0,0,0,0.25);';

chrome.storage.local.get("logged_in", function(data) {
    if(data.logged_in) {
        iframe.src = chrome.runtime.getURL('./html/loggedPopup.html')
    } else {
        iframe.src = chrome.runtime.getURL('./html/popup.html')
    }
});

app.appendChild(iframe)
}

function insertIframe(anchor) {
let app = Array.from(anchor.childNodes).find(function(node){ return node.id === 'popup-app'})

if (app) {
    if (app.querySelectorAll('iframe').length === 0) {
        appendIframe(app)
    }
    toggleVisisbility(app)
} else {
    appendIframe(anchor)
}
}

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id
if (!location.ancestorOrigins.contains(extensionOrigin)) {
var anchor = document.getElementById('cfp-anchor')
if (anchor) {
    insertIframe(anchor)
} else {
    const AppRoot = document.createElement('div', { id: 'cfp-anchor' });
    AppRoot.id = 'cfp-anchor';
    const body = document.getElementsByTagName('body')[0];
    body.appendChild(AppRoot);
    AppRoot.innerHTML = '';
    insertIframe(AppRoot)
}
}

Answer 1

Я разобрался с решением. Я использовал div вместо iframe, сделал div перетаскиваемым, а затем загрузил свой html в div. Я использовал следующий код:

function appendIframe(app) {

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

draggableDiv.id = 'popup-app';
draggableDiv.className = 'draggable';
draggableDiv.setAttribute('data-draggable', 'true');
draggableDiv.style.cssText = 'position:fixed;top:16px;right:21px;display:block;' +
    'width:350px;height:500px;z-index:99999999;' +
    'border: none; cursor: move;' +
    'box-shadow: 0px 8px 16px rgba(0,0,0,0.25);' +
    'background: #25BAF1;';

chrome.storage.local.get("logged_in", function(data) {
    if(data.logged_in) {
        document.getElementById("popup-app").innerHTML='<object id="overlay" style="width: 100%; height: 100%; position: absolute; top: 25px" type="text/html" data='+chrome.runtime.getURL('./html/loggedPopup.html')+' ></object>';
    } else {
        document.getElementById("popup-app").innerHTML='<object id="overlay" style="width: 100%; height: 100%; position: absolute; top: 25px" type="text/html" data='+chrome.runtime.getURL('./html/popup.html')+' ></object>';
    }
});
$("#popup-app").addClass(".draggable");
makeDivDraggable();

app.appendChild(draggableDiv)
}


function makeDivDraggable(){
$(document).ready(function() {

    var $body = $('body');
    var $target = null;
    var isDraggEnabled = false;

    $body.on("mousedown", "div", function(e) {

        $this = $(this);
        isDraggEnabled = $this.data("draggable");

        if (isDraggEnabled) {
            if(e.offsetX===undefined){
                x = e.pageX-$(this).offset().left;
                y = e.pageY-$(this).offset().top;
            }else{
                x = e.offsetX;
                y = e.offsetY;
            }

            $this.addClass('draggable');
            $body.addClass('noselect');
            $target = $(e.target);
        }

    });

    $body.on("mouseup", function(e) {
        $target = null;
        $body.find(".draggable").removeClass('draggable');
        $body.removeClass('noselect');
    });

    $body.on("mousemove", function(e) {
        if ($target) {
            $target.offset({
                top: e.pageY  - y,
                left: e.pageX - x
            });
        }
    });

});
}

Что это в основном делает, это создает div, который можно перетаскивать, а затем вставляет еще один слой html сверху. Модифицированная позиция позволяет захватить div сверху и затем перемещать его.