-
Notifications
You must be signed in to change notification settings - Fork 2
/
content.js
104 lines (88 loc) · 3.18 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
let lastImageClicked;
const attach = () => {
document.querySelectorAll("img").forEach((img) => {
img.oncontextmenu = () => {
lastImageClicked = img;
};
});
};
const toLoading = (img) => {
const container = document.createElement("div");
container.style = img.style;
container.style.position = "relative";
container.appendChild(img.cloneNode());
const spinner = document.createElement("img");
spinner.src = chrome.runtime.getURL("src/img/loading.gif");
spinner.style.background = "transparent";
spinner.style.height = "16px";
const loading = document.createElement("div");
loading.style.position = "absolute";
loading.style.bottom = "0";
loading.style.left = "0";
loading.style.padding = `6px 8px`;
loading.style.background = "#10b981";
loading.style.borderTopRightRadius = "5px";
loading.id = "ffmpeg_convert_loading";
loading.appendChild(spinner);
container.appendChild(loading);
img.parentNode.replaceChild(container, img);
return container;
};
chrome.runtime.onMessage.addListener(({ data, type }) => {
const container = toLoading(lastImageClicked);
switch (type) {
case "embed_conversion_requested": {
const { width, height, style } = lastImageClicked;
return chrome.runtime.sendMessage(
{ data: { src: data.src }, type: "conversion_requested" },
async function ({ blobText, mimeType }) {
// A bit of a hack, as it decodes the blob://{{ base64 }} into an usable
// blob for URL.createObjectURL
const blob = await (await fetch(blobText)).blob();
const url = URL.createObjectURL(blob);
const video = document.createElement("video");
video.width = width;
video.height = height;
video.style.width = `${width}px`;
video.style.height = `${height}px`;
video.style = style;
video.controls = true;
video.autoplay = true;
video.loop = true;
const source = document.createElement("source");
source.src = url;
source.type = mimeType;
video.appendChild(source);
if (container.parentNode.nodeName !== "A") {
container.parentNode.replaceChild(video, container);
return;
}
// If there was a link wrapping the GIF, replace it as it will hijack mouse events
container.parentNode.parentNode.replaceChild(
video,
container.parentNode
);
}
);
}
case "download_conversion_requested": {
const img = lastImageClicked.cloneNode();
return chrome.runtime.sendMessage(
{ data: { src: data.src }, type: "conversion_requested" },
async function ({ blobText, mimeType }) {
// A bit of a hack, as it decodes the blob://{{ base64 }} into an usable
// blob for URL.createObjectURL
const blob = await (await fetch(blobText)).blob();
const url = URL.createObjectURL(blob);
chrome.runtime.sendMessage({
data: { url },
type: "download_requested",
});
container.parentNode.replaceChild(img, container);
attach();
}
);
}
}
});
attach();