-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
160 lines (155 loc) · 4.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hacklet</title>
<link rel="icon" href="icon.png" type="image/png" />
<link rel="apple-touch-icon" href="icon.png" />
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/terser@5.39.0/dist/bundle.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
<script>
hljs.highlightAll();
</script>
</head>
<body>
<div class="github-mark">
<a href="https://github.com/PianoMan0/hacklet" target="_blank">
<img src="github-mark.svg" alt="GitHub Mark" />
</a>
</div>
<div class="glitch-container">
<h1>Hacklet</h1>
<h1>Embark on a journey to bookmark the future.</h1>
<h3>
Hacklet is a <a href="https://ysws.hackclub.com">YSWS</a> about
Bookmarklets.
</h3>
<h3>Build a bookmarklet, get a domain.</h3>
<a
href="rules.html"
style="display: inline-flex; align-items: center; gap: 5px"
>
<h3 style="margin: 0">The Rules</h3>
</a>
<span
style="
font-size: 0.9em;
color: gray;
display: inline-flex;
align-items: center;
gap: 5px;
"
>
<- click here!</span
>
<br />
<br />
<h2>What is a bookmarklet?</h2>
<p>
A bookmarklet is a small JavaScript program stored as a browser
bookmark. When clicked, it runs code to modify a webpage, extract data,
or perform quick actions.
</p>
<br />
<section
id="bookmarklet-tutorial"
style="padding: 20px; border: 1px solid #ccc"
>
<h2>How to make a Bookmarklet</h2>
<ol>
<li>
Write a JavaScript function to perform the desired task. For
example:
<pre>
<code class="language-js">
javascript:(function() {
alert('Hello, this is a bookmarklet!');
})();
</code>
</pre>
</li>
<li>
Copy the code and prepend it with the `javascript:` prefix. Remove
any newlines or unnecessary spaces.
</li>
<li>
Create a new bookmark in your browser and paste the code as the URL.
</li>
</ol>
<h3>Example Bookmarklet</h3>
<p>
Drag the following link to your bookmarks bar to try an example
bookmarklet:
<a
href="javascript:(function(){alert('Hello, this is a bookmarklet!');})();"
>Click Me!</a
>
</p>
<h3>How to Use Bookmarklets</h3>
<p>
Simply click the bookmarklet from your bookmarks bar while on any
webpage to execute the JavaScript code.
</p>
<img src="ss.png" alt="Example Image" />
</section>
<br />
<br />
<h2>Bookmarklet Tester</h2>
<form id="bookmarklet-form">
<label for="bookmarklet-code"
>Enter your Bookmarklet JavaScript code:</label
>
<textarea id="bookmarklet-code" rows="4" cols="50"></textarea>
<br />
<button type="button" onclick="testBookmarklet()">
Test Bookmarklet
</button>
</form>
<br />
<a
href="https://github.com/pianoman0"
target="_blank"
class="coded-by-pianoman0"
>Coded By PianoMan0</a
>
<p>
With amazing bug fixing by
<a href="https://github.com/isaacfonner">Charmunk</a>,
<a href="https://saahild.com">Neon</a>!
</p>
</div>
<script>
function minifyJS(code) {
try {
const minified = Terser.minify_sync(code).code;
return minified ? "javascript:" + minified : code;
} catch (error) {
alert("Error while minifying code: " + error.message);
return code;
}
}
function testBookmarklet() {
const code = document.getElementById("bookmarklet-code").value;
try {
if (code.trim().startsWith("javascript:")) {
const cleanCode = code.replace("javascript:", "");
console.log(cleanCode, minifyJS(cleanCode));
new Function(cleanCode)();
} else {
throw new Error('Bookmarklet must start with "javascript:"');
}
} catch (error) {
alert("Error in bookmarklet code: " + error.message);
}
}
</script>
</body>
</html>