Hello I look for addon, which would upload
and inject some file from my disk to site.
I want to draw sketch on canvas using
it with pen. The problem is that my drawing
abilities are very bad, so I need to redraw the
image. Do you know about such addon
or would it be neccessary to make one?
I just asked LLM and it answer it cannot help to inject image for security reasons.
Edit:
I have tried to write some code using chatGPT but I did not manage to make it working. I got error that the connection was not established.
The addon should work like this:
I open site with canvas to draw (see the manifest). I open the image JPG in background script:
const tabTitleContains = "(JPEG obr";
translates as
const tabTitleContains = "(JPEG image";
background:
// Function to check if URL is an image
function isImageURL(url) {
const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp"];
const urlExtension = url.split(".").pop().toLowerCase();
return imageExtensions.includes(urlExtension);
}
// Handling messages from the content script
const tabTitleContains = "(JPEG image";
browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.command === "getLatestImage") {
// Get all tabs in the current window
browser.tabs.query({ currentWindow: true }).then((tabs) => {
let foundTabId = null;
// Iterate through all tabs and look for a title containing "(JPEG image)"
for (const tab of tabs) {
if (tab.title.includes(tabTitleContains)) {
// Tab with the title "(JPEG image)" was found
foundTabId = tab.id;
console.log("Found tab with image:", tab.title);
// Get the URL of the page in the tab
const tabUrl = tab.url;
// If it's an image, send the URL back to the content script
if (isImageURL(tabUrl)) {
browser.tabs.sendMessage(tab.id, { image: tabUrl });
}
break; // End the loop since we found the desired tab
}
}
// Send a message back with the tab number
if (foundTabId !== null) {
sendResponse({ tabId: foundTabId });
} else {
sendResponse({ error: "Image with the label '(JPEG image)' was not found." });
}
});
// Returning true ensures that sendResponse will wait for an asynchronous response
return true;
}
});
Content script:
// Send a request to the background to get the image from the last tab
browser.runtime.sendMessage({ command: "getLatestImage" });
// Receive the response from the background
browser.runtime.onMessage.addListener((message) => {
if (message.tabId) {
const imageTabId = message.tabId;
// Here you can work with the tab id containing the image (imageTabId)
// For example, you can save this id for further use or utilize it for some other action.
// Create a new image on the page and set it to the obtained URL
const imageElement = document.createElement("img");
imageElement.src = message.image;
// Set the maximum dimensions of the image to maintain the aspect ratio
const maxCanvasSize = 1024;
const imageWidth = imageElement.naturalWidth;
const imageHeight = imageElement.naturalHeight;
const aspectRatio = imageWidth / imageHeight;
if (aspectRatio >= 1) {
// The image is wider or square
imageElement.style.width = maxCanvasSize + "px";
imageElement.style.height = maxCanvasSize / aspectRatio + "px";
} else {
// The image is taller
imageElement.style.width = maxCanvasSize * aspectRatio + "px";
imageElement.style.height = maxCanvasSize + "px";
}
// Center the image on the canvas
imageElement.style.position = "absolute";
imageElement.style.top = "50%";
imageElement.style.left = "50%";
imageElement.style.transform = "translate(-50%, -50%)";
imageElement.style.opacity = "0.35"; // Image transparency
// Add the image to the div.flex
const flexDiv = document.querySelector("div.flex");
flexDiv.appendChild(imageElement);
} else if (message.error) {
console.log(message.error);
}
});
The only work what worked really well after some debugging was this bash script to resize the image so fit the canvas.
#!/bin/bash
# Function for resizing an image while maintaining the aspect ratio
resize_image() {
input_path="/media/linux/BACKUP/HOME/Images/Artwork/3"
input_file="$input_path/$1"
# Check if the first argument is a valid file
if [ ! -f "$input_file" ]; then
echo "Error: The first argument '$input_file' is not a valid file."
exit 1
fi
max_size=$2
output_file="image_1024px.jpg"
# Determine the dimensions of the original image
original_width=$(identify -format "%w" "$input_file")
original_height=$(identify -format "%h" "$input_file")
# Decide which side will be limited to the desired size
if (( original_width > original_height )); then
new_width="$max_size"
new_height=$(( max_size * original_height / original_width ))
else
new_height="$max_size"
new_width=$(( max_size * original_width / original_height ))
fi
echo "The target dimensions will be: $new_width x $new_height"
# Resize the image while maintaining the aspect ratio
convert "$input_file" -resize "${new_width}x${new_height}" "$output_file"
echo "The image has been resized and saved as $output_file."
}
# Check if two arguments are provided
if [ $# -ne 2 ]; then
echo "Error: The script expects two arguments: the path to the image and the desired size."
echo "Usage: $0 image_path desired_size"
exit 1
fi
# Check if the second argument is a positive integer
if ! [[ "$2" =~ ^[1-9][0-9]*$ ]]; then
echo "Error: The second argument must be a positive integer."
exit 1
fi
# Call the function to resize the image
resize_image "$1" "$2"