A Browser Extension
Firefox Addons
·
Chrome Web Store
·
Edge Add-ons
·
Opera addons
·
Report Bug
·
Request Feature
- Table of Contents
- About The Project
- Installation
- Development
- Usage
- Roadmap
- Localization
- Contributing
- License
- Contact
- Acknowledgements
A browser WebExtension that adds a color marker (ribbon) to the page depending on whether the URL contains a given string (e.g. 'http://dev-', 'http://qa-', 'http://prod-'). Currently, this extension supports Firefox and Chromium based browser such as Microsoft Edge, Opera and Brave. Plans are in place to also support Safari in the near future.
- Firefox
- Chrome & Chromium based browser
- Microsoft Edge
- Opera
- Brave
- Safari (coming soon...)
-
Configurable Ribbons - Add a URL or part of a URL, choose a color and a ribbon will be added to the page for any website that matches part of that URL. Here are some examples:
- github.com
- https://github.com
- https://github.com/XjSv/environment-marker
- http://dev.
- http://qa.
- http://prod.
- environment-marker
- *.google.com
- (?<!books).google.com
-
Configurable Ribbon Positions - Choose where to position the ribbon (top left, top right, bottom left, bottom right).
-
Configurable Ribbon Sizes - Choose one of 5 sizes (extra small, small, normal, large, extra large).
-
Ribbon Labels - Displays a label on the ribbon.
-
Import/Export - Export and import ribbon configurations.
-
Multilingual Support - Currently supports English, Spanish, German & French.
-
Reusable Color Swatch - The last 7 colors used will be available from the color swatch.
-
RegExp - When enabled the URL fragment can be used with RegExp instead of searching using indexOf.
-
Tab Counter - Displays the number of open tabs. Color is green when under 10 tabs and red when above. See Tab Counter Settings for more info.
-
Font Picker - Ability to select fonts for the ribbons. Font come from Google Fonts.
-
Favicon Marker - Ability to set a colored circle marker to the favicon of the site.
There are a couple of options for installation.
- Firefox: Environment Marker on Addons.mozilla.org (AMO)
- Chrome: Environment Marker on Chrome Web Store
- Edge: Environment Marker on Edge Add-ons
- Opera: Environment Marker on Opera addons
Note: Pre-built files are available for:
- Firefox: build/environment-marker-firefox.zip
- Chrome, Edge & Opera: build/environment-marker-chromium.zip
Step 1 - Build it
- Install dependencies
npm install
- Run the build script
npm run build
Step 2 - Navigate to: about:addons
Step 3 - Choose the "Install Add-on From File..."
Step 4 - Select build/environment-marker-firefox.zip.
- Install dependencies
npm install
- Run the default gulp task
npm run develop
- Develop...
- Run the build script when ready
npm run build
See Usage instructions in the Wiki
See Opera Usage instructions in the Wiki for specific Opera related settings.
See the open issues for a list of proposed features (and known issues).
Localization is done through Crowdin. To contribute to the translations see the Environment Marker Crowdin project page.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MPL-2.0 License. See LICENSE for more information.
Armand Tresova - @XjSv - atresova@gmail.com
Project Link: https://github.com/XjSv/environment-marker