This README outlines the details of collaborating on this browser extension
Install via the chrome web store
The purpose of this extension is to surface meta information about a web application running in a given browser tab, in an easily visible way.
For example, if you had a web app that was configured to run inside a docker container and you had several nearly identical containers running side-by-side, this could help you easily disambiguate between them.
All of the information that this extension can display is provided
via <meta> tags, found within the <head> of a web application's HTML.
These follow the following convention
<meta type="tab-info" name="PROPERTY_NAME" content="PROPERTY_VALUE" />For example, one tag that must be present in order for the extension to activate is
<meta type="tab-info" name="enabled" content="true" />And if you wanted to color code this extension's button in the browser toolbar
<meta type="tab-info" name="button-color" content="#a3a" />| Name | Type | Description |
|---|---|---|
enabled |
string |
"true" in order to activate the extension |
button-color |
string |
Color of the toolbar button (e.g., "#ff0") |
popup-title |
string |
Title of the extension popup window |
popup-description |
string |
Text (markdown) in the extension popup window |
We also support retrieval of information from a JSON API, through the use of a info-url property
For example if this meta tag is found in a tab's HTML
<meta type="tab-info" name="info-url" content="http://localhost:3001?tabId=abcd1234" />This extension will make a GET request to http://localhost:3001?tabId=abcd1234 in order to obtain the information that would otherwise have been found in other tab-info meta tags.
{
"buttonColor": "#aa0",
"popupTitle": "Dev Environment: Staging",
"popupDescription": "### Uptime \n 8d 3h 22m \n ### Connecting \n ```\nssh root@127.0.0.1\n``` \n"
}
The resultant UI might look like
NOTE: Information in meta tags will be combined with information found via this API call, with the information from the API call "winning" in the event of any overlap
You will need the following things properly installed on your computer.
git clone <repository-url>this repositorycd tab-infoyarn
-
node demo-pages/index.jsto start an optional demo server, that surfaces pages likehttp://localhost:3001/demo1.htmlfor testing- You may wish to run this script in the background
-
yarn watch-prod -
In your Edge or Chrome browser, load the entire project folder as an unpacked extension
-
As you change files in this repo, the project will be rebuilt. You will have to go to your extensions management page to reload the extension manually each time this happens
yarn build
© 2021 LinkedIn