help.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
  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. </head>
  8. <body>
  9. <div>
  10. <div id="titleBorder">
  11. <h2><img src="../resources/icon_48.png" id="titleIcon"><span id="title">SingleFile help</span></h2>
  12. <h4>SingleFile helps you to archive a complete page into a single HTML file.</h4>
  13. </div>
  14. <span id="index"><a href="#instructions">Instructions</a> - <a href="#demo">Demo</a> - <a href="#options">Options description</a> - <a href="#folder">Saved archives
  15. folder</a> - <a href="#notes">Technical notes</a> - <a href="#knownIssues">Known issues</a> - <a href="#unknownIssues">Unknown issues</a></span>
  16. <hr>
  17. <ol>
  18. <li><a id="instructions">Instructions</a>
  19. <ul>
  20. <li>wait until the page is fully loaded : you may need to scroll down the entire page and hover dynamic document elements (e.g. "rollover" images) to be sure all elements
  21. are displayed</li>
  22. <li>click on the SingleFile icon <img src="../resources/icon_48.png" id="icon"> in the Chrome toolbar or press Ctrl-Shift-S shortcut or use context menu to launch page
  23. processing</li>
  24. <li>wait until the shadow disappears then hit Ctrl-S or select "Save as" in the wrench menu and save the page</li>
  25. <li>all images, style sheets and frame contents are embedded into the ".htm" saved file</li>
  26. </ul>
  27. </li>
  28. <li><a id="demo">Demo : SingleFile advantages over default file save</a>
  29. <div><object width="480" height="385">
  30. <param name="movie" value="http://www.youtube.com/v/D99LfOF3qis&hl=fr_FR&fs=1&">
  31. <param name="allowFullScreen" value="true">
  32. <param name="allowscriptaccess" value="always">
  33. <embed src="http://www.youtube.com/v/D99LfOF3qis&hl=fr_FR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></object>
  34. </div>
  35. <li><a id="options">Options description</a>
  36. <p>You can customize the way SingleFile process a document through the options page. Right-click on SingleFile icon <img src="../resources/icon_48.png" id="icon"> in the
  37. Chrome toolbar and select "Options" in the context menu to open the options page.</p>
  38. <div class="screenshot"></div>
  39. <p>Details :</p>
  40. <ul>
  41. <li><span class="option">remove frames</span>
  42. <p>Check this option to remove all frames on the page. It may help to reduce the file size, to remove some ads and to view saved pages on IE8.</p>
  43. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  44. </li>
  45. <li><span class="option">remove objects</span>
  46. <p>Check this option to remove all non embeddable elements : flash objects, java applets ...</p>
  47. <p class="notice">It is recommended to <u>check</u> this option</p>
  48. </li>
  49. <li><span class="option">remove scripts</span>
  50. <p>Check this option if you do not want to save scripts. Most of the time, you do not need scripts in the saved page. Thus they can alter it. Nevertheless if you want to save
  51. page dynamic behavior then uncheck this option. If you uncheck this option then it is strongly recommended to check <span class="option">process raw document</span> option.</p>
  52. <p class="notice">It is recommended to <u>check</u> this option</p>
  53. </li>
  54. <li><span class="option">remove hidden elements</span>
  55. <p>Check this option to remove all hidden elements (<code>visibility = "hidden"</code>&nbsp;or&nbsp;<code>display = "none"</code>&nbsp;or&nbsp;<code>opacity = "0"</code> CSS
  56. property values). This option may alter the document but can considerably reduce the saved file size.</p>
  57. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  58. </li>
  59. <li><span class="option">remove unused CSS rules</span>
  60. <p>Check this option to remove all CSS rules that do not match any element. This option may alter the document but can considerably reduce the saved file size. If you check
  61. this option, it may also introduce some incompatibilities issues in the saved page when opening it into another browser (i.e. not based on Webkit).</p>
  62. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  63. </li>
  64. <li><span class="option">scrapbook the page</span>
  65. <p>Check this option to send the processed page to <a href="https://chrome.google.com/webstore/detail/ihkkeoeinpbomhnpkmmkpggkaefincbn">Scrapbook for SingleFile</a>.</p>
  66. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  67. </li>
  68. <li><span class="option">process in background</span>
  69. <p>Check this option to process the page in background. Processing in background means it won't be blocking (only if <span class="option">display processed page</span> option
  70. is unchecked). If you uncheck this option, a shadow will prevent you to navigate into the page during the SingleFile processing but it will be faster.</p>
  71. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  72. </li>
  73. <li><span class="option">save processed page (*)</span>
  74. <p>Check this option to save the processed page on filesystem. See <a href="#folder">Saved archives folder</a> for more details about saving folder location. If you check
  75. this option and you do not want to use "Save as" dialog box to save the page then you should uncheck <span class="option">display processed page</span> option.</p>
  76. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  77. </li>
  78. <li><span class="option">display processed page (*)</span>
  79. <p>Check this option to display the processed page in the tab. This option must be checked if you want to use Chrome "Save as" dialog box to save the page. If you uncheck
  80. this option then you should check <span class="option">process in background</span> so the processing won't be blocking: you will just have to wait that "..." label in action
  81. icon disappears. Conversely, you should uncheck <span class="option">process in background</span> when this option is checked so the processing will be faster.</p>
  82. <p class="notice">It is recommended to <u>check</u> this option</p>
  83. </li>
  84. <li><span class="option">max filename length (*)</span>
  85. <p>Set the value of maximum filename length. This value is used when <span class="option">save processed page</span> option is checked. SingleFile cannot guess the maximum filename
  86. length allowed by the Operating System so you have to configure it manually.</p>
  87. <p class="notice">It is recommended to set this option to <u>90</u> (if you are using Windows)</p>
  88. </li>
  89. <li><span class="option">process raw document</span>
  90. <p>Check this option to process the raw downloaded document instead of the displayed document. The main difference is that scripts won't be parsed and executed. Frames won't
  91. be embedded too. This option also helps to not alter the saved page when <span class="option">remove scripts</span> is unchecked</p>
  92. <p class="notice">It is recommended to <u>uncheck</u> this option</p>
  93. </li>
  94. <li><span class="option">Reset to default options</span>
  95. <p>Reset all the options to default (i.e. recommended) state</p>
  96. </li>
  97. </ul>
  98. </li>
  99. <li><a id="folder">Saved archives folder (*)</a>
  100. <p>When <span class="option">save processed page</span> option is checked, pages are automatically saved on filesystem. However, Chrome will not allow to choose the root
  101. folder where archives are stored. Neither it will allow SingleFile to make links pointing to saved files folder. So you have to find "manually" this folder.</p>
  102. <p>Files are saved in the extension subfolder of "FileSystem" folder located into Chrome user data folder:</p>
  103. <ul style="text-align: left">
  104. <li>Windows default path: <br>
  105. <span class="option">%LOCALAPPDATA%\Google\Chrome\User&nbsp;Data\Default\FileSystem\chrome-extension_jemlklgaibiijojffihnhieihhagocma_0\Persistent\</span></li>
  106. <li>Linux default path: <br>
  107. <span class="option">~/.config/google-chrome/Default/FileSystem/chrome-extension_jemlklgaibiijojffihnhieihhagocma_0/Persistent/</span></li>
  108. <li>Mac OS X default path: <br>
  109. <span class="option">~/Library/Application&nbsp;Support/Google/Chrome/Default/FileSystem/chrome-extension_jemlklgaibiijojffihnhieihhagocma_0/Persistent/</span></li>
  110. </ul>
  111. <p>You can create shortcuts to access to this folder easily.
  112. <p>
  113. <p>You can also create symbolic links in order to use sync services like dropbox. Here are the way of doing it on <a
  114. href="http://technet.microsoft.com/en-us/library/cc753194(WS.10).aspx">windows (mklink /d)</a> and <a href="http://www.unixtutorial.org/commands/ln/">linux or Mac OS X (ln
  115. -s)</a>.</p>
  116. <p>You can also change Chrome user data folder with <a href="http://www.chromium.org/user-experience/user-data-directory">--user-data-dir switch</a>.
  117. </li>
  118. <li><a id="notes">Technical notes</a>
  119. <ul>
  120. <li>all images are converted into <a href="http://en.wikipedia.org/wiki/Base64">base64</a></li>
  121. <li>frame document contents and automatically saved pages (*) are encoded with <a href="http://en.wikipedia.org/wiki/Utf_8">utf-8 charset</a></li>
  122. <li>encoded contents are injected in the document using <a href="http://en.wikipedia.org/wiki/Data_URI_scheme">data URI scheme</a></li>
  123. <li>data URI scheme is supported by the following web browsers: Chrome, Firefox, Opera, Safari, Konqueror and Internet Explorer 8 (limited support: data URIs must be smaller
  124. than 32 KB, embedded frames are not supported)</li>
  125. <li>SVG images are supported (SVG document is converted into utf-8 but is not processed)</li>
  126. </ul>
  127. </li>
  128. <li><a id="knownIssues">Known issues</a>
  129. <ul>
  130. <li>SVG images without src attribute or with empty src attribute are not embedded</li>
  131. <li>If you are using <a href="https://chrome.google.com/extensions/detail/odjhifogjcknibkahlpidmdajjpkkcfn">NotScripts</a> extension and have issues when using SingleFile
  132. then you must add this line in "CHANGE__PASSWORD__HERE.js" file as described <a href="http://optimalcycling.com/other-projects/notscripts/faq/#stumbleuponextension">here</a>:<br>
  133. <code>const DO_NOT_MITIGATE_INLINE_SCRIPTS = true;</code></li>
  134. <li>If <span class="option">process in background</span> is unchecked and <span class="option">display processed page</span> is checked, processed page may sometimes be
  135. altered after being processed (i.e. some elements are not correctly placed). This issue won't affect the saved page.</li>
  136. <li><code>file:///*</code>, <code>chrome://*</code> and <code>https://chrome.google.com/*</code> URIs cannot be processed</li>
  137. </ul>
  138. </li>
  139. <li><a id="unknownIssues">Unknown issues</a>
  140. <p>If you find an unknown issue (i.e. frozen process, extra saved files, blank or altered document, tab crash...):</p>
  141. <ul>
  142. <li>reset options</li>
  143. <li>disable all other extensions to see if there is a conflict</li>
  144. <li>if there is a conflict, try to determine against which extension(s)</li>
  145. <li>report the issue <a href="https://chrome.google.com/webstore/detail/mpiodijhokgodhhofbcjdecpffjipkle">here</a> with a short description describing how to reproduce it,
  146. Chrome version, OS name and version.</li>
  147. </ul>
  148. </li>
  149. </ol>
  150. <br>
  151. <p class="availability">*: feature only available on Chrome 9+</p>
  152. <a href="http://www.w3.org/html/logo/"> <img src="../resources/html5-badge-h-storage.png" alt="HTML5 offline & storage logo" id="logo-html5"
  153. title="This extension is powered by HTML5 Offline & Storage"> </a></div>
  154. </body>
  155. </html>