I’m building a Chrome Extension and I need users to be able to “detach” the extension from the default top-right location of the popup when they so desire. Note that I still want the extension to open normally when the icon is clicked. But I need that when a specific button is clicked, for the extension to close and immediately open itself in a new window with specified dimensions and no URL address bar as per the below picture:
I’ve got this code so far but it is not working. Nothing happens when the button is clicked:
JavaScript
x
15
15
1
function createPanel(tab) {2
if (!tab) return; const contentWindowId = tab.windowId;3
try { const panelWindowInfo = chrome.windows.create({4
url: chrome.runtime.getURL("popup.html"),5
type:"popup",6
height: 500,7
width: 300, });8
} catch (error) { console.log(error); }9
} 10
11
document.getElementById("myItemX").addEventListener("click", boxX)12
function boxX() {13
chrome.action.onClicked.addListener(createPanel);14
}15
What am I missing here?
Advertisement
Answer
I “thinned out” an extension of mine. It should do what you asked and also remember the last position of the detached window.
JavaScript
1
195
195
1
/*manifest.json - begin*/2
{3
"manifest_version": 3,4
"name": "xxx",5
"version": "0.0.0.1",6
"background": { "service_worker": "sw.js" },7
"action": {8
"default_title": "xxx",9
"default_icon": "icon.png"10
},11
"icons": { "16": "icon.png" },12
"permissions": ["storage", "activeTab"]13
}14
/*manifest.json - end*/15
16
/*popup.html - begin*/17
<!DOCTYPE html>18
<html>19
<head>20
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">21
<title>xxx</title>22
<script src="popup.js"></script>23
</head>24
<body style="margin:1px 2px 1px 2px; background:#5f9ea0; overflow-y:hidden; min-width:371px">25
<div style="margin:0 auto; width:97%; font-size:12px">26
<div style="border:1px solid white; margin:3px; display:block">27
<div style="padding: 2px; margin: 0px; border: 0px solid red; height: 55px;">28
<div id="achPopup" status="" style="width:43px; height: 43px; line-height:21px; border:1px solid black; text-align:center;">29
<a>ach<br>Popup</a>30
</div>31
</div>32
</div>33
</div>34
</body>35
</html>36
/*popup.html - end*/37
38
/*sw.js - begin*/39
chrome.action.onClicked.addListener(async t => {40
await chrome.storage.session.set({'windVal':'popup'});41
await chrome.action.setPopup({popup: '../popup.html'});42
await chrome.action.openPopup();43
});44
45
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {46
if (msg.cmd == 'findBestWindow') {47
let tentativo, wId;48
let queryOpt = {focused: true};49
wId = msg.dp;50
51
chrome.windows.get(wId, tentativo => {52
let rle = chrome.runtime.lastError; 53
if (rle) {54
wId = msg.ow;55
chrome.windows.get(msg.ow, tentativo => {56
if (tentativo.state == 'minimized') 57
queryOpt.state = 'normal';58
chrome.action.setPopup({popup: '../popup.html'}, _ => {59
chrome.windows.update(wId, queryOpt, _ => {60
chrome.action.openPopup(_ => {61
sendResponse({'onse': 'OK'});62
})63
}) 64
})65
})66
} else {67
if (tentativo.state == 'minimized') 68
queryOpt.state = 'normal';69
chrome.action.setPopup({popup: '../popup.html'}, _ => {70
chrome.windows.update(wId, queryOpt, _ => {71
chrome.action.openPopup(_ => {72
sendResponse({'onse': 'OK'});73
})74
}) 75
}) 76
}77
})78
}79
return true80
})81
/*sw.js - end*/82
83
/*popup.js - begin*/84
var sndFloatingWind;85
var rv;86
87
function getAllStorage() {88
return new Promise(ok => {89
var proms = [];90
proms.push(chrome.storage.session.get({ 'windVal': 'popup', 'sndFloatingWind': -1 }));91
proms.push(chrome.storage.local.get({'coords': {'x':1, 'y':1}}));92
Promise.all(proms)93
.then(v => {94
ok({v[0], v[1]})95
}) 96
})97
}98
99
document.addEventListener('DOMContentLoaded', async _ => {100
function drawComs() {101
return new Promise(async (ok, ko) => {102
var frag = new DocumentFragment();103
var windVal = rv.windVal;104
105
//Detach Popup106
divEl = document.querySelector('#achPopup');107
divEl.firstElementChild.innerText = (windVal == 'popup' ? 'Det' : 'Att') + 'achrnPopup';108
divEl.setAttribute('status', windVal);109
divEl.addEventListener('click', async function() {110
var precVal = this.getAttribute('status');111
var nextVal = (precVal == 'popup' ? 'window' : 'popup');112
if (nextVal == 'window') {113
let w = await chrome.windows.getCurrent({populate: true});114
await chrome.storage.session.set({ 'windVal': nextVal, 'sndDockedPopup': w.id});115
116
let itms = await chrome.storage.local.get({'coords': {'x':1, 'y':1}});117
let coords = itms.coords;118
119
let hN = document.querySelector('html');120
w = await chrome.windows.create({121
type: 'popup',122
focused: true,123
top: coords.y,124
left: coords.x,125
height: Math.max(self.outerHeight + 20, hN.scrollHeight + 39),126
width: Math.max(self.outerWidth, hN.scrollWidth),127
url: '../popup.html'128
});129
130
sndFloatingWind = w.id;131
132
await chrome.storage.session.set({'sndFloatingWind': sndFloatingWind});133
134
self.close();135
} else {136
await chrome.storage.local.set({'coords': {'x': self.screenX, 'y': self.screenY}});137
138
await chrome.storage.session.set({'windVal': nextVal});139
140
let allWinds = await chrome.windows.getAll({'windowTypes': ['normal']});141
allWinds.sort((a, b) => {142
if (a.id < b.id)143
return -1144
else if (a.id > b.id)145
return 1146
else return 0147
});148
allWinds.sort((a, b) => {149
if (a.state == 'minimized')150
return -1;151
else152
return 0153
154
});155
156
let lsw = await chrome.windows.getLastFocused({'windowTypes': ['normal']});157
if (lsw?.state != 'minimized') {158
allWinds.splice(allWinds.find(v => {159
return v.id == lsw.id160
}), 1);161
allWinds.unshift(lsw);162
}163
164
let tmp = await chrome.storage.session.get(['sndFloatingWind', 'sndDockedPopup']);165
166
let resp = await chrome.runtime.sendMessage({'cmd': 'findBestWindow', 'fw': tmp.sndFloatingWind, 'dp': tmp.sndDockedPopup, 'ow':allWinds[0].id })167
if (resp.onse == 'OK')168
self.close();169
else if (resp.err)170
alert(risp.err);171
}172
});173
174
ok()175
})176
}177
178
rv = await getAllStorage();179
180
if (rv.windVal == 'popup') {181
if (rv.sndFloatingWind != -1) {182
try {183
let w = await chrome.windows.get(rv.sndFloatingWind);184
if (typeof w !== 'undefined')185
await chrome.windows.remove(rv.sndFloatingWind);186
await chrome.storage.session.clear('sndFloatingWind')187
} catch(err) {}188
}189
}190
await drawComs()191
});192
193
chrome.action.setPopup({popup: ''})194
/*popup.js - end*/195