fix wrong file names #5 & wording improvements, work on better screenshot positioning

This commit is contained in:
Michi 2024-11-17 21:29:24 +01:00
parent 6fda79b6c7
commit 56139e218d
3 changed files with 13 additions and 10 deletions

View file

@ -31,8 +31,8 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
case "saveStep":
try{
const step = {
"label":message.stepLabel,
"description":"Short description of the step",
"label":`Click "${message.stepLabel}"`,
"description":`Here you can write anything you need to know about when clicking on "${message.stepLabel}".`,
"action":message.triggerName,
"element":message.stepElement,
"image":message.image,
@ -48,7 +48,10 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
try{
let filename = "guide.json";
chrome.storage.local.get(["guideTitle", "exportFilename"], (data) => {
if(data.guideTitle) guide.title = `Guide: ${data.guideTitle}`;
if(data.guideTitle){
guide.title = `Guide: ${data.guideTitle}`;
guide.description = `A step by step guide about how to use ${data.guideTitle}.`;
}
if(data.exportFilename) filename = `guide-${data.exportFilename}.json`;
guide.steps = steps;
return sendResponse({ success: true, guide: guide, filename: filename });

View file

@ -6,7 +6,7 @@ const domainFormatted = window.location.host.replace(/\./g, "-");
// set guide title
chrome.storage.local.get("guideTitle", (data) => {
if(!data.guideTitle){
if(!data.guideTitle || data.guideTitle != pageTitle){
try{
chrome.storage.local.set({ guideTitle: pageTitle });
chrome.storage.local.set({ exportFilename: domainFormatted });
@ -48,7 +48,7 @@ document.addEventListener('click', function(){
const pixelPadding = 150;
const dpr = window.devicePixelRatio || 1;
let parentElement = element.parentNode.parentNode || element.parentNode || element;
let parentElement = element.parentNode || element; // element.parentNode.parentNode ||
parentElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
@ -56,8 +56,8 @@ document.addEventListener('click', function(){
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const croppedWidth = Math.min((parentRect.width + pixelPadding) * dpr, viewportWidth * dpr);
const croppedHeight = Math.min((parentRect.height + pixelPadding) * dpr, viewportHeight * dpr);
const croppedWidth = (parentRect.width + pixelPadding) * dpr;
const croppedHeight = (parentRect.height + pixelPadding) * dpr;
const viewportX = Math.max((parentRect.left - pixelPadding / 2) * dpr, 0);
const viewportY = Math.max((parentRect.top - pixelPadding / 2) * dpr, 0);
@ -77,8 +77,8 @@ document.addEventListener('click', function(){
// calculate coordinates of the clicked element
const elementStartX = Math.max((rect.left - (parentRect.left - pixelPadding / 2)), 0);
const elementStartY = Math.max((rect.top - (parentRect.top - pixelPadding / 2)), 0);
const elementEndX = elementStartX + rect.width;
const elementEndY = elementStartY + rect.height;
const elementEndX = elementStartX + rect.width;// + (pixelPadding / 2);
const elementEndY = elementStartY + rect.height;// + (pixelPadding / 2);
const croppedDataUrl = canvas.toDataURL("image/jpeg");
chrome.runtime.sendMessage({

View file

@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "Cl1ck Gu1de",
"version": "0.0.5",
"version": "0.0.6",
"description": "A browser add-on which records the steps clicked on a page and generates a easy to understand guide from it.",
"permissions": ["scripting", "activeTab", "downloads", "tabs", "storage"],
"host_permissions": ["<all_urls>"],