我正在構建一個 Chrome 擴展程式，我需要用戶能夠在需要時從彈出視窗的默認右上角位置“分離”擴展程式。請注意，我仍然希望在單擊圖示時能夠正常打開擴展程式。但是我需要在單擊特定按鈕時關閉擴展程式并立即在具有指定尺寸且沒有 URL 地址欄的新視窗中自行打開，如下圖所示：
到目前為止，我已經得到了這段代碼，但它沒有用。單擊按鈕時沒有任何反應：
function createPanel(tab) {
if (!tab) return; const contentWindowId = tab.windowId;
try { const panelWindowInfo = chrome.windows.create({
url: chrome.runtime.getURL("popup.html"),
type:"popup",
height: 500,
width: 300, });
} catch (error) { console.log(error); }
}
document.getElementById("myItemX").addEventListener("click", boxX)
function boxX() {
chrome.action.onClicked.addListener(createPanel);
}
我在這里錯過了什么？
uj5u.com熱心網友回復：
我“縮小”了我的延伸。它應該按照您的要求進行操作，并記住分離視窗的最后位置。
/*manifest.json - begin*/
{
"manifest_version": 3,
"name": "xxx",
"version": "0.0.0.1",
"background": { "service_worker": "sw.js" },
"action": {
"default_title": "xxx",
"default_icon": "icon.png"
},
"icons": { "16": "icon.png" },
"permissions": ["storage", "activeTab"]
}
/*manifest.json - end*/
/*popup.html - begin*/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xxx</title>
<script src="popup.js"></script>
</head>
<body style="margin:1px 2px 1px 2px; background:#5f9ea0; overflow-y:hidden; min-width:371px">
<div style="margin:0 auto; width:97%; font-size:12px">
<div style="border:1px solid white; margin:3px; display:block">
<div style="padding: 2px; margin: 0px; border: 0px solid red; height: 55px;">
<div id="achPopup" status="" style="width:43px; height: 43px; line-height:21px; border:1px solid black; text-align:center;">
<a>ach<br>Popup</a>
</div>
</div>
</div>
</div>
</body>
</html>
/*popup.html - end*/
/*sw.js - begin*/
chrome.action.onClicked.addListener(async t => {
await chrome.storage.session.set({'windVal':'popup'});
await chrome.action.setPopup({popup: '../popup.html'});
await chrome.action.openPopup();
});
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.cmd == 'findBestWindow') {
let tentativo, wId;
let queryOpt = {focused: true};
wId = msg.dp;
chrome.windows.get(wId, tentativo => {
let rle = chrome.runtime.lastError;
if (rle) {
wId = msg.ow;
chrome.windows.get(msg.ow, tentativo => {
if (tentativo.state == 'minimized')
queryOpt.state = 'normal';
chrome.action.setPopup({popup: '../popup.html'}, _ => {
chrome.windows.update(wId, queryOpt, _ => {
chrome.action.openPopup(_ => {
sendResponse({'onse': 'OK'});
})
})
})
})
} else {
if (tentativo.state == 'minimized')
queryOpt.state = 'normal';
chrome.action.setPopup({popup: '../popup.html'}, _ => {
chrome.windows.update(wId, queryOpt, _ => {
chrome.action.openPopup(_ => {
sendResponse({'onse': 'OK'});
})
})
})
}
})
}
return true
})
/*sw.js - end*/
/*popup.js - begin*/
var sndFloatingWind;
var rv;
function getAllStorage() {
return new Promise(ok => {
var proms = [];
proms.push(chrome.storage.session.get({ 'windVal': 'popup', 'sndFloatingWind': -1 }));
proms.push(chrome.storage.local.get({'coords': {'x':1, 'y':1}}));
Promise.all(proms)
.then(v => {
ok({...v[0], ...v[1]})
})
})
}
document.addEventListener('DOMContentLoaded', async _ => {
function drawComs() {
return new Promise(async (ok, ko) => {
var frag = new DocumentFragment();
var windVal = rv.windVal;
//Detach Popup
divEl = document.querySelector('#achPopup');
divEl.firstElementChild.innerText = (windVal == 'popup' ? 'Det' : 'Att') 'ach\r\nPopup';
divEl.setAttribute('status', windVal);
divEl.addEventListener('click', async function() {
var precVal = this.getAttribute('status');
var nextVal = (precVal == 'popup' ? 'window' : 'popup');
if (nextVal == 'window') {
let w = await chrome.windows.getCurrent({populate: true});
await chrome.storage.session.set({ 'windVal': nextVal, 'sndDockedPopup': w.id});
let itms = await chrome.storage.local.get({'coords': {'x':1, 'y':1}});
let coords = itms.coords;
let hN = document.querySelector('html');
w = await chrome.windows.create({
type: 'popup',
focused: true,
top: coords.y,
left: coords.x,
height: Math.max(self.outerHeight 20, hN.scrollHeight 39),
width: Math.max(self.outerWidth, hN.scrollWidth),
url: '../popup.html'
});
sndFloatingWind = w.id;
await chrome.storage.session.set({'sndFloatingWind': sndFloatingWind});
self.close();
} else {
await chrome.storage.local.set({'coords': {'x': self.screenX, 'y': self.screenY}});
await chrome.storage.session.set({'windVal': nextVal});
let allWinds = await chrome.windows.getAll({'windowTypes': ['normal']});
allWinds.sort((a, b) => {
if (a.id < b.id)
return -1
else if (a.id > b.id)
return 1
else return 0
});
allWinds.sort((a, b) => {
if (a.state == 'minimized')
return -1;
else
return 0
});
let lsw = await chrome.windows.getLastFocused({'windowTypes': ['normal']});
if (lsw?.state != 'minimized') {
allWinds.splice(allWinds.find(v => {
return v.id == lsw.id
}), 1);
allWinds.unshift(lsw);
}
let tmp = await chrome.storage.session.get(['sndFloatingWind', 'sndDockedPopup']);
let resp = await chrome.runtime.sendMessage({'cmd': 'findBestWindow', 'fw': tmp.sndFloatingWind, 'dp': tmp.sndDockedPopup, 'ow':allWinds[0].id })
if (resp.onse == 'OK')
self.close();
else if (resp.err)
alert(risp.err);
}
});
ok()
})
}
rv = await getAllStorage();
if (rv.windVal == 'popup') {
if (rv.sndFloatingWind != -1) {
try {
let w = await chrome.windows.get(rv.sndFloatingWind);
if (typeof w !== 'undefined')
await chrome.windows.remove(rv.sndFloatingWind);
await chrome.storage.session.clear('sndFloatingWind')
} catch(err) {}
}
}
await drawComs()
});
chrome.action.setPopup({popup: ''})
/*popup.js - end*/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/535871.html