Skip to content

Commit 070de63

Browse files
fullstaccfullstacc
authored
Merge pull request #3 from iluvcomputers/browser-extension
Browser extension
2 parents 4be7e55 + e831d00 commit 070de63

7 files changed

Lines changed: 115 additions & 74 deletions

File tree

‎browser-extension/README.md‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,19 @@ First, import the add-on:
1313
3. Click "Load Temporary Add-On"
1414
4. Navigate to your saved `manifest.json` file and click on it
1515

16+
![Install Gif](./images/Install_Fuzzy_Search.gif)
17+
1618
### Using the Extension
1719

18-
1. Navigate to https://www.coursera.org/learn/cs-410/home/welcome
19-
2. Highlight a term you'd like to fuzzy search for
20-
3. Right-click and select "Send to Fuzzy Search"
20+
1. Right-Click on any page in Firefox
21+
2. Click "Fuzzy Search"
22+
3. On the Fuzzy Search page, enter a query you'd like to search for
23+
24+
![Using Fuzzy Search Gif](./images/Using_Fuzzy_Search.gif)
2125

2226
### Required JS files
2327

24-
- background.js: This script is required for the "Send to fuzzy search" context menu option
25-
- query-copy.js: This script is required to copy from the clipboard
26-
- tabs.js: This script is required to paste query data into the results.html page
28+
- background.js: This script is required for the "Fuzzy search" context menu option
29+
- tabs.js: This script is related to the Fuzzy Script page and sends queries/receives responses for the application logic
2730

2831
---

‎browser-extension/images/Install_Fuzzy_Search.gif‎

714 KB
Loading

‎browser-extension/images/Using_Fuzzy_Search.gif‎

392 KB
Loading

‎browser-extension/manifest.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@
1212
},
1313

1414
"content_scripts": [{
15-
"matches": ["<all_urls>"],
16-
"js": ["query-copy.js"]
15+
"matches": ["<all_urls>"]
1716
}],
1817

