Code Monkey home page Code Monkey logo

overlay's Introduction

Badge Commits Badge Issues Badge License Badge Version Badge Mozilla Badge Chrome Badge Discord


Overlay

Overlay is a browser extension that helps developers evaluate open source packages before picking them. It gathers data from various sources, such as Snyk Advisor, Debricked, Socket.dev, and Deps.dev, and displays them on the package pages of popular registries like npm, PyPI, and Go.

Get Overlay for Firefox Get Overlay for Chromium

Platinum Sponsors

Gold Sponsors


Overlay Screenshot

With Overlay, you can quickly consider packages based on metrics like popularity, quality, security, maintenance, and compatibility. You can also see detailed information about each package, such as its license, dependencies, vulnerabilities, issues, releases, and more.

Overlay aims to help developers make informed decisions when choosing open source packages for their projects.

Currently supported

Installation

Overlay is available for Chrome and Firefox. You can install it from the following links:

Usage

After installing Overlay, you can use it on any supported page (such as StackOverflow). You will notice indicators on package names and links, showing the number of issues. When you hover over an indicator, you will see more details about the package. You can also click on the indicator to open a modal with even more details.

demo.mp4

You can customize the sources that Overlay uses by clicking on the Overlay logo in the extensions bar.

Feedback

We would love to hear your feedback and suggestions on how to improve Overlay. You can contact us by:

Contribution

We welcome contributions from anyone who wants to help us improve Overlay. If you are interested in contributing, please fork this repository and make your changes. Then submit a pull request with a clear description of your changes and why they are needed. We will review your pull request and merge it if it meets our standards.

Please make sure to follow our code style and conventions.

If you have any questions or suggestions about contributing, please feel free to contact us.

Technical details

Overlay is written in Vue.js and uses a background script to fetch package data from various external sources.
It injects the indicator as a WebComponent into the current web pages and uses a popup menu to control the displayed sources.

Local Development

To start developing the extension locally, follow these steps:

  1. Clone the project from the repository.
  2. Install the dependencies with yarn install.
  3. In one terminal, run yarn build:watch. This will rebuild the extension every time you change a file.
  4. In another terminal, run yarn start:chrome (or yarn start:firefox). This will reload the extension on the development browser every time the extension is built.

You can now test and debug the extension on Chrome or Firefox.

Testing

To run unit tests, use yarn test. We use Jest for testing.

For end-to-end tests, see the e2e/README.md file.

Resources

Contributors

License

Overlay is licensed under the MIT license. See the LICENSE file for more details.

overlay's People

Contributors

baruchiro avatar ettestim avatar jossef avatar rzarviv avatar hagarfisher avatar itay-goldraich avatar oferlis avatar guynachshon avatar oshriasulin avatar uriklar avatar zviki-zaks avatar aponace avatar dipsylala 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.