help.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>SingleFile help</title>
  6. <link rel="stylesheet" href="help.css">
  7. <meta name="viewport" content="width=device-width,initial-scale=1">
  8. </head>
  9. <body>
  10. <div>
  11. <div id="titleBorder">
  12. <h2>SingleFile</h2>
  13. <h4>Save a complete page into a single HTML file</h4>
  14. </div>
  15. <span id="index">
  16. <a href="#getting-started">Getting started</a> -
  17. <a href="#general-notes">Additional notes</a> -
  18. <a href="#options">Options description</a> -
  19. <a href="#notes">Technical notes</a> -
  20. <a href="#template-variables">Template variables</a> -
  21. <a href="#known-issues">Known issues</a> -
  22. <a href="#unknown-issues">Troubleshooting unknown issues</a> -
  23. <a href="#contributors">Contributors</a>
  24. </span>
  25. <hr>
  26. <ol>
  27. <li>
  28. <a id="getting-started">Getting started</a>
  29. <ul>
  30. <li>Wait until the page is fully loaded, you may need to scroll down the entire page to be sure all elements are
  31. loaded.</li>
  32. <li>Click on the SingleFile button
  33. <img src="../resources/icon_16.png" class="icon"> in the extension toolbar to save the page.</li>
  34. </ul>
  35. </li>
  36. <li>
  37. <a id="general-notes">Additional notes</a>
  38. <ul>
  39. <li>To save multiple tabs, select them first and click on the SingleFile button
  40. <img src="../resources/icon_16.png" class="icon">.</li>
  41. <li>
  42. Open the context menu by right-clicking the SingleFile button
  43. <img src="../resources/icon_16.png" class="icon"> in the extension toolbar or on the webpage. It allows you to
  44. save:
  45. <ul>
  46. <li>the current tab,</li>
  47. <li>or the selected content,</li>
  48. <li>or the selected frame.</li>
  49. </ul>
  50. </li>
  51. <li>
  52. You can also process multiple tabs in one click and save:
  53. <ul>
  54. <li>the selected tabs,</li>
  55. <li>or the unpinned tabs,</li>
  56. <li>or all the tabs.</li>
  57. </ul>
  58. </li>
  59. <li>
  60. The context menu also allows you to activate the auto-save of:
  61. <ul>
  62. <li>the current tab,</li>
  63. <li>or the unpinned tabs,</li>
  64. <li>or all the tabs.</li>
  65. </ul>
  66. </li>
  67. <li>With auto-save active, pages are automatically saved every time after being loaded (or before being unloaded
  68. if not).
  69. </li>
  70. <li>Right-click on the SingleFile button and select "Options" to open the options page.</li>
  71. <li>
  72. The default save folder is the download folder configured in your browser, cf. about:preferences in Firefox and
  73. chrome://settings in Chrome.
  74. </li>
  75. <li>You can use the shortcut Ctrl+Shift+X to save current or selected tabs in Chrome. Go to
  76. <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a> to change it.</li>
  77. </ul>
  78. </li>
  79. <li>
  80. <a id="options">Options description</a>
  81. <p>You can customize SingleFile through the options page. Right-click on SingleFile button
  82. <img src="../resources/icon_16.png" class="icon"> in the browser toolbar and select "Options"/"Manage extension"
  83. in
  84. the context menu to open the options page.</p>
  85. <p>User interface</p>
  86. <ul>
  87. <li>
  88. <span class="option">add entry in the context menu of the webpage</span>
  89. <p>Check this option to display an entry for SingleFile in the context menu of the webpage. The context menu of
  90. the
  91. SingleFile button
  92. <img src="../resources/icon_16.png" class="icon"> in the extension toolbar is displayed wether this option is
  93. checked
  94. or not.
  95. </p>
  96. <p class="notice">It is recommended to
  97. <u>check</u> this option</p>
  98. </li>
  99. <li>
  100. <span class="option">overlay a shadow on the page during processing</span>
  101. <p>Check this option to overlay a shadow on the page when SingleFile is retrieving page resources. This reminds
  102. you
  103. that you should not close the tab.
  104. </p>
  105. <p class="notice">It is recommended to
  106. <u>check</u> this option</p>
  107. </li>
  108. <li>
  109. <span class="option">display an infobar when viewing a saved page</span>
  110. <p>Check this option to display the ℹ button at the top right of the page when viewing a saved page. By clicking
  111. this
  112. icon, you can get more information about the saved date and open the original URL.
  113. </p>
  114. <p class="notice">It is recommended to
  115. <u>check</u> this option</p>
  116. </li>
  117. <li>
  118. <span class="option">template of the infobar content</span>
  119. <p>The template allows you to customize the content displayed in the infobar. You can use any valid character,
  120. <code>\n</code> for new lines or <code>\t</code> for tabs. You can also use any variables from <a href="#template-variables">this
  121. list</a> anywhere in the template. If the template or the resulting content is empty, the infobar will display
  122. the saved date by default.
  123. </p>
  124. <p>Template Examples</p>
  125. <ul>
  126. <li><code>{url-href} ({date-iso})</code> will produce contents like "https://www.example.com (2018-09-15 11 06
  127. 03 PM)".</li>
  128. <li><code>Title: {page-title}</code> will produce contents like "Title: Example Domain" for a page having
  129. "Example Domain" as title.</li>
  130. </ul>
  131. </li>
  132. <li>
  133. <span class="option">open a prompt dialog to edit the infobar content</span>
  134. <p>Check this option to display a prompt dialog in order to confirm the infobar content before saving the page.
  135. </p>
  136. </li>
  137. </ul>
  138. <p>File name</p>
  139. <ul>
  140. <li>
  141. <span class="option">template</span>
  142. <p>The template allows you to customize the file name of saved pages. You can use any valid character and "/" to
  143. create sub-folders (with the option "save pages in background" active). You can also use any variables from
  144. <a href="#template-variables">this list</a> anywhere in the template.</p>
  145. <p>Note that invalid characters are automatically transformed and collapsed to underscores. File names cannot
  146. exceed 192 characters and are truncated if longer. The invalid characters are: [, ~, \, ?, %, *, :, |, ", &lt;,
  147. &gt;, and control characters from 0 to 31 in the ASCII table.</p>
  148. <p>Template Examples</p>
  149. <ul>
  150. <li><code>{page-title} ({date-iso} {time-locale}).html</code> will produce filenames like "Introduction to
  151. SingleFile (2018-09-15 11_06_03 PM).html" for a page having "Introduction to SingleFile" as title.</li>
  152. <li><code>archives/{url-last-segment} - {date-iso}</code> will produce filenames like "welcome - 2018-09-15" for
  153. a page hosted on https://example.com/welcome.html. The saved files will be saved in the sub-directory
  154. "archives".</li>
  155. <li><code>archives/{year-locale}/{month-locale}/{day-locale}/{page-title}.html</code> will produce filenames
  156. like "Introduction to SingleFile.html" stored into 3 sub-directories in the "archives" folder, one for each
  157. part of the save date (e.g. "2018/9/15/Introduction to SingleFile.html").</li>
  158. </ul>
  159. </li>
  160. <li>
  161. <span class="option">open the "Save as" dialog to confirm the file name</span>
  162. <p>Check this option to display the "Save as" dialog in order to confirm the file name before saving the page. If
  163. the
  164. option "save pages in background" is unchecked then a prompt dialog will be displayed instead of the "Save as"
  165. dialog.
  166. </p>
  167. <p class="notice">It is recommended to
  168. <u>uncheck</u> this option</p>
  169. </li>
  170. </ul>
  171. <p>HTML content</p>
  172. <ul>
  173. <li>
  174. <span class="option">compress HTML content</span>
  175. <p>Check this option to remove all HTML comments, and unneeded spaces or returns. This helps to reduce the size
  176. of
  177. the file without altering the document.</p>
  178. <p class="notice">It is recommended to
  179. <u>check</u> this option</p>
  180. </li>
  181. <li>
  182. <span class="option">remove HTML imports</span>
  183. <p>Check this option to remove all link elements used to import HTML documents. This can help to reduce the size
  184. of the
  185. file
  186. without altering the document most of the time.</p>
  187. <p class="notice">It is recommended to
  188. <u>check</u> this option</p>
  189. </li>
  190. <li>
  191. <span class="option">remove hidden elements</span>
  192. <p>Check this option to remove all hidden elements. This option can help to reduce the size of the file
  193. without altering the document.</p>
  194. <p class="notice">It is recommended to
  195. <u>check</u> this option</p>
  196. </li>
  197. <li>
  198. <span class="option">remove frames</span>
  199. <p>Check this option to remove all frame and iframe elements. This can considerably reduce the size of the file
  200. without altering the document most of the time. Checking this option may also decrease the time needed to save a
  201. page</p>
  202. </li>
  203. </ul>
  204. <p>Images</p>
  205. <ul>
  206. <li>
  207. <span class="option">group duplicate images together</span>
  208. <p>Check this option to avoid saving multiple times duplicate images. Checking this this option should not alter
  209. the document in modern browsers and can considerably reduce the size of the file. Checking this this option
  210. option may also increase the CPU consumption and the time needed to save a page</p>
  211. <p class="notice">It is recommended to
  212. <u>check</u> this option</p>
  213. </li>
  214. <li>
  215. <span class="option">save deferred images</span>
  216. <p>Check this option to save all the deferred images that are not displayed. This may help to save all the
  217. images without scrolling the page. This feature does its best effort and is not guaranteed to work on all sites.</p>
  218. <p class="notice">It is recommended to
  219. <u>check</u> this option</p>
  220. </li>
  221. <li>
  222. <span class="option">maximum idle time (ms)</span>
  223. <p>Specify the maximum delay of time to wait for deferred images. You can increase this value if for example the
  224. network or system conditions are degraded. You can also decrease this value otherwise.</p>
  225. </li>
  226. <li>
  227. <span class="option">remove images for alternative screen resolutions</span>
  228. <p>Check this option to remove images that are alternatives in lower and/or higher resolutions to the ones
  229. displayed
  230. by default. Checking this this option can considerably reduce the size of the file in some cases.</p>
  231. </li>
  232. </ul>
  233. <p>Stylesheets</p>
  234. <ul>
  235. <li>
  236. <span class="option">compress CSS content</span>
  237. <p>Check this option to minify CSS stylesheets. This the size of the file without altering the
  238. document.
  239. It also prevents images from being saved several times by using CSS variables.
  240. </p>
  241. <p class="notice">It is recommended to
  242. <u>check</u> this option</p>
  243. </li>
  244. <li>
  245. <span class="option">remove unused styles</span>
  246. <p>Check this option to remove all CSS rules and styles that do not match any element. Checking this option
  247. should
  248. not alter the document and can considerably reduce the size of the file. Checking this option may
  249. also
  250. increase the CPU consumption and the time needed to save a page.</p>
  251. <p class="notice">It is recommended to
  252. <u>check</u> this option</p>
  253. </li>
  254. <li>
  255. <span class="option">remove alternative fonts to woff/otf and unused fonts</span>
  256. <p>Check this option to remove fonts that are alternatives to the Web Open Font or OpenType formats, and CSS
  257. fonts that are not used. Checking this this option should not alter the document and can considerably reduce the
  258. size of the file.</p>
  259. <p class="notice">It is recommended to
  260. <u>check</u> this option</p>
  261. </li>
  262. <li>
  263. <span class="option">remove stylesheets for alternative devices to screens</span>
  264. <p>Check this option to remove stylesheets that are not used for the screen display like stylesheets for print
  265. preview and speech synthesizers. Checking this this option can help to reduce the size of the file.</p>
  266. </li>
  267. </ul>
  268. <p>Other resources</p>
  269. <ul>
  270. <li>
  271. <span class="option">remove scripts</span>
  272. <p>Check this option to remove all scripts. Unchecking this option may alter the document and lead to security
  273. issues.</p>
  274. <p class="notice">It is recommended to
  275. <u>check</u> this option</p>
  276. </li>
  277. <li>
  278. <span class="option">remove video sources</span>
  279. <p>Check this option to empty the "src" attribute of all video elements.</p>
  280. <p class="notice">It is recommended to
  281. <u>check</u> this option</p>
  282. </li>
  283. <li>
  284. <span class="option">remove audio sources</span>
  285. <p>Check this option to empty the "src" attribute of all audio elements.</p>
  286. <p class="notice">It is recommended to
  287. <u>check</u> this option</p>
  288. </li>
  289. </ul>
  290. <p>Auto-save</p>
  291. <ul>
  292. <li>
  293. <span class="option">auto-save after page load or on page unload</span>
  294. <p>Check this option to auto-save pages after being loaded. If you browse to another page before the page is
  295. fully
  296. loaded then the page will be saved just before being unloaded. With this option active, you are guaranteed pages
  297. will
  298. always be saved but some frame contents may be missing (if you unchecked "remove frames") when pages are saved
  299. before
  300. being unloaded.
  301. </p>
  302. </li>
  303. <li>
  304. <span class="option">auto-save after page load</span>
  305. <p>Check this option to auto-save pages after being loaded.</p>
  306. </li>
  307. <li>
  308. <span class="option">auto-save on page unload</span>
  309. <p>Check this option to auto-save pages before being unloaded instead of saving pages after being loaded. With
  310. this
  311. option active, you are guaranteed pages will always be saved but some frame contents may be missing (if you
  312. unchecked
  313. "remove frames").
  314. </p>
  315. </li>
  316. <li>
  317. <span class="option">auto-save waiting delay after load (sec.)</span>
  318. <p>Specify the amount of time in seconds to wait before saving a page when the "auto-save on page load or on page
  319. unload"
  320. or "auto-save on page load" is checked.
  321. </p>
  322. </li>
  323. </ul>
  324. <p>Misc.</p>
  325. <ul>
  326. <li>
  327. <span class="option">save pages in background</span>
  328. <p>Uncheck this option if you get invalid file names like "37bec68b-446a-46a5-8642-19a89c231b46.html" or
  329. interrupted downloads when saving pages. Unchecking this option prevent saving files in sub-directories.
  330. </p>
  331. <p class="notice">It is recommended to
  332. <u>check</u> this option</p>
  333. </li>
  334. <li>
  335. <span class="option">display stats in the console after processing</span>
  336. <p>Check this option to display stats about processing in the JavaScript developer tools of your browser.
  337. Checking
  338. this option may increase the CPU consumption and the time needed to save a page.
  339. </p>
  340. <p class="notice">It is recommended to
  341. <u>uncheck</u> this option</p>
  342. </li>
  343. <li>
  344. <span class="option">set a maximum size for embedded resources (MB)</span>
  345. <p>Specify the maximum size of embedded resources (i.e. images, stylesheets, scripts and iframes) in megabytes.
  346. </p>
  347. </li>
  348. <li>
  349. <span class="option">save raw page</span>
  350. <p>Check this option to save the page without interpreting JavaScript. Checking this option may alter the
  351. document.</p>
  352. <p class="notice">It is recommended to
  353. <u>uncheck</u> this option</p>
  354. </li>
  355. </ul>
  356. <p>Form buttons</p>
  357. <ul>
  358. <li>
  359. <span class="option">Reset</span>
  360. <p>Reset all options to their default values.</p>
  361. </li>
  362. </ul>
  363. </li>
  364. <li>
  365. <a id="template-variables">Template variables</a>
  366. <p>The template variables are used to customize the infobar content or the file name of a saved page. They help to
  367. insert dynamic values like the save date or the page title.</p>
  368. <ul>
  369. <li><code>{page-title}</code>: the title of the page</li>
  370. <li><code>{page-language}</code>: the language of the page</li>
  371. <li><code>{page-description}</code>: the description of the page</li>
  372. <li><code>{page-author}</code>: the author of the page</li>
  373. <li><code>{page-creator}</code>: the creator of the page</li>
  374. <li><code>{page-publisher}</code>: the publisher of the page</li>
  375. <li><code>{datetime-iso}</code>: the save date and time in the ISO format (e.g. "2018-09-15T22_38_26_317Z")</li>
  376. <li><code>{datetime-utc}</code>: the save date and time in UTC format (e.g. "Sat, 15 Sep 2018 22_38_26 GMT")</li>
  377. <li><code>{datetime-locale}</code>: the localized value of the date and time (e.g. "9_16_2018, 12_54_31 AM")</li>
  378. <li><code>{date-iso}</code>: the save date in the ISO format (e.g. "2018-09-15")</li>
  379. <li><code>{date-locale}</code>: the localized value of the save date (e.g. "16_09_2018")</li>
  380. <li><code>{time-iso}</code>: the save time in the ISO format (e.g. "22_38_26_317")</li>
  381. <li><code>{time-locale}</code>: the localized value of the save time (e.g. "00_38_26")</li>
  382. <li><code>{day-utc}</code>: the day of the save date in UTC format (e.g. "15")</li>
  383. <li><code>{day-locale}</code>: the localized value of the day (e.g. "15")</li>
  384. <li><code>{month-utc}</code>: the month of the save date in UTC format (e.g. "09")</li>
  385. <li><code>{month-locale}</code>: the localized value of the month (e.g. "09")</li>
  386. <li><code>{year-utc}</code>: the year of the save date in UTC format (e.g. "2018")</li>
  387. <li><code>{year-locale}</code>: the localized value of the year (e.g. "2018")</li>
  388. <li><code>{hours-utc}</code>: the hour of the save date in UTC format (e.g. "20")</li>
  389. <li><code>{hours-locale}</code>: the localized value of the hour (e.g. "22")</li>
  390. <li><code>{minutes-utc}</code>: the minutes of the save date in UTC format (e.g. "38")</li>
  391. <li><code>{minutes-locale}</code>: the localized value of the minutes (e.g. "38")</li>
  392. <li><code>{seconds-utc}</code>: the seconds of the save date in UTC format (e.g. "31")</li>
  393. <li><code>{seconds-locale}</code>: the localized value of the seconds (e.g. "31")</li>
  394. <li><code>{url-href}</code>: the URL of the page (e.g. "http_example.com")</li>
  395. <li><code>{url-pathname}</code>: the path name of the URL (e.g. "category_index.html")</li>
  396. <li><code>{url-last-segment}</code>: the last part of the pathname (without the extension) or the host if not
  397. found (e.g. "index")</li>
  398. <li><code>{url-protocol}</code>: the protocol of the URL (e.g. "https")</li>
  399. <li><code>{url-host}</code>: the host name + the port of the URL (e.g. "example.com_8080")</li>
  400. <li><code>{url-hostname}</code>: the host name of the URL (e.g. "example.com")</li>
  401. <li><code>{url-port}</code>: the port of the URL (e.g. "8080")</li>
  402. <li><code>{url-username}</code>: the user name of the URL (e.g. "john_doe")</li>
  403. <li><code>{url-password}</code>: the password of the URL (e.g. "qwerty123")</li>
  404. <li><code>{url-search}</code>: the search string of the URL (e.g. "filter-date=today")</li>
  405. <li><code>{url-hash}</code>: the hash of the URL (e.g. "chapter-2")</li>
  406. <li><code>{tab-id}</code>: the unique identifier of the tab (e.g. "326")</li>
  407. <li><code>{digest-sha-256}</code>: the SHA-256 hash value of the entire page content (e.g.
  408. e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855)</li>
  409. <li><code>{digest-sha-384}</code>: the SHA-384 hash value of the entire page content</li>
  410. <li><code>{digest-sha-512}</code>: the SHA-512 hash value of the entire page content</li>
  411. </ul>
  412. </li>
  413. <li>
  414. <a id="notes">Technical notes</a>
  415. <ul>
  416. <li>All images are converted into
  417. <a href="http://en.wikipedia.org/wiki/Base64">base64</a>.
  418. </li>
  419. <li>All resources except frame contents are injected in the document using
  420. <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">data URI scheme</a>.
  421. </li>
  422. <li>Frame contents are injected as text in the document by using the srcdoc attribute.
  423. </li>
  424. </ul>
  425. </li>
  426. <li>
  427. <a id="known-issues">Known issues</a>
  428. <ul>
  429. <li>
  430. All browsers
  431. <ul>
  432. <li>For security reasons, you cannot save pages hosted on https://chrome.google.com or
  433. https://addons.mozilla.org.</li>
  434. <li>The last saved path cannot be remembered by default. To circumvent this limitation, disable the option "Save
  435. pages in background".</li>
  436. </ul>
  437. </li>
  438. <li>
  439. Chrome/Opera
  440. <ul>
  441. <li>You must enable the option "Allow access to file URLs" in the extension page to display the infobar when
  442. viewing
  443. a saved page, or to save a page stored on the filesystem.</li>
  444. </ul>
  445. </li>
  446. <li>
  447. Firefox
  448. <ul>
  449. <li>You cannot save selected tabs via the context menu because it is not possible to select multiple tabs.</li>
  450. </ul>
  451. </li>
  452. </ul>
  453. </li>
  454. <li>
  455. <a id="unknown-issues">Troubleshooting unknown issues</a>
  456. <p>Please follow these steps if you find an unknown issue:</p>
  457. <ul>
  458. <li>Reset SingleFile options.</li>
  459. <li>If resetting options did not fix the issue, try to disable all other extensions to see if there is a conflict.</li>
  460. <li>If there is a conflict then try to determine against which extension(s).</li>
  461. <li>Please report the issue
  462. <a href="https://github.com/gildas-lormeau/SingleFile/issues">here</a> with a short description describing how to
  463. reproduce
  464. the issue, Browser version, OS name and version.</li>
  465. </ul>
  466. <p>Suggestions are welcome :)</p>
  467. </li>
  468. <li>
  469. <a id="contributors">Contributors</a>
  470. <ul>
  471. <li>Chinese translation done by yfdyh000 (<a href="https://github.com/yfdyh000">GitHub profile</a>),
  472. KrasnayaPloshchad (<a href="https://github.com/KrasnayaPloshchad">GitHub profile</a>)</li>
  473. <li>Japanese translation, done by Shitennouji (四天王寺) (<a href="https://github.com/Shitennouji">GitHub profile</a>)</li>
  474. <li>Polish translation done by xesarni (<a href="https://github.com/xesarni">GitHub profile</a>)</li>
  475. <li>Russian translation done by rstp14 (<a href="https://github.com/rstp14">GitHub profile</a>)</li>
  476. </ul>
  477. </li>
  478. </ol>
  479. </div>
  480. </body>
  481. </html>