Google chrome extension 使iframe中的chrome扩展弹出窗口可拖动？

我希望我的扩展以iframe的形式打开，而不是普通的弹出窗口。到目前为止，我已经能够做到这一点。现在，我正试图使用jQueryUI使此iframe可拖动，但无法做到这一点。我的inject.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)
}
}

---

我想出了解决办法。我使用了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
            });
        }
    });

});
}

函数appendIframe（应用程序）{
var draggableDiv=document.createElement（'div'）；
draggableDiv.id='弹出应用程序'；
draggableDiv.className='draggable'；
draggableDiv.setAttribute（'data-draggable'，'true'）；
draggableDiv.style.cssText='位置：固定；顶部：16px；右侧：21px；显示：块；'+
'宽度：350px；高度：500px；z索引：9999999；'+
'边框：无；光标：移动；'+
'方块阴影：0px 8px 16px rgba（0,0,0,0.25）；'+
‘背景：#25BAF1；’；
chrome.storage.local.get（“登录”），函数（数据）{
如果（数据已登录）{
document.getElementById（“弹出应用”）.innerHTML=''；
}否则{
document.getElementById（“弹出应用”）.innerHTML=''；
}
});
$（“#弹出应用程序”）.addClass（“.draggable”）；
makeDivDraggable（）；
append.child（draggableDiv）
}
函数makeDivDragable（）{
$（文档）.ready（函数（）{
变量$body=$（'body'）；
var$target=null；
var isDraggEnabled=假；
$body.on（“鼠标向下”，“div”，函数（e）{
$this=$（this）；
isDraggEnabled=$this.data（“可拖动”）；
如果（isDraggEnabled）{
如果（e.offsetX==未定义）{
x=e.pageX-$（此）.offset（）左；
y=e.pageY-$（this）.offset（）.top；
}否则{
x=e.offsetX；
y=e.offsetY；
}
$this.addClass（'draggable'）；
$body.addClass（'noselect'）；
$target=$（e.target）；
}
});
$body.on（“鼠标”，函数（e）{
$target=null；
$body.find（“.draggable”）.removeClass（'draggable'）；
$body.removeClass（'noselect'）；
});
$body.on（“mousemove”，函数（e）{
如果（目标美元）{
$target.offset({
顶部：e.pageY-y，
左：e.pageX-x
});
}
});
});
}

---

这基本上是创建一个div，它是可拖动的，然后在上面粘贴另一层html。修改后的位置允许从顶部抓取div，然后移动它。

您的代码没有使其可拖动，请查找。我使用的是$（“#cfp anchor”）.draggable（）；但它不起作用，这就是我从代码中删除它的原因。它可能也需要添加CSS。这里的问题是，简单地将CSS添加到页面中会与页面本身冲突，因此您必须使用ShadowDOM或通过DOM侦听器手动实现拖动。