Display a custom banner on the page based on the host.

Latest Version

Version

0.1.2

Update

June 15, 2024

Size

24.1KiB

Developer

Custom Host Banner Extension

Each host can have a banner with different colour and text.

I'm a developer who works on a number of products where the dev, test, uat and prod environments all look the same, so I made this extension to make it easier to see where I am.

Copy and paste a url into the extension, set a banner colour and text, and then when you go to any page on that host, the banner will be displayed. There are a couple of different positioning options to help ensure it will work on most sites.

The code is here: https://github.com/andyb3/custom_host_banner

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Custom Host Banner", "version": "0.1.2", "description": "Display a custom banner on the page based on the host.", "permissions": [ "storage" ], "background": { "service_worker": "service_worker.js" }, "content_scripts": [ { "matches": [ "http://*/*", "https://*/*" ], "js": [ "page.js" ], "css": [ "page.css" ] } ], "action": { "default_popup": "options.html", "default_icon": { "16": "images/banner16.png", "32": "images/banner32.png", "48": "images/banner48.png", "128": "images/banner128.png" } }, "icons": { "16": "images/banner16.png", "32": "images/banner32.png", "48": "images/banner48.png", "128": "images/banner128.png" }, "options_page": "options.html", "manifest_version": 3}

Download CRX(24.1KiB)