-
Notifications
You must be signed in to change notification settings - Fork 1
/
listener2.js
179 lines (143 loc) · 6.08 KB
/
listener2.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
// called in listener.js for consolidating all the functions that are called
// when the script is run --> working
// seems like jquery isn't particularly favored in asynchronous calls
/*
UI Functions
Format
******************
** File_in_extension || First_function_called
First_function_called_by_first
(corresponding reading ....
in Google Extension Last_function_called_by_first
Documentation or
brief explanation of
what the part is doing)
Second_function_called
First_function_by_second
....
Last_Function_called_by_second
Third
...
** Next File_ || ...
...
*******************
Indentation indicates the Scope of the functions
Functions on same indentation level lives in the same Scope
(I) WHEN PAGE HAS CHANGED (ASYNCHRONOUSLY/SYNCHRONOUSLY) --> Defined as Local Change
Involved parts: listener.js, listener2.js, background.js
***************
** listener.js || Inject_Div function
Create_UI--> base frame created by Justin/Stefan
initialize_button_ui (Renamed to detButtonCreation)
** listener2.js || initialize_button_ui --> (i) get localStorage data from the extension, then (ii) create or NOT create Button UI
(logic)
** background.js|| messageListener --> responds with a dictionary {'option' : persistent | choice}
(message passing)
** listener2.js || create_button_ui --> Helper function that creates actual HTML elements
(actual UI change)
** listener.js || Inject Div injects the 'target'
***************
(II) PAGE HAS NOT CHANGED (i.e. user is contemplating to change the Global Behavior) --> Defined as Global Change
Involved parts: popup.js, listener2.js
******************
** popup.js || storeLocal --> when the user clicks the radiobutton and saves
(message passing) sendTabId --> gets the Id of the TAB which gmail is loaded (note: asynchronous)
sendMessage --> actually sends the message to content_script listener2.js
** listener2.js || changeParse --> Event Listener to Message Passing
(message passing)
(UI change) changeOption --> actually deletes the UI if necessary
******************
*/
// ASYNCHRONOUS FUNCTIONS !!!! (sendMessage)
// Currently Listener Problem (Port Establishment) --> Resolved (Listener creation timing issue)
function changeParse() {
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
var new_option;
// We can do something like this b/c we know
// we will always get new_option parameter, if a request is sent
new_option = request.new_option;
// We want to change Option whenever we receive a message
changeOption(new_option)
}
);
}
// This function really belongs in this javascript file
// since the button UI creation is really determined by the Option set by user
function changeOption(option) {
// we want to delete the button_ui if the option is not persistent
if (option === 'persistent') {
delete_button_ui();
} else {
recreate_button_ui();
}
}
// Renaming initialize_button_ui to something else
function detButtonCreation(target_div, query_type) {
// Function takes no input and outputs True if the initial extension option is choice
// meaning that we would like to create the button (hence True)
// Else, the choice must be persistent and thus we don't want the button
chrome.extension.sendMessage({question:'tellme'}, function(response) {
// True here means that we want the button ui to be created
// Note that when first called after installation(meaning response.answer === undefined)
// The button ui is still going to be created
// Boolean really doesn't work because sendMessage is asynchronous
if (response.answer !== 'persistent') {
if (query_type === 'initialize') {
create_button_ui(target_div);
} else if (query_type === 'afterCall') {
delete_button_ui();
}
}
});
}
// For recreating/deleting button ui, because we are using asynchronous calls, let's make sure that
// deleting/recreating happens only Once
function delete_button_ui() {
var buttonEle = document.getElementById('lazytruth-button');
if (buttonEle) {
var parentNode = buttonEle.parentNode;
buttonEle.removeEventListener('click', body_log, false);
parentNode.removeChild(buttonEle);
}
}
// recreationg doesn't seem to be working too well
// Javascript console freezes --> which means infinite loop
// or something unusual --> can reuse console after loading/reloading
function recreate_button_ui() {
var contextualExt = document.getElementById(':rr').getElementsByClassName('contextual_extension')[0];
var len = contextualExt.childNodes.length -1;
if (contextualExt.childNodes[len].id !=='lazytruth-button') {
create_button_ui(contextualExt);
}
}
// Google Analytics
function trackButtonClick(e) {
console.log("Attempting button click log");
chrome.extension.sendMessage({buttonClick: e.target.id}, function(response) {
console.log(response.answer);
});
};
function trackButtonImpression(e) {
console.log("Attempting button impression log");
chrome.extension.sendMessage({buttonImpression: e.target.id}, function(response) {
console.log(response.answer);
});
}
function create_button_ui(new_div) {
//Intially new_div is created below, but modified code so that
// I can add the button ui on top of the existing UI
// Initially commented out the extraction part
//var new_div = document.createElement('div');
// Button for testing fetching the body of the email
body_fetcher = document.createElement('BUTTON');
body_fetcher.setAttribute('id', 'lazytruth-button');
//body_fetcher.setAttribute('style', 'padding:0.5em;background-color:#A7C3D3');
body_fetcher.setAttribute('alt', 'Click to check LazyTruth for information about this email');
button_text = document.createTextNode('Ask LazyTruth');
body_fetcher.appendChild(button_text);
body_fetcher.addEventListener("click", body_log);
$(body_fetcher).click(trackButtonClick);
$(body_fetcher).bind("buttonImpression", trackButtonImpression);
new_div.appendChild(body_fetcher);
}