<link href="/assets/9600c281ef06d8d7784a4ad6595c8740.css" type="text/css" rel="stylesheet">

Presentation of our new Chrome addon, by Rurik19

MONTHS_OF_THE_YEAR[10] 18, 2016

<p>If you want to add articles in your wallabag account, you can use the classc form. You can also install browser extensions.<br /> Yuriy Evdokimov (<a href="https://github.com/Rurik19">@Rurik19</a>) developed the new Chrome addon which supports wallabag v2.</p> <p>Here is the howto for this addon. Thank you Yuriy! </p> <h2>Wallabagger howto</h2> <p>Wallabagger is a chrome extension to add pages to wallabag, with the ability to:</p> <ul> <li>save current page</li> <li>edit title</li> <li>add (with autocomplete!) and remove tags</li> <li>set starred and archived</li> <li>delete</li> </ul> <h3>Requirements</h3> <ul> <li>wallabag v2 on server side.</li> <li>Chromium-based browser (Chrome, Opera, Yandex, Vivaldi, etc.)</li> </ul> <h3>Installation</h3> <p>You can install Wallabagger from these ways:</p> <ul> <li> <p><a href="https://chrome.google.com/webstore/detail/wallabagger/gbmgphmejlcoihgedabhgjdkcahacjlj">From google webstore:</a>. Open this page with Chromium-based browser (tested Chrome, Yandex browser, Vivaldi) and click the "add to chrome" button</p> <p><img alt="webstore" src="/images/e/1/8/d/6/e18d6d8eaf9ea2e41d9bb937a1a225acf35e3392-inst-webstore.png" /></p> </li> <li> <p>Opera and Yandex browsers can install the extension from <a href="https://addons.opera.com/ru/extensions/details/wallabagger/">Opera extension site</a></p> </li> <li> <p>Use the unpacked source:</p> <ul> <li>Download the source from the github repository or clone the repository <a href="https://github.com/rurik19/wallabagger">github repository</a></li> <li>Go to your chrome-based browser <a href="chrome://extensions">extension setup page</a></li> <li>Click "Developer mode" checkbox</li> </ul> <p><img alt="Developer mode" src="/images/f/0/e/6/e/f0e6ed32f6b5d7321e3c480e679f92e60ed5888f-inst-developermode.png" /></p> <ul> <li>Click the "Load unpacked extension" button</li> </ul> <p><img alt="extension page" src="/images/f/d/7/4/1/fd7418c9a32dfa3891097d1b70ad698a699fe5c3-inst-extensionbutton.png" /></p> <ul> <li>Select wallabagger folder (which consists <em>manifest.json</em>)</li> </ul> </li> <li> <p>Use packed .crx file</p> <ul> <li>Download wallabagger.crx from or clone <a href="https://github.com/rurik19/wallabagger">github repository</a></li> <li>Go to your chrome-based browser <a href="chrome://extensions">extension setup page</a></li> <li>Drag wallabagger.crx to this page</li> </ul> </li> </ul> <h3>Options</h3> <p>First of all you have to create a new client on your wallabag installation. How to do that is described in <a href="http://doc.wallabag.org/en/master/developer/api.html#creating-a-new-api-client">Documentation</a></p> <p>What we need from that client is two strings: Client ID and Client secret.</p> <p><img alt="Client" src="/images/c/2/d/a/7/c2da728a1fb031c1f46bf77dae7252955756205f-opt-client.png" /></p> <h4>Access options page</h4> <p>After the installation of Wallabagger extension you can setup it by going to the options page. This page is accessible by</p> <ul> <li> <p>Right click on extension icon and choose menu "options"</p> <p><img alt="Menu" src="/images/a/9/8/3/4/a98348998dea214190a8605b5a24ba2b894bc141-opt-menu.png" /></p> </li> <li> <p>Go to your Chromium-based browser <a href="chrome://extensions">extension setup page</a>, and click on the "options" link in the Wallabagger section</p> <p><img alt="extensions" src="/images/e/5/9/9/3/e599300ddf72f8f6ae6265eb6ce94474344de78e-opt-ext-optlink.png" /></p> </li> </ul> <h4>Setup process</h4> <ul> <li> <p>Enter the URL of your wallabag installation (without "http://" ), check "https" if you use that, and click "Check URL" button</p> <p><img alt="URL" src="/images/4/2/6/1/b/4261b23628c3a6bdb18fc560c66d8547ff5a9189-opt-url.png" /></p> <p>if the URL is valid then in checklist in the bottom of page will be information about that.</p> <p><img alt="checklist" src="/images/e/0/8/9/8/e08981a5fdd09d2b06fd1b78b22691f251d1d2e9-opt-checklist.png" /></p> </li> <li> <p>If the URL was checked and a correct api is found, then the client and user credential fields appears. Fill them and click the "Get token" button. From now access token will be fetched authomatically, when it expires.</p> <p><img alt="Client fields" src="/images/c/5/2/b/1/c52b1c2d35247adb6decff22ac3cae18f6baa01c-opt-clientfields.png" /></p> <p>if the credentials are correct you'll see it in the checklist with an information about that.</p> <p><img alt="Token granted" src="/images/5/5/2/3/f/5523f8a0a9ad23dd4750f5ada55ae6796be4bd8d-opt-granted.png" /></p> </li> <li> <p>If you have tags including spaces, check appropriate options. This will toggle the ending tag key from Space to Enter</p> <p><img alt="Space in tags" src="/images/b/f/5/c/a/bf5cabca2bb0a74167aa2d331addf618cf66a62f-opt-spaceintags.png" /></p> </li> </ul> <h4>Security warning</h4> <p>In this version of the extension your password is stored in the browser local storage as a plain text and could be retrieved by anyone with access to your computer. The password encryption will be implemented in future versions.</p> <h3>Usage</h3> <h4>Saving article</h4> <p>After installation and successful setup you can add articles to wallabag by clicking on the Wallabagger extension icon</p> <p><img alt="icon" src="/images/6/8/f/8/e/68f8e660d68ab0d399b420c00c943b892719bb15-use-icon.png" /></p> <p>wait a couple of seconds</p> <p><img alt="Saving" src="/images/7/a/7/e/c/7a7ecbaf220693179bacacbec5eb52d8defe7b77-use-saving.png" /></p> <p>(There also may be message "Obtaining wallabag api token" if the application token is expired (once in two weeks)) If something goes wrong, an error message appears:</p> <p><img alt="Error" src="/images/6/b/8/a/e/6b8aeba12ba3d60d404819b1569c21bafa5f6a51-use-error.png" /></p> <p>In that case, check your options.</p> <p>If there was no errors, main window with saved article appears. Note: if the article from this URL was already saved, this article will appear with its tags, title, and flags (starred, archived).</p> <p><img alt="Article" src="/images/e/8/d/f/5/e8df5290ecd3729119a1a83749f9c39d777f694e-use-article.png" /></p> <h4>Article window</h4> <p>The article window consists from:</p> <ul> <li>the article picture</li> <li>the title - clicking it opens article in the wallabag interface</li> </ul> <p><img alt="Title" src="/images/7/a/1/7/2/7a17213851c5886e3e9d3e7f86fbb938a6ca9766-use-title.png" /></p> <ul> <li>domain name - clicking it opens source article</li> </ul> <p><img alt="Domain" src="/images/d/d/8/9/8/dd89836440b9078c25adb2753419e7863b01e837-use-domain.png" /></p> <ul> <li> <p>icons:</p> <ul> <li>edit title icon <img src="/images/wallabagger/use-editicon.png" alt="Edit icon" /> clicking it opens dialog to edit the title</li> </ul> <p><img alt="Edit title" src="/images/a/b/9/3/e/ab93ea1463b252f0671a1704362525f52f39edeb-use-edittitle.png" /></p> <ul> <li>set archived and starred flags icons <img src="/images/wallabagger/use-flagsicons.png" alt="Flags icons" /> These icons change its appeareance when the flags are set <img src="/images/wallabagger/use-flagsset.png" alt="Flags is set" /></li> <li>delete article icon <img src="/images/wallabagger/use-deleteicon.png" alt="Delete icon" /> clicking it opens a confirmation dialog to make sure you want to delete your article</li> </ul> <p><img alt="Delete dialog" src="/images/5/d/8/5/2/5d852d28cee342d7b626031862ffb7ee9ac898db-use-deletedialog.png" /></p> </li> <li> <p>tags area: article tags with input field for adding new tags</p> <p><img alt="Tags area" src="/images/5/e/6/c/3/5e6c3baf3681fef270fd9d4714f815cc111c4fab-use-tagsarea.png" /></p> </li> </ul> <h4>Working with tags</h4> <p>Tags applied to the article appear in the tags area before the input field. You can remove a tag from an article by clicking on the cross symbol next to the tag.</p> <p><img alt="Article tags" src="/images/5/f/2/c/3/5f2c3b12dfd02ebd684a2c311323fc2f6ada1133-use-articletags.png" /></p> <p>When you type the name of a new tag in the input field, after three letters, Wallabagger begins to search in existing tags. Found tags appear on the bottom of the input field. You can add them by clicking on them or by pressing the right arrow key.</p> <p><img alt="Found tag" src="/images/8/9/6/e/c/896ec1a913a80bc916f80b955d3630e1070d98e7-use-foundtag.png" /></p> <p>You can add typed in input field tag by pressing ",", ";" or the Space key (if you didn't checked the option "Use space in tags" inside the extension settings) or the Enter key (if you checked the option)</p>
With wallabag, archive the web freely. wallabag is a self hostable application for saving web pages.
<script src="/system/assets/jquery/jquery-2.x.min.js"></script> <script src="/user/themes/boxify/js/main.js"></script> <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" defer></script> <script src="/user/plugins/highlight/js/highlight.pack.js"></script> <script src="/user/themes/boxify/js/jquery.jscroll.min.js"></script> <script defer> ((window.gitter = {}).chat = {}).options = { room: 'wallabag/wallabag' }; </script> <script> hljs.initHighlightingOnLoad(); </script>