-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathextract_image_results.js
184 lines (168 loc) · 10 KB
/
extract_image_results.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
(async function(){
artoo.injectScript("//medialab.github.io/SearchEnginesBookmarklet/FileSaver.min.js", function() {
//artoo.injectScript("//medialab.github.io/SearchEnginesBookmarklet/dropdown.js", function() {
artoo.injectScript("//localhost:4443/dropdown.js", function() {
var loc = window.location,
href = loc.href,
query = (~href.search(/[#?&]q=/) ? href.replace(/^.*[#?&]q=([^#?&]+).*$/, '$1') : undefined),
search = ~href.search(/:\/\/([^.]+\.)?google\.[^/]+\//) ? 'Google Images' : 'DuckDuckGo Images',
styles = [
'#BMoverlay {z-index: 1000000; position: fixed; top: 150px; right: 10px; background-color: white; width: 410px; border-radius: 5px; box-shadow: 1px 1px 5px 3px #656565; padding: 15px; text-align: center; color: black; font-family: monospace; box-sizing: content-box; text-rendering: geometricprecision;}',
'#BMoverlay h1 {display: block; font-size: 23px; font-weight: bold; margin: 0px 70px 15px 0px; padding: 0; line-height: 22px; text-decoration: underline; font-family: monospace; box-sizing: content-box;}',
'#BMoverlay #BMlogo {position: absolute; top: 8px; right: 8px; width: 64px; height: 64px;}',
'#BMoverlay h2 {display: block; font-size: 17px; font-weight: bold; margin: 0px 70px 25px 0px; padding: 0; line-height: 22px; font-family: monospace;}',
'#BMoverlay p {display: block; font-size: 14px; font-family: monospace; margin: 12px 0; padding: 0; line-height: 16px;}',
'#BMoverlay #BMdropdown {margin: 0 20px 0 10px; padding: 0 5px; height: 26px; color: unset; border: 1px solid #555; border-radius: 2px; background-color: #EEE; font-family: monospace;}',
'#BMoverlay .extra {color: grey; margin-bottom: 0; font-size: 0.9em;}',
'#BMoverlay #BMnumber {margin: 0 0 0 10px; padding: 0 5px; height: 20px; color: unset; border: 1px solid #555; border-radius: 2px; font-family: monospace; width:45px; box-sizing: content-box; background-color: #EEE; font-size: 14px;}',
'#BMoverlay input[type="button"] {margin: 5px 0; padding: 5px 10px; font-family: monospace; font-size: 14px; font-weight: bold; border: 1px solid #555; border-radius: 2px; background-color: #EEE; line-height: 14px; cursor: pointer;}',
'#BMprogressContainer {background-color: #f3f3f3; border-radius: 5px; width: 100%; height: 20px; margin-top: 10px;}',
'#BMprogressBar {height: 100%; width: 0; background-color: #4caf50; border-radius: 5px;}',
'#BMprogressText {margin-top: 5px;}',
'#BMoverlay #BMfooter {margin: 15px 0 0 0; font-size: 10px; color: #555;}',
'#BMoverlay #BMfooter a, #BMoverlay #BMfooter a:visited {color: black; text-decoration: underline; color: #555;}'
];
async function wait(minDelay, maxDelay) {
const delay = Math.floor(Math.random() * (maxDelay - minDelay)) + minDelay;
return new Promise(resolve => setTimeout(resolve, delay));
}
function updateProgress(current, total) {
const progressBar = document.querySelector('#BMprogressBar');
const progressText = document.querySelector('#BMprogressText');
let percentage = Math.min((current / total) * 100, 100);
progressBar.style.width = percentage + '%';
progressText.textContent = `Collected ${current} of ${total} results`;
}
async function getBase64FromImageURL(url) {
const response = await fetch(url, { mode: 'cors' });
if (!response.ok) {
throw new Error(response.statusText);
}
const blob = await response.blob();
const reader = new FileReader();
return new Promise((resolve, reject) => {
reader.onloadend = () => resolve(reader.result);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
}
async function scrap_n_results(n, path) {
let scrap,
pixel_scroll = 0,
verif = true;
scrap = Array.from(document.querySelectorAll(path));
while(scrap.length < n || verif){
pixel_scroll += Math.random()*2000 + Math.random()*500;
window.scroll({top: pixel_scroll, left: 0, behavior: "smooth"});
await wait(2000, 3000);
scrap = Array.from(document.querySelectorAll(path));
const lastElement = scrap[scrap.length - 1];
const img = search === 'Google Images'
? lastElement.querySelector("div[jsslot] g-img > img")
: lastElement.querySelector("img[class]");
verif = img && img.getAttribute("src").includes("data:image/gif;base64,");
}
return Array.from(scrap);
}
async function get_image(image_box){
let image = image_box.getAttribute("src");
if (!(~image.search("data:image/gif;base64,"))) {
try {
image = await getBase64FromImageURL(image);
} catch (e) {
let error = 'CORS protection detected!',
popup = '\n\nTry to enforce it using a second browser extension such as the one that will open in a new tab (first allow it to pop-up). Then activate the extension, refresh the page and retry the bookmarklet.';
if (navigator.userAgent.indexOf('Chrome') > -1) {
window.alert(error + popup);
window.open('https://chromewebstore.google.com/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=fr');
} else if (navigator.userAgent.indexOf('Firefox') > -1) {
window.alert(error + popup + '\n\n(you should use the \"Allow CORS\" option of the extension)');
window.open('https://addons.mozilla.org/en-US/firefox/addon/mheadercontrol/');
} else {
window.alert(error + '\n\nThis bookmarklet is intended to work only within Firefox or Chrome/Chromium.\n\nPlease use one of these browsers and retry.');
}
throw(e);
}
}
return image;
}
async function scrape(n){
let results = [],
box_path = search === 'Google Images' ? "div[id='search'] div[data-lpage]" : "div[class='tile tile--img has-detail']",
scrap = await scrap_n_results(n, box_path),
ele,
verif = new Set();
while ((ele = scrap.shift()) && results.length < n) {
let path = search === 'Google Images' ? "div[jsslot] g-img>img":"img[class]",
image_box = ele.querySelector(path),
image_url = image_box.getAttribute("src").replace(/^data:image.*$/, '').replace(/^\/\//, 'https://'),
image = await get_image(image_box),
width = image_box.naturalWidth,
height = image_box.naturalHeight;
if (!verif.has(image)) {
let url = ele.querySelector(search === 'Google Images' ? "div[jsaction]>a" : "a").href,
desc = image_box.getAttribute("alt");
results.push({
image_url: image_url,
source_url: url,
image_base64: image,
description: desc,
width: width,
height: height
});
verif.add(image);
}
updateProgress(results.length, n);
}
return results;
}
// Monitor dynamic input query modifications or switch to another search type for DuckDuckGo
new MutationObserver(async () => {
await wait(100, 200);
if (loc.href !== href) {
loc.reload(true);
}
}).observe(document, {subtree: true, childList: true});
// In-page popup injection
artoo.$('body').append(
'<style>' + styles.join('\n') + '</style>' +
'<div id="BMoverlay">' +
'<h1>SearchEnginesBookmarklets</h1>' +
'<img id="BMlogo" src="https://medialab.github.io/SearchEnginesBookmarklet/images/duckduckgo-google-bing-baidu-256.png" alt="SEB logo" />' +
'<h2>Extract ' + search + '</h2>' +
'<p>Search for « <b id="BMquery">' + decodeURIComponent(query.replace(/\+/g, '%20')) + '</b> »</p>' +
'<p>How many results to collect at most?' +
'<input type="number" id="BMnumber" value="100"></input>' +
'</p>' +
'<p>The page will be automatically expanded until reaching desired number of images.<br/>' +
'You might need to validate some CAPTCHA.</p>' +
'<input class="BMdownload" type="button" value="Start download!"></input>' +
'<div id="BMprogressContainer">' +
'<div id="BMprogressBar"></div>' +
'</div>' +
'<p id="BMprogressText"></p>' +
'<p class="extra">Or search for it on another supported search engine:</p>' +
'<select id="BMdropdown" class="extra"></select>' +
'<input class="BMredirect extra" type="button" value="Redirect Me!"></input>' +
'<p id="BMfooter">Powered by <a target="_blank" href="https://medialab.sciencespo.fr/">médialab Sciences Po</a> – Discover more <a target="_blank" href="https://medialab.sciencespo.fr/en/tools/">médialab tools</a>!</p>' +
'</div>'
);
add_values_dropdown(search);
artoo.$("#BMoverlay .BMdownload").on('click', async function(){
input = document.querySelector('#BMnumber')
const n = parseInt(input.value, 10);
let data = await scrape(n);
updateProgress(data.length, data.length);
saveAs(
new Blob([artoo.writers.csv(data)],
{type: "text/plain;charset=utf-8"}),
search.toLowerCase().replace(" ", "-") + "-results-" + query.replace(" ", "%20") + "-first" + data.length + ".csv"
);
});
artoo.$("#BMoverlay .BMredirect").on('click', async function(){
search_engine = document.querySelector("#BMdropdown").value;
redirect_engine(search_engine, query)
});
});
});
})();