I am building a chrome extension that performs screen/tab recording.
manifest.json
{
"name": "My Recorer",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"permissions": ["activeTab", "declarativeContent", "storage","tabs", "desktopCapture"]
}
background.js
chrome.runtime.onInstalled.addListener(function (tab) {
console.log(tab)
})
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<button style="width: 100%; margin: 5%;" id="start">Record</button>
<button style="width: 100%; margin: 5%" id="stop">stop</button>
</div>
<script src="popup.js"></script>
</body>
</html>
It used popup.js which handles screen recording.
let start = document.getElementById('start'),
stop = document.getElementById('stop'),
mediaRecorder;
start.addEventListener('click', async function(){
console.log("Start")
let stream = await recordScreen();
let mimeType = 'video/webm';
mediaRecorder = createRecorder(stream, mimeType);
let node = document.createElement("p");
node.textContent = "Started recording";
document.body.appendChild(node);
})
stop.addEventListener('click', function(){
mediaRecorder.stop();
let node = document.createElement("p");
node.textContent = "Stopped recording";
document.body.appendChild(node);
})
async function recordScreen() {
return await navigator.mediaDevices.getDisplayMedia({
audio: true,
video: { mediaSource: "screen"}
});
}
The current application does the recording with no issues.
But, when I close the extension (I go out of the extension), the application ends completely the recording is also lost. Am I looking for how to get the recording running behind the scenes?
Want to achieve below
