Pop-up dictionary browser extension for language learning. Successor to Yomichan. (PERSONAL FORK)
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1">
6 <title>Quick Start Guide</title>
7 <link rel="icon" type="image/png" href="/images/icon16.png" sizes="16x16">
8 <link rel="icon" type="image/png" href="/images/icon19.png" sizes="19x19">
9 <link rel="icon" type="image/png" href="/images/icon32.png" sizes="32x32">
10 <link rel="icon" type="image/png" href="/images/icon38.png" sizes="38x38">
11 <link rel="icon" type="image/png" href="/images/icon48.png" sizes="48x48">
12 <link rel="icon" type="image/png" href="/images/icon64.png" sizes="64x64">
13 <link rel="icon" type="image/png" href="/images/icon128.png" sizes="128x128">
14 <link rel="stylesheet" type="text/css" href="/css/material.css">
15 <link rel="stylesheet" type="text/css" href="/css/settings.css">
16 <script src="/js/pages/generic-page-main.js" type="module"></script>
17</head>
18<body hidden>
19
20<!-- Main content -->
21<div class="content-outer"><div class="content scrollbar">
22<div class="content-left"></div>
23<div class="content-center">
24
25 <span tabindex="-1" id="content-scroll-focus"></span>
26
27 <h1>Yomitan Quick Start Guide</h1>
28
29 <!-- Content -->
30 <h2>Quick Actions</h2>
31
32 <div class="settings-group">
33 <div class="settings-item">
34 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
35 Clicking the <img src="/images/yomitan-icon.svg" class="inline-icon" alt=""> <em>Yomitan</em> button in the browser bar will open the quick-actions popup.
36 </div></div></div>
37 <div id="action-popup-container">
38 <img id="action-popup" src="/images/browser-action-popup.webp" alt="browser-action-popup">
39 <div class="settings-item-children settings-item-children-group">
40 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
41 The <img src="/images/cog.svg" class="inline-icon" alt=""> <em>cog</em> button will open the <a href="/settings.html" target="_blank" rel="noopener">Settings</a> page.
42 </div></div></div></div>
43 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
44 The <img src="/images/magnifying-glass.svg" class="inline-icon" alt=""> <em>magnifying glass</em> button will open the <a href="/search.html" target="_blank" rel="noopener">Search</a> page,
45 enabling text and terms to be looked up using the installed dictionaries.
46 This can even be used in offline mode!
47 </div></div></div></div>
48 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
49 The <img src="/images/question-mark-circle.svg" class="inline-icon" alt=""> <em>question mark</em> button will open the <a href="/info.html" target="_blank" rel="noopener">Information</a> page,
50 which has some helpful information and links about Yomitan.
51 </div></div></div></div>
52 </div>
53 </div>
54 </div>
55 </div>
56
57 <h2>Installing Dictionaries</h2>
58
59 <div class="settings-group">
60 <div class="settings-item">
61 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
62 Yomitan requires one or more dictionaries to be installed in order to look up terms, kanji, and other information.
63
64 <br><br>
65
66 To get started, first select your desired language in the <a href="/settings.html#general" rel="noopener">Settings</a> page.
67 Then, click on <i>Get recommended dictionaries</i> under the <a href="/settings.html#dictionaries" rel="noopener">Dictionaries</a> section to find dictionaries for your language.
68 You can also visit <a href="https://yomitan.wiki/dictionaries/" target="_blank" rel="noopener noreferrer">Yomitan Wiki</a> to learn more about Yomitan dictionaries.
69 Once downloaded, dictionaries can be configured and managed from the same <a href="/settings.html#dictionaries" rel="noopener">Settings</a> page.
70
71 <br><br>
72
73 <img class="quick-start-img" src="/images/settings-dictionaries-popup.webp" alt="settings-dictionaries-popup">
74
75 </div></div></div>
76 </div>
77 </div>
78
79
80 <h2>Scanning Text</h2>
81
82 <div class="settings-group">
83 <div class="settings-item">
84 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
85 After dictionaries have been installed, webpage text can be scanned by moving the cursor while holding a modifier key.
86 The default key is <kbd>Shift</kbd>, which can be disabled or configured in the <a href="/settings.html#backup">Settings</a> page.
87 </div></div></div>
88
89 <img class="quick-start-img" src="/images/scanning-popup.webp" alt="scanning">
90
91 <div class="settings-item-children settings-item-children-group">
92 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
93 Clicking the <img src="/images/play-audio.svg" class="inline-icon" alt=""> <em>speaker</em> button of an entry in the search results
94 will play an audio clip of a term's pronunciation using an online dictionary, if available.
95 </div></div></div></div>
96 <div class="settings-item"><div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
97 Clicking on a kanji character in a term's definition will show additional information about that character.
98 <span class="light">(Requires a kanji dictionary to be installed.)</span>
99 </div></div></div></div>
100 </div>
101 </div>
102 </div>
103
104 <h2>Migrating to Yomitan</h2>
105
106 <div class="settings-group">
107 <div class="settings-item">
108 <div class="settings-item-inner"><div class="settings-item-left"><div class="settings-item-label">
109 You can also import an exported collection of dictionaries from the <a href="/settings.html#backup">Backup section of the Settings</a> page.
110
111 <br><br>
112
113 If you are migrating from Yomichan, you may be interested in importing your data into Yomitan.
114 Please follow instructions from <a href="https://yomitan.wiki/yomichan-migration/#migrating-from-yomichan" target="_blank" rel="noopener noreferrer">Yomitan Wiki</a> for that.
115
116 <br><br>
117
118 If you are using or planning to use custom templates for Anki note creation, note that <a href="https://yomitan.wiki/yomichan-migration/#custom-templates" target="_blank" rel="noopener noreferrer">some syntax has changed from Yomichan and Yomibaba.</a>
119 Please ensure that your custom templates are using the updated syntax.
120 </div></div></div>
121 </div>
122 </div>
123
124 <h2>Links</h2>
125
126 <div class="settings-group">
127 <a href="/welcome.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
128 <div class="settings-item-left">
129 <div class="settings-item-label">Go to Welcome page</div>
130 </div>
131 <div class="settings-item-right open-panel-button-container">
132 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
133 </div>
134 </div></a>
135 <a href="/info.html" rel="noopener" class="settings-item settings-item-button"><div class="settings-item-inner">
136 <div class="settings-item-left">
137 <div class="settings-item-label">Go to Info page</div>
138 </div>
139 <div class="settings-item-right open-panel-button-container">
140 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
141 </div>
142 </div></a>
143 <a href="https://yomitan.wiki/" rel="noopener noreferrer" class="settings-item settings-item-button"><div class="settings-item-inner">
144 <div class="settings-item-left">
145 <div class="settings-item-label outer-link"><strong>New to Yomitan? Head to Yomitan Wiki!</strong></div>
146 </div>
147 <div class="settings-item-right open-panel-button-container">
148 <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
149 </div>
150 </div></a>
151 </div>
152
153 <div class="footer-padding"></div>
154
155</div>
156<div class="content-right"></div>
157</div></div>
158</body>
159</html>