Skip to content

Instantly share code, notes, and snippets.

@guest271314
Created October 29, 2022 02:33
Embed
What would you like to do?
ScreenshotTest
// https://www.reddit.com/r/learnjavascript/comments/yeodfh/chrome_extension_error_extensionsjs2897_uncaught/
// Use a Port for multiple messages
chrome.runtime.onConnect.addListener((port) => {
console.log(port);
port.onMessage.addListener(async (message) => {
if (message.name === 'stream' && message.streamId) {
console.log(message.streamId);
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: 'screen',
chromeMediaSourceId: message.streamId,
},
},
});
console.log(stream);
// Avoid capturing Chrome's screen capture picker UI
await new Promise((resolve) => setTimeout(resolve, 70));
const [track] = stream.getVideoTracks();
const imageCapture = new ImageCapture(track);
const bitmap = await imageCapture.grabFrame();
track.stop();
port.postMessage({
success: true,
});
const ctx = document
.createElement('canvas')
.getContext('bitmaprenderer');
ctx.transferFromImageBitmap(bitmap);
const reader = new FileReader();
const blob = await new Promise((resolve) => ctx.canvas.toBlob(resolve));
// Open screenshot in new window using Blob URL
window.open(URL.createObjectURL(blob));
reader.onload = (e) => {
port.postMessage({
done: true,
// Pass data URL (string), ImageBitmap isn't a string
value: e.target.result,
});
};
reader.readAsDataURL(blob);
} catch (err) {
alert('Could not take screenshot');
port.postMessage({
success: false,
message: err.message,
});
}
}
});
});
chrome.action.onClicked.addListener(async (tab) => {
chrome.desktopCapture.chooseDesktopMedia(
['screen'],
tab,
async (streamId) => {
if (streamId && streamId.length) {
const [{ id }] = await chrome.tabs.query({
active: true,
currentWindow: true,
});
// Use a Port for multiple messages
const port = chrome.tabs.connect(id, { name: 'screenshot' });
port.onMessage.addListener(async (message) => {
console.log(message);
if (message.done) {
// Disconnect Port when done
port.disconnect();
}
});
port.postMessage({
name: 'stream',
streamId,
});
}
}
);
});
chrome.runtime.onConnect.addListener((port) => {
console.log(port);
port.onMessage.addListener(async (message) => {
if (message.name === 'stream' && message.streamId) {
console.log(message.streamId);
try {
const stream = await navigator.mediaDevices.getUserMedia({
video: {
mandatory: {
chromeMediaSource: 'screen',
chromeMediaSourceId: message.streamId,
},
},
});
console.log(stream);
// Avoid capturing Chrome's screen capture picker UI
await new Promise((resolve) => setTimeout(resolve, 70));
const [track] = stream.getVideoTracks();
const imageCapture = new ImageCapture(track);
const bitmap = await imageCapture.grabFrame();
track.stop();
port.postMessage({
done: false,
success: true,
});
const ctx = document
.createElement('canvas')
.getContext('bitmaprenderer');
ctx.transferFromImageBitmap(bitmap);
const reader = new FileReader();
const blob = await new Promise((resolve) => ctx.canvas.toBlob(resolve));
// Open screenshot in new window using Blob URL
window.open(URL.createObjectURL(blob));
reader.onload = (e) => {
port.postMessage({
done: true,
// Pass data URL (string), ImageBitmap isn't a string
value: e.target.result,
});
};
reader.readAsDataURL(blob);
} catch (err) {
alert('Could not take screenshot');
port.postMessage({
success: false,
message: err.message,
});
}
}
});
});
{
"name": "ScreenshotTest",
"version": "1.0",
"description": "blah blah",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["contentscript.js"],
"run_at": "document_start"
}],
"host_permissions": [
"http://*/*",
"https://*/*"
],
"permissions": [
"activeTab",
"desktopCapture",
"tabs",
"downloads"
],
"action": {
"default_title": "Take a Screenshot"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment