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.

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

Websites: StackOverflow, npmjs.com and pypi.org (see Issue #14 for future plans)
Registries: NPM, PYPI and Go (only on pkg.go.dev)
Advisories: Debricked, Snyk, Socket and DepsDev

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.

https://user-images.githubusercontent.com/1287098/234654340-8300c983-1a01-41fd-84f5-4a6a37cf98a8.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:

Creating an issue on our GitHub repository for bugs and features
Joining our GitHub discussion for questions and ideas
Participating in our Discord channel

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:

Clone the project from the repository.
Install the dependencies with yarn install.
In one terminal, run yarn build:watch. This will rebuild the extension every time you change a file.
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

A YouTube video for the Ma'akaf community about how to start to contribute to this project (in Hebrew).

Contributors

License

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

os-scar / overlay

readme