Skip to content

Mark vocab words as "known" on ANY webpage on the internet.

Notifications You must be signed in to change notification settings

Arthaey/WebWords

Repository files navigation

WebWords

Bugs Code Climate Coverage Status Build Status Build History

WebWords is currently under active development, but it's not really ready for users yet. But if you like living on the bleeding, unsupported edge ;) then you're welcome to try it.

Screenshots

Initial button after running bookmarklet Highlights all unknown words After clicking words to mark them as known

Usage

  1. Create a Fieldbook account and sheet to store your known words.

  2. Set up WebWords as either a bookmarklet or a user script.

  3. Go to some web page in the foreign language you're learning.

  4. Run WebWords, depending on how you set it up:

    • if you're using it as a user script, WebWords will run automatically
    • if you're using it as a bookmarklet, click the bookmarklet
  5. A gray info box with a blue button will appear in the upper right corner of the page.

    Before you've clicked the blue button to "mark up words", the web page won't look any different.

  6. Click the "mark up words" button.

    WebWords will download all your known words from your Fieldbook sheet. Known words won't change, except that if you hover* over them, they now have a green underline. Unknown words will be highlighted in yellow. (Unknown words that also happen to be links will be yellow with a blue underline.)

    The info box in upper right corner shows statistics about how many words are on the page vs how many you know. The background color of the info box will gradually change from red to yellow to green as you mark more words as known.

* or tap, on mobile

Setup

Due to limitations imposed by Apple, a bookmarklet is the only way to run WebWords with the built-in Safari browser on an iPhone or iPad. Other platforms can chose whether to use WebWords as a bookmarklet or as a user script.

Fieldbook

Create a Fieldbook account and create a book with one sheet per language code (eg, "ES" or "FR"). Each sheet should have two columns: "Word" and "How Well Known".

Then, open the sidebar and go to the API section to generate your key and secret. You will need these, plus your book's ID, to fill in the bookmarklet or user script below.

Bookmarklet

javascript:function loadScript(url,callback){var head=document.getElementsByTagName("head")[0];var script=document.createElement("script");script.src=url;script.onload=callback;head.appendChild(script)};loadScript("https://www.arthaey.com/tech/programming/webwords/src.js",function(){localStorage.setItem("WebWords-FieldbookBook","<BOOK-ID>");localStorage.setItem("WebWords-FieldbookKey","<KEY>");localStorage.setItem("WebWords-FieldbookSecret","<SECRET>");WebWords.init(document.body)})

Greasemonkey / Tampermonkey user script

// ==UserScript==
// @name         WebWords
// @namespace    http://arthaey.com
// @version      0.1.1
// @description  https://github.com/Arthaey/WebWords
// @author       Arthaey Angosii <[email protected]>
// @match        http://*/*
// @match        https://*/*
// @require      http://www.arthaey.com/tech/programming/webwords/src.js
// ==/UserScript==

localStorage.setItem("WebWords-FieldbookBook", "<BOOK-ID>");
localStorage.setItem("WebWords-FieldbookKey", "<KEY>");
localStorage.setItem("WebWords-FieldbookSecret", "<SECRET>");
WebWords.init(document.body);

Note that this will not auto-update. Sorry. Alpha software, etc etc.

Tests

From the command-line: grunt test

From the browser: open spec/SpecRunner.html

To see Javascript errors/warnings: eslint src spec

To validate Travis config:

gem install travis --no-rdoc --no-ri
travis list .travis.yml

If the Github status badges are stale, run camo-purge and force-reload.

Development

For local development, change the user script's @require to point to file:///<repo-dir>/dist/src.js . It will then update after each grunt build.

To upload a new version for the bookmarklet to use:

grunt release --release-username=<username> --release-password=$WEBWORDS_RELEASE_PASSWORD

About

Mark vocab words as "known" on ANY webpage on the internet.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published