Look Up Later

阅读量:66 字数:6417 阅读时间:16min

When reading a foreign language article, I find the most annoying thing is not vocabulary itself but the interruption form looking it up.

Plenty vocabularies show up while reading

As we meet one new, we look it up, trying to remember all the translations listed as well as the rows of examples uses. We really DO NOT remember them all and these things slow down our reading speed, reduce our intersts of the article, gradually we will trun off the reading track and renounce the reading.

So I choose to skip the vocabulary and LOOK it UP LATER, But another problem show up. I couldn't find it. So awkward. That's why come up with this idea developing a chrome-extension which remembers your new vocabulary each webpage, makes a list of them, reminders you to look them up or even shows the translations, examples for you automaticly and sets a schedule to strengthen your memoties. The steps would be like:

Efficient way to read, remember and learn with LoopUpLater

Now I'm reading the Developer Document the work will begin tomorrow.

PS: This article will be updated continually, want to get the latest info about this project, subscribe our email update.


04-08-2017 Update

Google has announced plans to gradually phase out support for Chrome apps on every platform except for Chrome OS. Starting in later 2016.

icon

A Chrome extension needs a manifest file to tell Chrome about the app and require extra permissions. To learn more about the manifest, read the Manifest File Format documentation

manifest.json

{
    "manifest_version": 2,
    "name": "Look Up Later",
    "version": "1.0",
    "description": "To read, remember and learn efficiently.",
    "icons": {
        "16": "images/icon-16.png",
        "48": "images/icon-48.png",
        "128": "images/icon-128.png"
    },
    "content_scripts": [ {
      "js": ["js/content.js"],
      "matches": ["http://*/*", "https://*/*"],
      "run_at": "document_idle"
    } ],
    "browser_action": {
        "default_icon": {
            "19": "images/icon-16.png",
            "38": "images/icon-48.png"
        },
        "default_title": "Look Up Later",
        "default_popup": "popup.html"
    },
    "permissions": [
        "storage",
        "nativeMessaging",
        "cookies",
        "contextMenus",
        "http://*/*",
        "https://*/*"
    ],
    "background": {
        "scripts": ["js/background.js"]
    }
}

content.js is a JavaScript file that runs in the context of web pages. By using the standard Document Object Model (DOM), it can read details of the web pages the browser visits, or make changes to them.

I want LUL extension to have the function that make the selected vocabulary conspicuous to user. The code below shows how can we use window.onmousedown and window.onmouseup to change the selected text style and get the selected text content.

var lul_getSelectedText = function(){
    if(window.getSelection){
       return window.getSelection().toString();
    }else if(document.getSelection){
       return document.getSelection();
    }else if(document.selection){
       return document.selection.createRange().text;
    }
};
var lul_setColor = function(){
    if(document.selection){
        var tr = document.selection.createRange();
        tr.execCommand("ForeColor", false, "#000");
        tr.execCommand("BackColor", false, "rgba(255,255,0,0.3)");
    }else{
        var tr = window.getSelection().getRangeAt(0);
        var span = document.createElement("span");
        span.style.cssText = "color:#000";
        span.style.background = "rgba(255,255,0,0.3)";
        tr.surroundContents(span);
    }
};
window.onmousedown = function(){
    lul_setColor();
    window.onmouseup = function(){
        var selectedText = lul_getSelectedText();
    };
};

The result will be like:

result_1


12-08-2017 Update

How could I know whether have I marked certain vocabulary in the content? Scroll up and check the words marked before? Certainly not. So making the user have a direct feedback about all the words that are same as the ones being selected is necessary. By using highlight.js (by Johann Burkard) can we accomplish this.

$('body').highlight("hello");

The code above can mark all the hello word in the body element. So I just use the plugin in the window.onmouseup function:

window.onmousedown = function(){
    window.onmouseup = function(){
        var selectedText = lul_getSelectedText();
        if(selectedText!=''){
            lul_setColor();
            $('body').highlight( selectedText );
        }
    };
};

And the result is like:

result_2

Storage

Require an extra permission in the manifest.json

{
 "permissions": [
   "storage"
 ]
}

To store data via a Chrome extension, there are two way:

  1. HTML5 localStorage
  2. Chrome storage API

The different between those method are:

  • User data can be automatically synced with Chrome sync (using storage.sync).
  • Your extension's content scripts can directly access user data without the need for a background page.
  • A user's extension settings can be persisted even when using split incognito behavior.
  • It's asynchronous with bulk read and write operations, and therefore faster than the blocking and serial localStorage API.
  • User data can be stored as objects (the localStorage API stores data in strings).
  • Enterprise policies configured by the administrator for the extension can be read (using storage.managed with a schema).

I created 1 function (lul_addVocabulary) in content.js and 3 functions (lul_refreshData, lul_removeData, lul_clearAll) using storage API.

More Information

Translation API

This extension will show the meaning and voice button in the popup.html, which will show up when you click the button on the top of you browser. The function is based on Jinshan Dictionary API.

Processing Animation

result_3

Using Pace.js

Project Finished

View on github

Download .crx

How to Install: Open chrome://extensions/ and drag the .crx file into the browser

下一篇:Flex布局新旧混合写法详解

flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了(虽然现在还有很多不支持 flex 的浏览器)。然而国内很多浏览器对 Flex 的支持都不是很好,这里针对微信内置浏览器写了一套兼容写法。 首先还是从两个版本的语法开始讲吧,这里还是假设flex容器为 .box ,子元素为 .item 。 旧语法篇 定义容器的display属

雁过留痕,风过留声

目 录