基于React铬API的铬扩展交互
基于React铬API的铬扩展交互
提问于 2022-12-04 15:51:47
我正在尝试构建一个扩展，它包含一个表单和一个选项，可以用desktopCapture捕捉屏幕，如下所示：
该表单是用React编写的，用于捕获屏幕的代码(取自这里)如下：
chrome.runtime.onMessage.addListener(
(message, sender, senderResponse) => {
if (message.name === "stream" && message.streamId) {
let track, canvas;
navigator.mediaDevices
.getUserMedia({
video: {
mandatory: {
chromeMediaSource: "desktop",
chromeMediaSourceId: message.streamId,
},
},
})
.then((stream) => {
track = stream.getVideoTracks()[0];
const imageCapture = new ImageCapture(track);
return imageCapture.grabFrame();
})
.then((bitmap) => {
track.stop();
canvas = document.createElement("canvas");
canvas.width = bitmap.width;
canvas.height = bitmap.height;
let context = canvas.getContext("2d");
context.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height);
return canvas
.toDataURL()
.then((url) => {
//TODO download the image from the URL
chrome.runtime.sendMessage(
{ name: "download", url },
(response) => {
if (response.success) {
alert("Screenshot saved");
} else {
alert("Could not save screenshot");
}
canvas.remove();
senderResponse({ success: true });
}
);
})
.catch((err) => {
alert("Could not take screenshot");
senderResponse({ success: false, message: err });
});
});
}
return true;
}
);我的意图是，当用户将点击“采取屏幕截图”，上面的代码将运行，然后，在保存，图像将显示在该框。
我能够‘抓取’这两个元素，两个框，我希望图像出现在屏幕拍摄后，和“采取屏幕截图”按钮。
据我所知，content_script只会注入到网页(浏览器)中，并且无法访问扩展，因此，这不是在其中添加代码的方法。
我遗漏了什么？我如何添加一个eventListener，如果单击按钮，screenCapturing代码将运行，我将能够将该框设置为捕获的图像。
诚挚的问候!
回答 1
Stack Overflow用户
发布于 2022-12-04 19:04:57
据我所知，您希望获取选项卡页面内容的截图。(我想你不需要抓取播放视频或音频的内容)
修复1:使用chrome.tabs.captureVisibleTab api捕捉屏幕截图。API链接chrome.tabs
将此添加到background.js中
const takeShot = async (windowId) => {
try {
let imgUrl64 = await chrome.tabs.captureVisibleTab(windowId, { format: "jpeg", quality: 80 });
console.log(imgUrl64);
} catch (error) {
console.error(error);
}
};
chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
if(req.msg === "take_screenshot") takeShot(sender.tab.windowId)
}Fix 2: Content_script具有有限的api访问权限。
看看这一页。理解内容脚本功能
解决方案:从content_script发送消息到后台，并要求他们捕捉屏幕截图。背景截图
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74678237
复制相关文章
相似问题
腾讯云开发者
