Coder Social home page Coder Social logo

keyword_highlighter's Introduction

Skim Reader

A browser add-on that lets you highlight all occurrences of user defined terms on a website.

Potential usage scenarios that I could think of:

  • Studying
  • Recruiting (skimming candidate profiles for skills etc.)
  • Job search (skimming job offers for skills, benefits etc.)
  • Shopping (comparing article descriptions, reviews)
  • Dating sites (red & green flags on user profiles)
  • etc.

Permissions granted to this add-on

storage

Needed to store the user defined set of terms to the browser's local storage in order for the terms to stay available throughout browser restarts. Required by browser.storage, in particular:

  • browser.storage.local.get
  • browser.storage.local.set

scripting

Needed to inject the custom content script that is responsible to highlight the terms on the website by manipulating the website's DOM accordingly. Required by browser.scripting.executeScript

activeTab

Needed to inject the custom content script into the currently active tab upon the user's explicit interaction with the add-on. Required by browser.scripting.executeScript

Since this add-on explicitly is meant to work only on explicit user interaction in the currently active tab, the add-on does not need any host_permissions. For the same reason the full tabs permission is also not needed.

User data

The user specified terms will exclusively be stored locally in the browser storage and will never be transmitted by the add-on to any remote servers. All usage of the data is strictly for the purpose of highlighting terms on the website in the currently active tab.

The add-on does not access or collect any data about the browser or active tabs other than the tab ID.

// TODO: look at Additional Privacy Protocols // TODO: provide add on functionality to clear stored data

Technical details

Content Script functionality

In order to highlight the user specified terms in the currently active tab, the script will recursively traverse the DOM and add a <span> element with a style around any matched terms.

Unless the user explicitly uses the button in the add-on's browser action, the content script will not get injected and therefore not cause any performance impact.

Since some websites have extremely large DOM trees and since the user can define a large amount of terms to highlight, the traversal of the entire DOM might take some time. In my use cases it took up to 50 milliseconds in some cases with fairly large pages and roughly 30~50 different terms to highlight.

Distribution

// TODO get addon signed for self-distribution on https://addons.mozilla.org/en-US/developers/

keyword_highlighter's People

Contributors

philg-dev avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.