-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.js
123 lines (102 loc) · 4 KB
/
content.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
// This script runs in the context of the current webpage and persists
import jsPDF from "jspdf";
import html2canvas from "html2canvas";
// addEventListener only once
let isListenerAdded = false;
// Start element selection mode
function startSelectingElement() {
document.body.style.cursor = 'crosshair';
function onMouseOver(event) {
event.target.style.outline = '2px solid blue'; // Highlight element on hover
}
function onMouseOut(event) {
event.target.style.outline = ''; // Remove highlight when not hovering
}
function onClick(event) {
event.preventDefault();
event.stopPropagation();
const element = event.target;
element.style.outline = '2px solid red'; // Highlight selected element
let elementId = element.id; // Store selected element's id
if (!elementId) {
// If the element doesn't have an id, assign a unique id
elementId = 'selected-element-' + Date.now();
element.id = elementId;
}
document.body.style.cursor = 'default'; // Reset cursor
document.removeEventListener('mouseover', onMouseOver);
document.removeEventListener('mouseout', onMouseOut);
document.removeEventListener('click', onClick); // Remove the click event listener
isListenerAdded = false; // Reset the flag
chrome.storage.local.set({
selectedElementId: elementId,
buttonDisabled: false
}); // Persist the selected element
console.log('Element selected:', selectedElement);
alert("Element selected! You can now render it as an image or PDF.");
}
document.addEventListener('mouseover', onMouseOver);
document.addEventListener('mouseout', onMouseOut);
document.addEventListener('click', onClick);
}
// Listen for messages from the popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'startSelectingElement') {
if (isListenerAdded) {
sendResponse({ status: 'selection_already_started' });
return;
}
startSelectingElement();
sendResponse({ status: 'selection_started' });
}
});
// Injected function to render the selected element as an image
function renderImage(selectedElementId) {
const selectedElement = document.getElementById(selectedElementId);
getCanvas(selectedElement).then(canvas => {
const link = document.createElement('a');
link.href = canvas.toDataURL("image/png");
link.download = 'dom_image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
}
// Listen for messages renderImage
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'renderImage') {
chrome.storage.local.get('selectedElementId', function (data) {
renderImage(data.selectedElementId);
});
sendResponse({ status: 'rendering_started' });
}
});
// Injected function to render the selected element as a PDF
function renderPDF(selectedElementId) {
const selectedElement = document.getElementById(selectedElementId);
getCanvas(selectedElement).then(canvas => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 10, 10);
pdf.save("dom_element.pdf");
});
}
// Get canvas from selected element
function getCanvas(selectedElement) {
return html2canvas(selectedElement,{
useCORS: true,
allowTaint: true,
});
}
// Listen for messages renderPDF
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'renderPDF') {
chrome.storage.local.get('selectedElementId', function (data) {
renderPDF(data.selectedElementId);
});
sendResponse({ status: 'rendering_started' });
}
});
// Reset storage after page refresh
chrome.storage.local.clear();
console.log('Content script loaded');