stutter (noun)
-
Distorted speech characterized principally by blocks or spasms interrupting the rhythm.
-
A Rapid Serial Visual Presentation (RSVP) extension for modern web browsers. It is based upon my initial work in a Google Chrome extension, read. This is an attempt to modernize the code and offer cross-browser support.
stutter is built using webpack and babel, with sass support and eslint styling. The code is written using es6 classes. Backend and content-scripts are maintained separately with individual webpack configurations.
To install all dependencies:
$ yarn
To build the project:
$ yarn build
To lint the source:
$ yarn test
To lint the extension configuration (must build first):
$ yarn webext-test
To locally test the extension in Firefox:
$ yarn extension
To package the extension for production:
$ yarn package
This extension uses several permissions allowed by the web extensions API.
Stutter allows you to read selected text by highlighting content and right-clicking to view the context menu option. This permission allows us to add the Stutter option to the context menu.
This permission allows the extension to inject the content script code into the browser tab when an action takes place, like clicking on the extension icon. It provides a limited access to the tab that's active when triggered.
Options in the settings page are stored in browser storage by using this permission. These settings persist between browser restarts.
In a future release of stutter, these settings will sync between browsers if you have browser sync enabled.
Full page content is analyzed and isolated by means of the Mozilla Readability Library. The version in this project is modified for linting and exported as an es6 module. No changes have been made to the library logic.
babel-polyfill is used during runtime to emulate a full ES2015+ where a browser may be insufficient.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
The easiest addition to stutter is the creation of new themes. Adding a new theme requires only three additions to the code-base:
-
Add a new scss file in
src-content/themes/
that begins with an underscore and is named for your theme, such assrc-content/themes/_yourtheme.scss
. Copy the_default.scss
file as a starting point and change the colors to your heart's desire. The first line of your scss file should be formatted like so (see other themes as examples):#__stutter.theme-yourtheme {
-
Add a your theme to the themes list by appending
@import "yourtheme"
tosrc-content/themes/_themes.scss
. -
Add your theme's name to the select box in the options page located at
src-options/index.html
That's it! Pick a descriptive name and send a pull request!
Mozilla's Readability library - http://www.apache.org/licenses/LICENSE-2.0