michi.vonah/click-guide
1
0
Fork 0
mirror of https://github.com/michivonah/click-guide.git synced 2025-12-22 14:06:29 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

9
chrome/background.js
View file

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

12
chrome/content.js
View file

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

2
chrome/manifest.json
View file

@ -1,7 +1,7 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Cl1ck Gu1de", "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.", "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"], "permissions": ["scripting", "activeTab", "downloads", "tabs", "storage"],
"host_permissions": ["<all_urls>"], "host_permissions": ["<all_urls>"],