1918
"permissions": [

‎browser-extension/query-copy.js‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎browser-extension/results.html‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,42 +10,49 @@
1010

1111

1212
<title>Fuzzy Search</title>
13+
14+
15+
<style>
16+
h1 {padding: 10px;
17+
text-align: center;}
18+
td {padding: 10px;
19+
}
20+
21+
</style>
1322
</head>
1423
<body>
24+
<div class="container">
25+
<h1>
26+
Fuzzy Match
27+
</h1>
28+
<hr>
29+
30+
</div>
31+
1532
<div class="container" style="margin-top: 20px;">
1633
<div class="row">
1734
<div class="col-4">
1835
<div class="mb-3">
19-
<label for="exampleFormControlTextarea2" class="form-label">Your Query</label>
20-
<textarea class="form-control" id="query-area" rows="3" > </textarea>
36+
<form id="form">
37+
<label for="query-area">Query</label>
38+
<input type="text" name="Query" id="query-area" value="Enter Your Query Here">
39+
<button type="submit" class="btn btn-primary" id="search-button">Search</button>
40+
</form>
2141
</div>
22-
</div>
23-
</div>
24-
</div>
25-
<!-- end container -->
26-
27-
<div class="container">
28-
<div class="row">
29-
<div class="mb-3">
30-
<button type="button" class="btn btn-primary" id="search-button">Search</button>
42+
</div>
43+
<div class="col-4">
3144
<button type="button" class="btn btn-danger" id="clear-results">Clear Results</button>
32-
</div>
33-
</div>
45+
</div>
46+
</div>
3447
</div>
35-
<!-- end container -->
3648

37-
<div class="container">
38-
<div class="row">
39-
<div class="mb-3">
40-
<label for="exampleFormControlTextarea1" class="form-label">Your Results</label>
41-
<textarea class="form-control" id="results-area" rows="3" readonly> </textarea>
42-
</div>
43-
</div>
44-
</div>
45-
<!-- end container -->
4649

4750
<div class="container" id="landing-area">
4851
<!-- results will go here -->
52+
<table>
53+
<tbody id="tbody"></tbody>
54+
</table>
55+
4956
</div>
5057

5158
<!-- Option 1: Bootstrap Bundle with Popper -->

‎browser-extension/tabs.js‎

Lines changed: 75 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,100 @@
1+
const form = document.querySelector('form');
2+
13
// this function accepts an {object} and returns the contents displayed to the page
24
function displayResults(jsonData) {
5+
// receiving array of objects here
6+
37
// results is an array of n items
4-
let results = jsonData['results'];
8+
let results = jsonData;
59

610
results.forEach((element) => {
711
let item = JSON.stringify(element);
812
// you can now access element.body, element.lecture, element.timestamp, element.week
9-
document.getElementById('results-area').innerText = element.body;
1013

1114
// create a new div area for each element
1215
// insert into that div, elements for each body/lecture/timestamp/week
16+
// create a DOM table
17+
var newTable = document.createElement('table');
18+
newTable.setAttribute('style', 'border-spacing:50px;');
19+
// add the DOM table to the landing-area
20+
document.getElementById('landing-area').appendChild(newTable);
21+
var headerRow =
22+
'<tr> <td> <b> Body </b> </td> <td> <b> Lecture </b> </td> <td> <b> Timestamp </b> </td> <td> <b> Week </b> </td></tr>';
23+
var tr = '<tr>';
24+
tr +=
25+
'<td> ' +
26+
element.body +
27+
'</td>' +
28+
'<td> ' +
29+
element.lecture +
30+
'</td>' +
31+
'<td>' +
32+
element.timestamp +
33+
'</td>' +
34+
'<td>' +
35+
element.week +
36+
'</td>';
37+
38+
document.getElementById('landing-area').lastChild.innerHTML += headerRow;
39+
document.getElementById('landing-area').lastChild.innerHTML += tr;
1340
});
1441
}
1542

1643
function clearResults() {
17-
document.getElementById('results-area').innerText = '';
44+
document.getElementById('landing-area').innerText = '';
1845
}
1946

20-
function sendQuery() {
21-
fetch('http://localhost:5000/test')
47+
function sendQuery(formData) {
48+
// clear search results area before starting a new search
49+
clearResults();
50+
51+
fetch('http://localhost:5000/search', {
52+
method: 'post',
53+
body: formData,
54+
})
2255
.then((response) => {
23-
return response.json();
24-
})
25-
.then((jsonResponse) => {
26-
displayResults(jsonResponse).catch((error) => {
27-
console.log('Error: ' + error);
56+
// this returns a promise
57+
response.json().then((data) => {
58+
// this is an object containing an array of results, which are themselves objects
59+
var resultsData = data.results;
60+
console.log(resultsData);
61+
displayResults(data.results);
2862
});
63+
})
64+
.catch((error) => {
65+
console.log('Error: ' + error);
2966
});
3067
}
3168

32-
console.log('made it to tabs');
33-
// test hitting our local server
34-
fetch('http://localhost:5000/test')
35-
.then(function (response) {
36-
return response.json();
37-
})
38-
.then(function (jsonResponse) {
39-
// displayResults(jsonResponse);
40-
console.log('do nothing');
41-
})
42-
.catch(function (error) {
43-
console.log('Error: ' + error);
44-
});
69+
function handleSubmit(event) {
70+
// Prevent the default submission
71+
event.preventDefault();
72+
73+
// Log the serialized data
74+
console.log(serializeObject(this));
4575

46-
// add event listener for Search button
47-
document.getElementById('search-button').addEventListener('click', sendQuery);
76+
// Alert the user
77+
alert('Check the console.');
78+
}
79+
80+
// add event listener for Clear Results button
4881
document
4982
.getElementById('clear-results')
5083
.addEventListener('click', clearResults);
84+
85+
// add event listener for query form
86+
document.getElementById('form').addEventListener('submit', function (e) {
87+
e.preventDefault();
88+
89+
// create formData object
90+
const formData = new FormData(this);
91+
92+
// jsonify the query to send to the server
93+
var object = {};
94+
formData.forEach(function (value, key) {
95+
object[key] = value;
96+
});
97+
var json = JSON.stringify(object);
98+
99+
sendQuery(json);
100+
});

0 commit comments

Comments
 (0)