Skip to content

Commit

Permalink
upgrade to manifest 3, prep for translation, and add json download
Browse files Browse the repository at this point in the history
  • Loading branch information
Ericka Menchen Trevino committed Aug 6, 2022
1 parent 45291fd commit 6a6a354
Show file tree
Hide file tree
Showing 14 changed files with 935 additions and 94 deletions.
742 changes: 742 additions & 0 deletions _locales/en/messages.json
View file

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions background.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
importScripts("service-worker.js");


//TODO:
/**
*
*/

// service worker invocation stuff
service_worker_invoke();
// setTimeout(sync_profile, 5000);

// configure listeners for browser startup and extension install
chrome.runtime.onStartup.addListener(service_worker_invoke);
chrome.runtime.onInstalled.addListener(async () => {

const tab = await chrome.tabs.create({
url: 'index.html'
});

await service_worker_invoke();
});

// run on startup
async function service_worker_invoke() {



}
56 changes: 5 additions & 51 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<!--
Copyright (C) 2018 Ericka Menchen-Trevino & contributors, info@webhistorian.org
Copyright (C) 2015-2022 Ericka Menchen-Trevino & contributors, info@webhistorian.org
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
Expand Down Expand Up @@ -46,7 +46,7 @@
</div>
<div id="navbar" style="display: none;">
<ul class="nav navbar-nav navbar-right">
<li id="nav_txt"><span class="navbar-brand"><p style="display: inline-block;">Navigation: </p></span></li>
<li id="nav_txt"><span class="navbar-brand"><p style="display: inline-block;"> </p></span></li>
<li id="nav_home"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Home" id="home"><span class="glyphicon glyphicon-home"></span></a></li>
<li id="nav_sites_visited"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Web Visits" id="web_visit"><span class="glyphicon glyphicon-globe"></span></a></li>
<li id="nav_search_terms"><a href="#" data-toggle="tooltip" data-placement="bottom" title="Search Terms" id="search_words"><span class="glyphicon glyphicon-search"></span></a></li>
Expand Down Expand Up @@ -91,7 +91,7 @@ <h2>Right-click for many important features.</h2></center>
<div id="visual_div"></div>
</div>
<div id="below_visual"></div>
<div id="footer" style="display: none;"><hr><p>For more information about Web Historian or to join our mailing list visit <a href="http://webhistorian.org" target="blank">http://webhistorian.org</a>.</p></p></div>
<div id="footer" style="display: none;"><hr></div>
</div>


Expand All @@ -109,56 +109,10 @@ <h4 class="modal-title">Your Identifier</h4>
</div>
</div>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id="mailing_list_modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Subscribe to our newsletter</h4>
</div>
<div class="modal-body" id="ml-body">

<p>Occasional updates &amp; offers every few months.</p>
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form action="https://webhistorian.us10.list-manage.com/subscribe/post?u=cfe106c4d74667df0e62d95ff&amp;id=b65d35d432" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">

<div class="indicates-required" style="color: #939393; font-size: small;"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL" style="color: #939393;">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME" style="color: #939393;">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME" style="color: #939393;">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_cfe106c4d74667df0e62d95ff_b65d35d432" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>

<!--End mc_embed_signup-->

</div>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="back" style="display: none;">Close</button>
</div>
</div>
</div>
</div>

<script src="js/app/localize.js"></script>
</body>

</html>
6 changes: 3 additions & 3 deletions js/app/chrome.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// When the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.browserAction.onClicked.addEventListener(function(tab) {
//Look to see if the extension page is open already and if not, open it.

