Skip to content

Commit ee94721

Browse files
uggrockuggrock
committed
added content preview, with switch between full and simplified, added geo tag extraction from gmap
1 parent 6bb38d7 commit ee94721

File tree

3 files changed

+149
-61
lines changed

3 files changed

+149
-61
lines changed

‎src/content-script/capture-selection.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ function getSelectionHtml() {
6767

6868
if (isFirefox) {
6969
browser.runtime.sendMessage({
70-
action: "htmlcontent",
70+
action: "htmlselection",
7171
source: getSelectionHtml()
7272
});
7373
} else {
7474
chrome.runtime.sendMessage({
75-
action: "htmlcontent",
75+
action: "htmlselection",
7676
//source: DOMtoString(document)
7777
source: getSelectionHtml()
7878
});

‎src/content-script/capture-wholepage.js

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import Readability from 'readability';
2020

2121
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
2222

23-
function getCompleteHtml() {
23+
function getCleanedHtml() {
2424
try {
2525
const loc = document.location;
2626
const uri = {
@@ -36,20 +36,19 @@ function getCompleteHtml() {
3636
return extractedContent;
3737
} catch (error) {
3838
console.warn('Error parsing document, sending original content');
39-
let body = document.body.innerHTML;
40-
let head = document.head.innerHTML;
41-
return '<html><head>' + head + '</head><body>' + body + '</body></htlm>';
39+
return undefined;
4240
}
4341
}
4442

45-
if (isFirefox) {
46-
browser.runtime.sendMessage({
47-
action: "htmlcontent",
48-
source: getCompleteHtml()
49-
});
50-
} else {
51-
chrome.runtime.sendMessage({
52-
action: "htmlcontent",
53-
source: getCompleteHtml()
54-
});
43+
function getOriginalHtml() {
44+
let body = document.body.innerHTML;
45+
let head = document.head.innerHTML;
46+
return '<html><head>' + head + '</head><body>' + body + '</body></htlm>';
5547
}
48+
49+
const contentMsg = {
50+
action: "htmlcontent",
51+
cleanedHTML: getCleanedHtml(),
52+
originalHTML: getOriginalHtml()
53+
};
54+
isFirefox ? browser.runtime.sendMessage(contentMsg) : chrome.runtime.sendMessage(contentMsg);

‎src/ui/popup.js

Lines changed: 134 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -37,19 +37,12 @@ let htmlTemplate = '<!DOCTYPE html><html><head><meta charset="UTF-8"><style type
3737
let fileExt;
3838
let currentTabURL;
3939
let currentTabID;
40+
let htmlOriginal;
41+
let htmlCleaned;
42+
let htmlSelection;
43+
let contentMode = 'simplified'; // 'original'
4044
const activeTabQuery = browser.tabs.query({currentWindow: true, active: true });
4145

42-
// Geo locations:
43-
// GMaps: https://www.google.de/maps/@48.1401285,11.5732137,15.25z
44-
// GMaps: https://www.google.de/maps/@-20.8096591,-49.3801033,16z
45-
// OpenStreetMap: https://www.openstreetmap.org/#map=17/48.13504/11.59057
46-
// OpenStreetMap: https://www.openstreetmap.org/#map=16/-20.8077/-49.3785
47-
// Here: https://wego.here.com/?map=-20.80625,-49.37421,16,normal
48-
// Bing: no url param
49-
// https://regexper.com
50-
// RegEx: ^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?)[,/][-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$
51-
// RegEx: ^(\-?\d+(\.\d+)?)[,/](\-?\d+(\.\d+)?)$
52-
5346
function init() {
5447
// console.log('Settings: ' + JSON.stringify(userSettings));
5548

@@ -58,6 +51,7 @@ function init() {
5851
currentTabURL = tab.url;
5952
currentTabID = tab.id;
6053
currentTabURLParser.href = currentTabURL;
54+
extractLatLong();
6155
fileExt = extractFileExtFromUrl();
6256
$('#title').val(tab.title.substring(tab.title.lastIndexOf("/") + 1, tab.title.length));
6357

@@ -74,7 +68,8 @@ function init() {
7468
$("#saveWholePageAsHtml").on("click", saveWholePageAsHTML);
7569
$("#saveScreenshot").on("click", saveScreenshot);
7670
$("#downloadFile").on('click', downloadFile);
77-
71+
$("#simplifiedPreview").on('click', simplifiedPreview);
72+
$("#fullPreview").on('click', fullPreview);
7873

7974
// I18n this panel
8075
$('[data-i18n]').each(function () {
@@ -84,7 +79,57 @@ function init() {
8479
$(this).attr("title", browser.i18n.getMessage($(this).data('i18n-title')));
8580
});
8681

87-
browser.runtime.onMessage.addListener(handleHTMLContent);
82+
browser.runtime.onMessage.addListener(handleHTML);
83+
84+
browser.tabs.executeScript(null, {
85+
file: "content-script-capture-wholepage.dist.js"
86+
}).then(() => {
87+
console.log('Content script injected...');
88+
}, (err) => {
89+
console.warn('Error executing script ' + JSON.stringify(err));
90+
$('#preview').contents().find('html').html('Error while capturing content');
91+
// alert('Error getting content from the current tab.')
92+
// location.reload();
93+
});
94+
95+
browser.tabs.executeScript(null, {
96+
file: "content-script-capture-selection.dist.js"
97+
}).then(() => {
98+
console.log('Content script injected...');
99+
}, (err) => {
100+
console.warn('Error executing script ' + JSON.stringify(err));
101+
$('#preview').contents().find('html').html('Error while capturing content');
102+
// alert('Error getting content from the current tab.')
103+
// location.reload();
104+
});
105+
}
106+
107+
// Geo locations:
108+
// GMaps: https://www.google.de/maps/@48.1401285,11.5732137,15.25z
109+
// GMaps: https://www.google.de/maps/@-20.8096591,-49.3801033,16z
110+
// OpenStreetMap: https://www.openstreetmap.org/#map=17/48.13504/11.59057
111+
// OpenStreetMap: https://www.openstreetmap.org/#map=16/-20.8077/-49.3785
112+
// Here: https://wego.here.com/?map=-20.80625,-49.37421,16,normal
113+
// Bing: no url param
114+
function extractLatLong() {
115+
const regex = new RegExp('@(.*),(.*),');
116+
// const regex = /@(.*),(.*),/gm;
117+
// https://regexper.com
118+
// RegEx: ^[-+]?([1-8]?\d(\.\d+)?|90(\.0+)?)[,/][-+]?(180(\.0+)?|((1[0-7]\d)|([1-9]?\d))(\.\d+)?)$
119+
// RegEx: ^(\-?\d+(\.\d+)?)[,/](\-?\d+(\.\d+)?)$
120+
// alert(currentTabURLParser.href);
121+
if (currentTabURLParser.href) {
122+
const lonLatMatch = currentTabURLParser.href.match(regex);
123+
if (lonLatMatch && lonLatMatch.length > 1) {
124+
let lon = lonLatMatch[1];
125+
let lat = lonLatMatch[2];
126+
if (!lat.startsWith('-')) {
127+
lat = '+' + lat;
128+
}
129+
const geoTag = lon + lat;
130+
$('#tags').val($('#tags').val() + ' ' + geoTag);
131+
}
132+
}
88133
}
89134

90135
function saveAsFile(blob, filename) {
@@ -99,25 +144,51 @@ function saveAsFile(blob, filename) {
99144
}
100145
}
101146

102-
function handleHTMLContent(request) {
147+
function handleHTML(request) {
103148
if (request.action == "htmlcontent") {
149+
// console.log("HTML: " + request.source);
150+
htmlOriginal = request.originalHTML;
151+
htmlCleaned = request.cleanedHTML;
152+
}
153+
if (request.action == "htmlselection") {
104154
// console.log("HTML: " + request.source);
105155
if (request.source.length < 1) {
106-
alert('No content selected....');
107-
return;
156+
// alert('No content selected....');
157+
} else {
158+
htmlSelection = request.source;
108159
}
109-
prepareContentPromise(request.source).then((cleanenHTML) => {
110-
const htmlBlob = new Blob([cleanenHTML], {
111-
type: "text/html;charset=utf-8"
112-
});
113-
saveAsFile(htmlBlob, generateFileName('html'));
114-
$('#saveWholePageAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file');
115-
$('#saveSelectionAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file-text');
116-
}).catch((err) => {
117-
alert('Error by preparing the HTML content...');
118-
location.reload();
119-
console.warn('Error handling html content ' + err);
120-
});
160+
}
161+
if (htmlSelection) {
162+
$('#preview').contents().find('html').html(htmlSelection);
163+
$('#saveWholePageAsHtml').attr("disabled",true);
164+
return;
165+
} else if (htmlCleaned) {
166+
$('#preview').contents().find('html').html(htmlCleaned);
167+
$('#saveSelectionAsHtml').attr("disabled",true);
168+
contentMode = 'simplified';
169+
return;
170+
} else if (htmlOriginal) {
171+
$('#preview').contents().find('html').html(htmlOriginal);
172+
$('#saveSelectionAsHtml').attr("disabled",true);
173+
contentMode = 'original';
174+
return;
175+
} else {
176+
$('#contentModeSwitch').hide();
177+
$('#preview').contents().find('html').html('No content was extracted...');
178+
}
179+
}
180+
181+
function simplifiedPreview() {
182+
if (htmlCleaned) {
183+
contentMode = 'simplified';
184+
$('#preview').contents().find('html').html(htmlCleaned);
185+
}
186+
}
187+
188+
function fullPreview() {
189+
if (htmlOriginal) {
190+
contentMode = 'original';
191+
$('#preview').contents().find('html').html(htmlOriginal);
121192
}
122193
}
123194

@@ -141,29 +212,47 @@ function downloadFile() {
141212

142213
function saveWholePageAsHTML() {
143214
$('#saveWholePageAsHtml i').removeClass('fa-file').addClass('fa-spin fa-circle-o-notch');
144-
const executing = browser.tabs.executeScript(null, {
145-
file: "content-script-capture-wholepage.dist.js"
146-
});
147-
executing.then(() => {
148-
console.log('Content script injected...');
149-
}, (err) => {
150-
console.warn('Error executing script ' + JSON.stringify(err));
151-
alert('Error getting content from the current tab.')
215+
let content = '';
216+
if (contentMode === 'simplified') {
217+
content = htmlCleaned;
218+
} else if (contentMode === 'original') {
219+
content = htmlOriginal;
220+
}
221+
if (content < 1) {
222+
alert('No content extracted....');
223+
return;
224+
}
225+
prepareContentPromise(content).then((convertedHTML) => {
226+
const htmlBlob = new Blob([convertedHTML], {
227+
type: "text/html;charset=utf-8"
228+
});
229+
saveAsFile(htmlBlob, generateFileName('html'));
230+
$('#saveWholePageAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file');
231+
$('#saveSelectionAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file-text');
232+
}).catch((err) => {
233+
alert('Error by preparing the HTML content...');
152234
location.reload();
235+
console.warn('Error handling html content ' + err);
153236
});
154237
}
155238

156239
function saveSelectionAsHTML() {
157240
$('#saveSelectionAsHtml i').removeClass('fa-file-text').addClass('fa-spin fa-circle-o-notch');
158-
const executing = browser.tabs.executeScript(null, {
159-
file: "content-script-capture-selection.dist.js"
160-
});
161-
executing.then(() => {
162-
console.log('Content script injected...');
163-
}, (err) => {
164-
console.warn('Error executing script ' + JSON.stringify(err));
165-
alert('Error getting content from the current tab.')
166-
location.reload();
241+
if (htmlSelection < 1) {
242+
alert('No content selected....');
243+
return;
244+
}
245+
prepareContentPromise(htmlSelection).then((cleanenHTML) => {
246+
const htmlBlob = new Blob([cleanenHTML], {
247+
type: "text/html;charset=utf-8"
248+
});
249+
saveAsFile(htmlBlob, generateFileName('html'));
250+
$('#saveWholePageAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file');
251+
$('#saveSelectionAsHtml i').removeClass('fa-spin fa-circle-o-notch').addClass('fa-file-text');
252+
}).catch((err) => {
253+
alert('Error by preparing the HTML content...');
254+
// location.reload();
255+
console.warn('Error handling html content ' + err);
167256
});
168257
}
169258

0 commit comments

Comments
 (0)