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
|
window.addEventListener('focus', () => {
browser.runtime.sendMessage({hostname: location.hostname});
});
let hasShownCreateTrack = false;
browser.runtime.onMessage.addListener(({createTrack}) => {
if (createTrack) {
if (hasShownCreateTrack) {
return;
}
hasShownCreateTrack = true;
const container = document.createElement('div')
document.body.appendChild(container);
Object.assign(container.style, {
all: 'initial',
position: 'fixed',
left: '0',
top: '0',
width: '100%',
height: '100%',
padding: '10px',
boxSizing: 'border-box',
zIndex: '99999999999',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
lineHeight: '2em',
fontFamily: 'Helvetica, Arial, sans-serif',
backgroundColor: 'rgba(105, 105, 105, 0.5)'
});
const div = document.createElement('div');
container.appendChild(div);
Object.assign(div.style, {
width: '50%',
height: '50%',
padding: '10px',
boxSizing: 'border-box',
backgroundColor: '#EEEEEE',
border: '2px solid black',
borderRadius: '4px',
boxShadow: '0 0 8px rgba(0, 0, 0, 0.5)',
zIndex: '99999999999',
minHeight: '120px',
minWidth: '200px'
});
const h1 = document.createElement('div');
div.appendChild(h1);
h1.appendChild(document.createTextNode('Create Track'));
Object.assign(h1.style, {
textAlign: 'center',
fontWeight: '800',
marginBottom: '8px'
});
const form = document.createElement('form');
div.appendChild(form);
const nameLabel = document.createElement('nameLabel');
form.appendChild(nameLabel);
nameLabel.appendChild(document.createTextNode('Name: '));
const nameInput = document.createElement('input');
nameLabel.appendChild(nameInput);
nameInput.type = 'text';
nameInput.required = true;
form.appendChild(document.createElement('br'));
const fileLabel = document.createElement('label');
form.appendChild(fileLabel);
fileLabel.appendChild(document.createTextNode('File: '));
const fileInput = document.createElement('input');
fileLabel.appendChild(fileInput);
fileInput.type = 'file';
fileInput.required = true;
form.appendChild(document.createElement('br'));
const submitInput = document.createElement('input');
form.appendChild(submitInput);
submitInput.type = 'submit';
submitInput.value = 'Save';
form.addEventListener('submit', event => {
event.preventDefault();
const trackName = nameInput.value;
const reader = new FileReader();
reader.onload = () => {
browser.storage.sync.get('tracks').then(({tracks}) => {
browser.storage.sync.set({tracks: tracks.concat([trackName])});
});
const base64 = reader.result.split(',')[1];
const mime = reader.result.split(',')[0].split(';')[0];
browser.runtime.sendMessage({type: 'uploadTrack', base64, trackName}).then(() => {
document.body.removeChild(container);
});
};
reader.readAsDataURL(fileInput.files[0]);
submitInput.value = 'Saving...';
submitInput.disabled = true;
});
}
});
|
