-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
636 lines (636 loc) · 31.5 KB
/
index.html
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="An Extension That Tweak Websites To Better Suit Your Needs." />
<meta name="keywords" content="extension, addon, open source, privacy, security, productivity, sanitize" />
<title>Sanitize - Tame the Web</title>
<link rel="icon" href="./assets/logo.svg" />
<link rel="stylesheet" href="./style.css" media="all" />
</head>
<body>
<header>
<a href="https://redeemedspoon.github.io/Sanitize/">
<img src="./assets/sanitize.svg" alt="Sanitize" height="40px" style="margin-left: 10px" />
</a>
<div id="controls">
<p>↓ Next</p>
<p>↑ Previous</p>
</div>
</header>
<main>
<section id="introduction">
<img src="./assets/logo.svg" alt="Logo" height="100px" />
<h1>Tame the Web, Enhance your Journey.</h1>
<p>
Sanitize is your all-in-one extension for a distraction-free, customized browsing experience. Block
annoyances, focus on content, and tweak websites to fit your needs. <b>It's your web, your way.</b>
</p>
<div class="btn download">
<img src="./assets/download.svg" />
<p>Install Extension</p>
</div>
</section>
<section id="main">
<div id="content">
<h1>Features :</h1>
<hr />
<div id="features">
<div class="part" style="margin-top: 65px">
<img src="assets/features/zen.svg" alt="Zen Mode" />
<h3>Zen Mode</h3>
<p>
Immerse yourself in a distraction-free environment. Text-only view eliminates visual clutter, allowing
you to focus purely on content.
</p>
</div>
<div class="part alt">
<img src="assets/features/freeze.svg" alt="Freeze Mode" />
<h3>Freeze Mode</h3>
<p>
Allow yourself to focus on the content without the fancy stuff. Block completely all interaction with
the website and its content using an overlay.
</p>
</div>
<div class="part">
<img src="assets/features/grayscale.svg" alt="Grayscale Mode" />
<h3>Grayscale Mode</h3>
<p>
Experience a calmer browsing experience with a clean, black and white aesthetic. Perfect for reducing
eye strain and visual distractions.
</p>
</div>
<div class="part alt">
<img src="assets/features/block.svg" alt="Block Annoyances" />
<h3>Blockable Annoyances</h3>
<p>
Take back control! Block unwanted elements like videos, images, and pop-ups that disrupt your
concentration and slow down your browsing.
</p>
</div>
<div class="part">
<img src="assets/features/filters.svg" alt="Personal Filters" />
<h3>Personal Filters</h3>
<p>
Craft your ideal browsing experience. Apply custom Html, Css, or JavaScript filters to personalize the
look and feel of any website.
</p>
</div>
<div class="part alt">
<img src="assets/features/scope.svg" alt="Global/Local Scope" />
<h3>Global/Local Scope</h3>
<p>
Fine-tune your settings. Apply filters and configurations globally across the entire web, or limit them
to the specific website you're currently on.
</p>
</div>
<div class="part">
<img src="assets/features/system.svg" alt="Import/Export System" />
<h3>Import/Export System</h3>
<p>
Seamlessly transfer your preferences across devices. Import and export your settings and filters with a
simple JsON file, ensuring consistency wherever you browse.
</p>
</div>
</div>
<h1>Benefits :</h1>
<hr />
<div id="benefits" style="margin: 50px 25px">
<div class="box">
<img src="./assets/benefits/productivity.svg" alt="Productivity" />
<h2>Productivity</h2>
<p>
Block distractions and unnecessary elements. Enter "Zen" or "Grayscale" mode to minimize visual clutter.
Toggle filters and more. Sanitize make it possible to maximize efficiency.
</p>
</div>
<div class="box">
<img src="./assets/benefits/privacy.svg" alt="Privacy" />
<h2>Privacy</h2>
<p>
Sanitize lets you block intrusive elements and scripts that might collect your information. With
Sanitize, you choose what gets displayed and what stays hidden forever.
</p>
</div>
<div class="box">
<img src="./assets/benefits/security.svg" alt="Security" />
<h2>Security</h2>
<p>
Mitigate potential security risks. Block unwanted content like embedded objects, disable suspicious
fonts that could harbor vulnerabilities and much more.
</p>
</div>
<div class="box">
<img src="./assets/benefits/ease.svg" alt="Ease of Use" />
<h2>Ease of Use</h2>
<p>
Sanitize is designed for simplicity. The intuitive interface allows you to customize your browsing
experience with just a few clicks. We makes it easy to create your own environment.
</p>
</div>
<div class="box">
<img src="./assets/benefits/customization.svg" alt="Customization" />
<h2>Customization</h2>
<p>
Sanitize offers a vast array of customization options. From messing with any elements, fine-tuning Css
to injecting custom Js. We grants you control over what you want to.
</p>
</div>
<div class="box">
<img src="./assets/benefits/minimalism.svg" alt="Minimalism" />
<h2>Minimalism</h2>
<p>
Strip away distractions and create a clean, streamlined browsing experience. Enhance your focus and
reduce cognitive load for a calmer and more productive place.
</p>
</div>
</div>
<h1>Installation :</h1>
<hr />
<div id="installation">
<h2 style="font-size: 30px">Install Sanitize On :</h2>
<div style="scale: 1.1">
<a href="https://chromewebstore.google.com/detail/maiefelibpnamhoebgfbdcmajdcofceo" class="btn">
<img src="./assets/browsers/chrome.svg" />
<p>Chrome</p>
</a>
<a href="https://addons.mozilla.org/en-US/firefox/addon/sanitize/" class="btn">
<img src="./assets/browsers/firefox.svg" />
<p>Firefox</p>
</a>
<a href="https://microsoftedge.microsoft.com/addons/detail/sanitize/dcmjpmbnchkkijnpajcbfmiemimdpigg" class="btn">
<img src="./assets/browsers/edge.svg" />
<p>Edge</p>
</a>
<a href="https://addons.opera.com/en/extensions/details/sanitize/" class="btn">
<img src="./assets/browsers/opera.svg" />
<p>Opera</p>
</a>
</div>
</div>
<h1>How to Use :</h1>
<hr />
<div id="usage">
<ol>
<li>
<h2>1. Popup Settings</h2>
<div>
<p>
After you installed Sanitize, you can click on the popup to the top right of the browser window to
access the popup. There, you can change a multitude of settings so that you can customize your
browsing experience. You will se a list of checkboxes that you toggle on and off. here is what each
one does:
</p>
<ol>
<h3>Filters Fieldset</h3>
<ol>
<li><b>Html : </b>Sanitize will delete stuffs in the current webpage using your Html Filters.</li>
<li><b>Css : </b>Sanitize will add the Css rules you created.</li>
<li><b>Js : </b>Sanitize will inject the Js code you made in the webpage.</li>
</ol>
<h3>Modes Fieldset</h3>
<ol>
<li>
<b>Zen : </b>Take the webpage and transform it into a clean and minimal version similar to a
reader view. it will only keep the text, list and table discarding everything else.
</li>
<li>
<b>Freeze : </b>Stick an invisible overlay to the webpage, make it impossible to interact with
website making it look like it is somewhat frozen.
</li>
<li>
<b>Grayscale : </b>Change the whole color of the webpage to grayscale from images to texts and
videos.
</li>
</ol>
<h3>Dangerous Fieldset</h3>
<ol>
<li>
<b>Disable Css : </b>Disable all Css in the current webpage. Be careful as it will make the
webpage look ugly and unintuitive.
</li>
<li>
<b>Disable Js : </b>Disable all Js in the current webpage. Again Be careful as it will break the
webpage and most of it functionality.
</li>
</ol>
<h3>Block Annoyances Fieldset</h3>
<ol>
<li>
<b>Image : </b>Block all images. This include <img>, <canvas> and <svg> tags.
</li>
<li><b>Video : </b>Block all videos. This include only <video> tags.</li>
<li>
<b>Audio : </b>Block all audios. This include only <audio> tags. It also mutes the whole
tab altogether.
</li>
<li>
<b>Tables : </b>Block all tables. This include <table>, <tr>, <td> and
<caption> tags.
</li>
<li>
<b>Forms : </b>Block all forms. This include <form>, <input>, <button> tags
and many more...
</li>
<li><b>Lists : </b>Block all lists. This include <ul>, <ol> and <li> tags.</li>
<li>
<b>Fonts : </b>Block all external fonts. it will block the requested fonts from being loaded.
</li>
<li>
<b>Links : </b>Disable all links. it will remove the all hyperlinks in the <a> tags from
the webpage.
</li>
<li>
<b>Semantics : </b>Disable all semantic elements. This mean things like bold, italics,
line-height etc...
</li>
<li>
<b>Embedded Objects : </b>Disable all embedded objects. This include <iframe>,
<embed> and <object> tags and some more.
</li>
</ol>
</ol>
</div>
</li>
<li>
<h2>2. Other Optional Settings</h2>
<div>
<p>
Optional Settings are the little icons that you see on the top right of the popup, there button
toggle some other unimportant settings. A setting is disabled if it is grayed out else it is
enabled. The settings are as follows:
</p>
<ol>
<li>
<b>Theme : </b>Change the theme of sanitize to light or dark mode. this affects everything in the
sanitize UI but not the website you are viewing.
</li>
<li>
<b>Show Messages : </b>Show a red box saying "Blocked XYZ" or "🛇" on the blocked element like
images or form depending on your settings.
</li>
<li><b>Activate Sanitize : </b>Activate Sanitize or deactivate it temporarily.</li>
</ol>
</div>
</li>
<li>
<h2>3. Different Scopes</h2>
<div>
<p>
You can change the scope of your settings. This means you the settings will be applied globally or
only on the current website, to be specific the hostname. This allow you to have different settings
for different websites. To change the scope, click on either of the two buttons to the top left of
the popup. The buttons are as follows:
</p>
<ol>
<li><b>Global : </b>Apply this settings globally, meaning on all websites.</li>
<li><b>Local : </b>Apply the settings only on the current website (e.g. www.github.com).</li>
</ol>
</div>
</li>
<li>
<h2>4. Add Filters</h2>
<div>
<p>
A filter is a collection of rules that will be applied to the page. You can add as many as you want.
A filter includes the following:
</p>
<ol>
<li>
<b>Html : </b>Sanitize will delete stuffs in the current webpage using specific selectors (like
#container > div > p or .small-box ...).
</li>
<li>
<b>Css : </b>Sanitize will append new Css rules to the current website to overwrite existing ones.
it can be anything you want to. it should be valid Css and vavoribly contain a !important rule to
correctly overwrite existing rules.
</li>
<li>
<b>Js : </b>Sanitize will inject the Js code to the current website. make sure that the code is
valid and is safe so it won't break the website or your safety.
</li>
</ol>
<p>
Now to create a new filter, click on the "New Filter" button in the popup or on the context menu
(right click) and press "Add New Filter". A popup will show up on the bottom right on the webpage
dimming the background also a bit. There, you can do the following:
</p>
<ol>
<li>
<b>Type : </b>Change the type of filter. You can choose between Html, Css and Js. Html has to be a
Css selector. Css has to be valid Css, same goes for Js.
</li>
<li><b>Scope : </b>Change the scope of the filter to either global or local.</li>
<li><b>Content : </b>Enter the content of the filter in the text area in front of you.</li>
<li>
<b>Pick : </b>Enter Content Selection Mode. With this mode, you can hover over an element and it
will highlight it. click on it to select it. you can also select multiple elements depending on
the selector. Works only for Html filters.
</li>
<li>
<b>Preview : </b>Quickly preview the filter you have written in the text area. It is not permanent
unless you ran some Js code that manipulates the page.
</li>
<li><b>Create : </b>create the filter, then reload the page.</li>
</ol>
</div>
</li>
<li>
<h2>5. View Filters</h2>
<p>
You can view all the filters you have added. You can also edit or delete them. To do that, click on
the "View All Filters" button in the popup. I will load a new tab with all the filters that exist.
they are all listed on the left side of the page. Click on any of them to view the content of it in
the read panel or write panel next to it. You can change the type (Html, Css, Js) by clicking on the
type button on top which will switch to your desired type.
</p>
</li>
<li>
<h2>6. Edit Filters</h2>
<p>
As shown above, you can edit filters. by also clicking on the "View All Filters" button. choose the
filter and it type, to edit the filter content, write the new content in write panel (the one of the
right). and save it for the changes to take effect. Be aware that if you swtitch the type without
saving first, the new you have written content will be lost.
</p>
</li>
<li>
<h2>7. Delete Filters</h2>
<p>
Similar to the other two instruction above, click on the "View All Filters" button. and next the
hostname of the filter list, you will see a cross next to it. click on it to delete the filter on that
hostname. to only delete just a type, not the whole filter, just leave the write panel empty and save
your change.
</p>
</li>
<li>
<h2>8. Reset Everything</h2>
<p>
Click on the popup, then you should see a "Reset Settings" button on the bottom, click it and
everything will be reset from your filters to your config. Use it with caution and make sure to have a
backup first.
</p>
</li>
<li>
<h2>9. Export & Import Configuration</h2>
<p>
Lastly, click on the popup. If you see a "Sync Settings" button, click it to go to the export and
import page. You can also just press the "View All Filters" button and it would still work the same.
After that you should see on top right two buttons, one is "Export Settings" and the other is "Import
Settings". Export settings will prompt you to save your filters as JSON file on your computer. To
import it, just select the saved JSON file after clicking on "Import Settings". Everything will be
imported to the browser storage and you will be able to use sanitize again.
</p>
</li>
</ol>
</div>
<h1>Known Issues :</h1>
<hr />
<div id="issues">
<ul>
<li>
Due to the recent manifest 3 changes forced by Chromium, The Js Filters will no longer work at all on
Chrome, Edge, and Opera. Attempt to solve this issue is on my todo list.
</li>
<li>
If you turn on image or video block, but some of the images or videos are still there, try to hard
reload the website by pressing Ctrl + Shift + R to clear the cache. Otherwise, if this does not work,
then the images or videos are most likely present in an embedded elements like an iframe, which you can
block too by toggling off all embeds.
</li>
<li>
Zen mode is not meant to be used on every website because it will likely pick up junk text or nothing of
interest, so be careful with it. Plus, if you use other settings, such as blocking images or disabling
Css, it will greatly increase the load time of the webpage you are viewing and will likely cause
performance issues.
</li>
<li>
Element selection when adding new filters will not work on some websites, such as YouTube.com, because
of some nonsense and bloat issues. If that is the case, then consider picking the element yourself by
using the browser console (F12) and writing the Css selector to the text area.
</li>
<li>
After you opened the popup to add a new filter but did not create one and closed the popup, you will
have to reload the website to get back all the removed Js, event listeners, and links to continue your
browsing. This allows us to carefully pick the element you clicked on without activating any event or
executing any script.
</li>
<li>
Js previews permanently affect the DOM; this means that if you remove an element from your code in the
text area and decide to preview it, The element will be forever deleted, even after you finish the
preview. and you will have to reload the webpage again.
</li>
<li>
Sanitize will not work on higher pages like 'about:preferences' or 'about:addons' because of the browser
security measures.
</li>
</ul>
</div>
<h1>License :</h1>
<hr />
<div id="license">
<p>
Sanitize is open-source software licensed under the GNU General Public License v3 (GPL-3). This means you
have the freedom to use, modify, and distribute Sanitize for free, as long as you adhere to the terms of
the GPL-3. In essence, the GPL-3 ensures that any modifications you make to Sanitize's code must also be
shared under the same GPL-3 license, promoting transparency and collaboration within the open-source
community.
</p>
</div>
<h1>Contribution :</h1>
<hr />
<div id="contribution">
<p>
Whether you're a seasoned developer or just starting out, there are many ways you can help make Sanitize
even better. Here are some areas where you can contribute:
</p>
<ul>
<li>
<b>Bug Fixes:</b> Found a bug? Let me know! Detailed bug reports on github with clear steps to reproduce
the issue are incredibly helpful to me. The more information you can provide, the faster I can fix the
problem.
</li>
<li>
<b>Feature Requests:</b> Have an idea for a new feature? I'd love to hear it! Submit a feature request
outlining your proposal and the potential benefits it would bring to Sanitize users.
</li>
<li>
<b>Code Contributions:</b> Feeling confident in your coding skills? I encourage you to contribute
directly to Sanitize's codebase. Fork the repository on GitHub, make your changes, and submit a pull
request. I will review and merge them as soon as possible.
</li>
</ul>
<p>
No contribution is too small! Every bit of effort helps Sanitize grow and evolve. I appreciate your
interest in contributing and look forward to collaborating with you! You can find the GitHub repo
<a href="https://github.com/RedeemedSpoon/Sanitize">Here</a>.
</p>
</div>
<h1>Changelog :</h1>
<hr />
<div id="changelog">
<ul>
<li><b>v1.0.3 :</b> Fix concerning extension permissions</li>
<li><b>v1.0.2 :</b> Sanitize now works on all chromium based browsers (Chrome, Edge, and Opera)</li>
<li><b>v1.0.1 :</b> Very minor and unnoticeable change</li>
<li><b>v1.0.0 :</b> Initial release</li>
</ul>
</div>
<h1>Frequently Asked Questions (FAQ) :</h1>
<hr />
<div id="faq">
<div class="question">
<div>
<h2>1. What Is Sanitize?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Sanitize is a browser extension designed to empower you and personalize your web experience. It equips
you with tools to block distractions, enhance privacy, and boost productivity. Take back control of
your online journey and focus on what truly matters.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>2. How To Best Use Sanitize?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
There is not a "best" way to use Sanitize. It is up to you do to whatever you want to do with it.
Identify what elements distract you the most and block or remove them. Experiment with different
features to create a focused and streamlined browsing experience.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>3. Is Sanitize Regularly Updated?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Yes! I'm committed to providing a constantly evolving and improving experience. Regular updates ensure
compatibility with modern browsers, address potential security concerns, and introduce new features to
better serve your needs.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>4. Is Sanitize Free & Open Source?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Yes, Sanitize is open-source software! it's completely free and there is no intent to monetize it in
the future because I believe in the power of Free and Open Source Software (FOSS) and its ability to
foster collaboration and create better products. The code is publicly available, so anyone can
contribute or learn from it including you.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>5. Who Is Behind Sanitize?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
A single anonymous developer, me. I am passionate about creating tools that empower users and improve
the online experience. While I work on it alone for now, I hope to see the project grow with the help
of the community (you).
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>6. Why We Made Sanitize?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
I created Sanitize because, like many others, I struggle with distractions and information overload
online. I wanted a tool that would allow me to customize my browsing experience and focus on what
truly matters. Hopefully, Sanitize can help you achieve the same.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>7. Can We Spy On You?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Absolutely not! Everything runs locally because user privacy is a top priority for Sanitize. The
extension does not collect or track your browsing data or activity in any way. It only requires the
bare minimum set of permissions to function properly. You have complete control over what information
websites can access while using Sanitize.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>8. Are We Going To Support Other Browsers?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Most probably not, to be honestly. Support for shitty or locked browsers, such as Safari, is very
unlikely to happen. Meanwhile, forks such as LibreWolf will be fine, as they use the same technologies
as popular browsers.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>9. How We Can Improve Your Online Journey?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
Sanitize provide you a toolkit for customization and control. By blocking distractions and fine-tuning
webpages, you can streamline your browsing, minimize wasted time, and enhance overall productivity.
Sanitize fosters a focused and mindful approach to navigating the web, allowing you to achieve your
goals with greater efficiency.
</p>
</div>
</div>
<hr />
<div class="question">
<div>
<h2>10. What Are Our Recommendations To Further Improve Your Web Experience?</h2>
<h2 class="arrow">➤</h2>
</div>
<div class="answer">
<p>
For a more secure and focused online journey, consider these tips: combine Sanitize with
privacy-focused extensions like uBlock Origin and Canvas Blocker, use a FOSS browser like Firefox,
explore privacy-oriented search engines like DuckDuckGo, and cultivate mindful browsing habits by
setting time limits and avoiding distractions For better OPSEC.
</p>
</div>
</div>
</div>
<footer>
<p>© Sanitize. Made With Love & Passion</p>
</footer>
</div>
</section>
</main>
<script src="./script.js" async defer></script>
</body>
</html>