Goals of this Project

  • Think about final project
  • Reverse-engineer a chrome extension that I find in the wild
  • Create 2 extensions: one that uses the webRequest permission to do something interesting (build your own ad blocker, maybe), and for the other extension that uses Chrome documentation to find a new capability or permission.

1. Project Idea & Concept

Voicenglish: Practice Daily English Sentences with Your Voice.

Voicenglish is an Educational Chrome extension which uses voice recognition and text-to-speech technology and enables daily English practice.

Currently, I was using Amazon’s Echo dot in my room efficiently but the thing was that I stay most of my time in the school. Also, due to the tough schedule and laptop-based sedentary lifestyle, I wanted to combine my English learning from the web. Learning new English sentences was the most important and simplest thing for me but I had to spend hours to find good-quality sentences every day. Then an idea has lingered on: What if a Chrome extension can give daily English sentence from API and read via text-to-speech and enables practicing via voice recognition technology? 

For this, I decided to search similar extensions and reverse engineer them.

 

2. Reverse Engineer: Speakit (Text-to-Speech Assistance)

SpeakIt reads selected text using Text-to-Speech technology with language auto-detection. It can read texts in more than 50 languages.
Source Code

    • What permissions does it require?
      “<all_urls>”,
      “contextMenus”,
      “ttsEngine”,
      “tts”,
      “tabs”,
      “webRequest”,
      “webNavigation”,
      “unlimitedStorage”,
      “webRequestBlocking”,
      “https://*/*”
    • Is it a browser action, page action, content script, background, other?
      – content script: Addspeech.js (SendRequest, speech input)
      – background: speakit.html (has speakit.js and animation.js)
      – browser action: popup (contains UI)
      – page action: cannot find a specific JS file but think that once users drag some text in any html page what they want to hear and click the icon, It reads the text with user interface.
    • What Chrome APIs does it use?
      # background / speakit.js
      – chrome.ttsEngine.onSpeak/onStop: also has pause/resume events but it don’t need to be used.
      – chrome.tabs.detectLanguage
      – chrome.contextMenus.create# background / animation.js
       – no APIs (Functions for animating SpeakIt icon and displaying number of sentences)# content
      – chrome.extension.sendRequest: request keyDownListeners within the extension.
    • In your own words, how does it work?
      – Once some texts are dragged by users, all bad characters in that texts are replaced by the readable words by filterText function. Actually, there are a number of small functions of handling texts but I could not understand all of them. Anyway, they are ultimately played with playAudio function with UI and various option menu.
    • Anything else unusual in the manifest?
      – “all_frames”: true in “content_scripts”

 

3. Building two Chrome extensions

  • Voicenglish 0.000001: Source Code
    – I just put code which read simple text
  • Social Website -> English Study Site Redirector : Source Code