The goal of this Chrome extension is to enable users to capture screenshots of a selected area within the browser just like this extension (https://chrome.google.com/webstore/detail/edlifbnjlicfpckhgjhflgkeeibhhcii). Below is the code for the extension, including the manifest file, popup HTML, popup JavaScript, content script, and background script.
//manifest.json
{
"manifest_version": 3,
"name": "My Extension",
"version": "1.0.1",
"permissions": ["activeTab", "storage", "tabs"],
"background": {
"service_worker": "background.js"
},
"action": {
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<title>My Extension</title>
<script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Start Selection</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
document.getElementById("btn").addEventListener("click", function () {
console.log(chrome);
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
chrome.tabs.sendMessage(tabs[0].id, { action: "startSelection" });
});
});
contentScript.js
// contentScript.js
var start = {};
var end = {};
var isSelecting = false;
$(window).on("mousedown", function (event) {
isSelecting = true;
start.x = event.pageX;
start.y = event.pageY;
$("#selection").removeClass("complete");
$("#start").text("(" + start.x + "," + start.y + ")");
$("#selection").css({
left: start.x,
top: start.y,
});
});
$(window).on("mousemove", function (event) {
if (!isSelecting) {
return;
}
end.x = event.pageX;
end.y = event.pageY;
$("#selection").css({
left: start.x < end.x ? start.x : end.x,
top: start.y < end.y ? start.y : end.y,
width: Math.abs(start.x - end.x),
height: Math.abs(start.y - end.y),
});
});
$(window).on("mouseup", function (event) {
isSelecting = false;
$("#selection").addClass("complete");
$("#end").text("(" + end.x + "," + end.y + ")");
chrome.runtime.sendMessage({
action: "sendSnapshot",
start: start,
end: end,
});
});
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "blurTab") {
$("body").css("filter", "blur(5px)");
}
if (request.action === "unblurTab") {
$("body").css("filter", "none");
}
});
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "startSelection") {
chrome.runtime.sendMessage({ action: "blurTab" });
}
});
background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.action === "sendSnapshot") {
chrome.tabs.captureVisibleTab({ format: "png" }, function (dataUrl) {
// Extract the selected area from the snapshot
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.onload = function () {
canvas.width = Math.abs(request.start.x - request.end.x);
canvas.height = Math.abs(request.start.y - request.end.y);
ctx.drawImage(
img,
request.start.x,
request.start.y,
canvas.width,
canvas.height,
0,
0,
canvas.width,
canvas.height
);
const snapshotUrl = canvas.toDataURL("image/png");
// Do something with the snapshot URL, for example, send it to the server
console.log(snapshotUrl);
// Unblur the tab
chrome.tabs.sendMessage(sender.tab.id, { action: "unblurTab" });
};
img.src = dataUrl;
});
}
}
);
I don’t even know what is causing the problem