var optionsUrl = chrome.extension.getURL('index.html');
Expand All @@ -8,7 +8,7 @@ chrome.browserAction.onClicked.addListener(function(tab) {
var found = false;

for (var i = 0; i < extensionTabs.length; i++) {
if (optionsUrl == extensionTabs[i].url) {
if (optionsUrl === extensionTabs[i].url) {
found = true;
console.log("tab id: " + extensionTabs[i].id);
chrome.tabs.update(extensionTabs[i].id, {
Expand All @@ -17,7 +17,7 @@ chrome.browserAction.onClicked.addListener(function(tab) {
}
}

if (found == false) {
if (found === false) {
chrome.tabs.create({
url: "index.html"
});
Expand Down
49 changes: 30 additions & 19 deletions js/app/history.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ define(["moment", "app/config", "app/utils"], function (moment, config, utils)
if (catStored === null){
var cats = [];
$("#progress_bars").html("<h1>One moment please...</h1><p>Fetching website categories.</p>");
$.getJSON(config.categoriesUrl, function (cat) {
$.getJSON(config.categoriesUrl, function (cat) {
for (var j in cat.children) {
cats.push({search: cat.children[j]["search"], category: cat.children[j]["category"], value: cat.children[j]["value"]});
}
Expand Down Expand Up @@ -510,40 +510,41 @@ define(["moment", "app/config", "app/utils"], function (moment, config, utils)
topDomainLwD = "the same";
}
else { topDomainLwD = "<strong><a href=\"http://" + topDomainLw + "\" target=\"_blank\">" + topDomainLw + "</a></strong>";}


//var seStored = JSON.parse(sessionStorage.getItem('se'));
var dataStartDate = history.fullData[0].date; //seStored[0].start;

var weekInReview = "<h3>Week in review</h3><p>This week (" + aStart + " to " + aEnd + ")" + " you browsed the web <strong>" + percent + "% " + percentML + "</strong> last week (" + bStart + " to " + bEnd + ").</p> <p>The website you visited the most this week was <strong><a href=\"http://"+ topDomainTw +"\" target=\"_blank\">" + topDomainTw + "</a></strong>. It was " + topDomainLwD + " last week. For more details on web site visits see the Web Visits visual <span class=\"glyphicon glyphicon-globe\"></span></p> <p>The search term you used the most this week was <strong>"+ topTermTw +"</strong></div>. It was "+ topTermLwD +" last week. For more details on search term use see the Search Terms visual <span class=\"glyphicon glyphicon-search\"></span></p> ";
var weekInReview = "<h3>Week in review</h3><p>This week (" + aStart + " to " + aEnd + ")" + " you browsed the web <strong>" + percent + "% " + percentML + "</strong> last week (" + bStart + " to " + bEnd + ").</p> <p>The website you visited the most this week was <strong><a href=\"http://"+ topDomainTw +"\" target=\"_blank\">" + topDomainTw + "</a></strong>. It was " + topDomainLwD + " last week. For more details on web site visits see the Web Visits visual <span class=\"glyphicon glyphicon-globe\"></span></p> <p>The search term you used the most this week was <strong>"+ topTermTw +"</strong></div>. It was "+ topTermLwD +" last week. For more details on search term use see the Search Terms visual <span class=\"glyphicon glyphicon-search\"></span></p>";
//Your central jumping-off point for browsing the web this week was * this week. It was * last week.
//of the # websites you visited over the past # days, you visited * the most, but you visited * on the most different days.

var notEnoughData = "<h3>Week in Review</h3><p>The week in review compares this week's web browsing to the previous week. To see the week in review feature you can keep browsing in Chrome witout clearing your history until you have 14 days of browsing. If you changed the dates you are viewing with the calendar, just expand the range between the start and end date to 14 days or more.</p>";
var dl_data = "<h3>Download your browsing data</h3> <p><button id=\"dl_json\">Download JSON</button></p>"
var notEnoughData = "<h3>Week in Review</h3><p>The week in review compares this week's web browsing to the previous week. To see the week in review feature you can keep browsing in Chrome witout clearing your history until you have 14 days of browsing. If you changed the dates you are viewing with the calendar, just expand the range between the start and end date to 14 days or more.</p> <h3>Download your browsing data</h3> <p><button id=\"dl_json\">Download JSON</button></p>";
var offline = "<div class='alert alert-warning'><p><span class='glyphicon glyphicon-wrench' aria-hidden='true'></span> Your browser is offline. Web Historian will function, but web site categories may be limited to 'Other' until you are online and reload the extension.</p></div>";

var weekHtml = "";
$("#footer").show();

if (lastUlD === "Never" && weekData.weekBstart >= dataStartDate) {
$("#research").show();
if(online===1){ weekHtml = weekInReview; }
else { weekHtml = offline + weekInReview; }
if(online===1){ weekHtml = weekInReview + dl_data; }
else { weekHtml = offline + weekInReview + dl_data; }
//console.log("Never uploaded, more than 1 week data");
}
else if (lastUlD === "Never" && weekData.weekBstart < dataStartDate) {
$("#research").show();
if(online===1) { weekHtml = notEnoughData; }
else { weekHtml = offline + notEnoughData; }
if(online===1) { weekHtml = notEnoughData + dl_data; }
else { weekHtml = offline + notEnoughData + dl_data; }
//console.log("Never uploaded, less than 1 week data");
}
else if (svyEndType === 0 && weekData.weekBstart >= dataStartDate){
if(online===1) { weekHtml = weekInReview; }
else { weekHtml = offline + weekInReview; }
if(online===1) { weekHtml = weekInReview + dl_data; }
else { weekHtml = offline + weekInReview + dl_data; }
//console.log("Refused or not qualified, more than 1 week data");
}
else if (svyEndType === 0 && weekData.weekBstart < dataStartDate){
if(online===1) { weekHtml = notEnoughData; }
else { weekHtml = offline + notEnoughData; }
if(online===1) { weekHtml = notEnoughData + dl_data; }
else { weekHtml = offline + notEnoughData + dl_data; }
//console.log("Refused or not qualified, less than 1 week data");
}
else if (lastUlD !== "Never" && svyEndType === null){
Expand All @@ -553,34 +554,44 @@ define(["moment", "app/config", "app/utils"], function (moment, config, utils)
$("#research").html("<br/><br/><div class='alert alert-danger'><h3><span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span> Please complete your survey for the research project 'Understanding Access to Information Online and in Context.': " + link + "</h3><p>You will pick up right where you left off. When you have finished the survey you can <a href=''>reload</a> to remove this message.</div><br/><br/><br/>");
}
else {
weekHtml = offline + weekInReview;
weekHtml = offline + weekInReview + dl_data;
}
}
else if (lastUlD !== "Never" && svyEndType === 1 && weekData.weekBstart >= dataStartDate) {
$("#nav_review").show();
//console.log("Uploaded and finished, more than 1 week data");
if(online===1)
weekHtml = weekInReview + thanks;
weekHtml = weekInReview + thanks + dl_data;
else
weekHtml = offline + weekInReview + thanks;
weekHtml = offline + weekInReview + thanks + dl_data;
}
else if (lastUlD !== "Never" && svyEndType === 1 && weekData.weekBstart < dataStartDate) {
$("#nav_review").show();
//console.log("Uploaded and finished survey, less than 1 week data");
if(online===1)
weekHtml = notEnoughData + thanks;
weekHtml = notEnoughData + thanks + dl_data;
else
weekHtml = offline + notEnoughData + thanks;
weekHtml = offline + notEnoughData + thanks + dl_data;
}
else { $("#research").show(); console.log("Upload, survey amount of days, and online status condition not a specified condition"); };

return weekHtml;
});
function download(content, fileName, contentType) {
const a = document.createElement("a");
const file = new Blob([content], { type: contentType });
a.href = URL.createObjectURL(file);
a.download = fileName;
a.click();
}
$("#dl_json").click(function(){
download(JSON.stringify(history.fullData), "web_historian_data.json", "text/plain");
});
};

//insert the code for the cards, but doesn't display them (display: none)
history.insertCards = function (){
$("#cards").html("<div id=\"research\" style=\"display: none;\"><h3>Using Web Historian </h3><p>The browser's 'back' button will not navigate within Web Historian, please use the navigation icons at the top right to explore your visualizations.</p> </div><div class=\"row\" id=\"viz_selector\" style=\"display: none;\"> <div class=\"col-sm-6 col-md-3\"> <a id=\"web_visit_card\"> <div class=\"thumbnail\"> <img src=\"images/visit.png\" alt=\"Web Visits\" /> <div class=\"caption\"> <h3>Web Visits</h3> <p> Circles sized by number of days a site was visited, or total visits to the site. </p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"search_words_card\"> <div class=\"thumbnail\"> <img src=\"images/wordCloud.png\" alt=\"Search Words\" /> <div class=\"caption\"> <h3>Search Terms</h3> <p> Words used in multiple web searches are larger. &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"network_card\"> <div class=\"thumbnail\"> <img src=\"images/network.png\" alt=\"Network\" /> <div class=\"caption\"> <h3>Network</h3> <p> Links between websites browsed from - to. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"time_card\"> <div class=\"thumbnail\"> <img src=\"images/time.png\" alt=\"Time\" /> <div class=\"caption\"> <h3>Time Heatmap</h3> <p> Hours of the day and days of the week when you browse the web the most. </p> </div> </div> </a> </div>");
$("#cards").html("<div id=\"research\" style=\"display: none;\"> </div><div class=\"row\" id=\"viz_selector\" style=\"display: none;\"> <div class=\"col-sm-6 col-md-3\"> <a id=\"web_visit_card\"> <div class=\"thumbnail\"> <img src=\"images/visit.png\" alt=\"Web Visits\" /> <div class=\"caption\"> <h3>Web Visits</h3> <p> Circles sized by number of days a site was visited, or total visits to the site. </p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"search_words_card\"> <div class=\"thumbnail\"> <img src=\"images/wordCloud.png\" alt=\"Search Words\" /> <div class=\"caption\"> <h3>Search Terms</h3> <p> Words used in multiple web searches are larger. &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;</p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"network_card\"> <div class=\"thumbnail\"> <img src=\"images/network.png\" alt=\"Network\" /> <div class=\"caption\"> <h3>Network</h3> <p> Links between websites browsed from - to. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p> </div> </div> </a> </div> <div class=\"col-sm-6 col-md-3\"> <a id=\"time_card\"> <div class=\"thumbnail\"> <img src=\"images/time.png\" alt=\"Time\" /> <div class=\"caption\"> <h3>Time Heatmap</h3> <p> Hours of the day and days of the week when you browse the web the most. </p> </div> </div> </a> </div>");
};

//Putting it all together
Expand Down Expand Up @@ -618,7 +629,7 @@ define(["moment", "app/config", "app/utils"], function (moment, config, utils)
var today = new Date().getDay();
var instDay = new Date(installTime).getDay();
if (instDay === today && leaveOnce === 0 && subscribed !== 'true') {
$("#mailing_list_modal").modal("show");
//$("#mailing_list_modal").modal("show");
leaveOnce = 1;
}
});
Expand Down
2 changes: 1 addition & 1 deletion js/app/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ define(["app/utils", "moment", "app/history"], function(utils, moment, history)

$('[data-toggle="tooltip"]').tooltip();


visualization.homeClicks = function() {
$("#data_table_card").click(function() {
goDataTable();
Expand All @@ -138,7 +139,6 @@ define(["app/utils", "moment", "app/history"], function(utils, moment, history)
visualization.homeClicks();
$('#viz_selector').show();
history.compareWeekVisits(endDate, filteredData, history.wir);

};
return visualization;
});
17 changes: 17 additions & 0 deletions js/app/localize.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
function localizeHtmlPage() {
//Localize by replacing __MSG_***__ meta tags
var objects = document.querySelectorAll('[data-i18n]');
for (var j = 0; j < objects.length; j++) {
var obj = objects[j];

var valStrH = obj.innerHTML.toString();
var msg = obj.getAttribute('data-i18n').replace(/(__MSG_)/, '').replace(/(__)/, '');
var valNewH = chrome.i18n.getMessage(msg) || valStrH;

if (valNewH != valStrH) {
obj.innerHTML = valNewH;
}
}
}

localizeHtmlPage();
Loading

0 comments on commit 6a6a354

Please sign in to comment.