A Browser Extension
Firefox Addons
.
Chrome Web Store
·
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 Chrome. Plans are in place to also support Safari in the near future.
- Firefox
- Chrome & Chromium based browser such as 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. I plan to make this configurable in the future.
There are a couple of options for installation.
- Firefox: Environment Marker on Addons.mozilla.org (AMO)
- Chrome: Environment Marker on Chrome Web Store
Note: Pre-built files are available for:
- Firefox: build/environment-marker-firefox.zip
- Chrome: build/environment-marker-chrome.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
gulp
- Develop...
- Run the build script when ready
npm run build
See Usage instructions in the Wiki
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