Chrome extension

[Japanese(日本語)]

This is a sample Chrome extension, which display the current URL string.

If you are a computer programmer using cloud services, this might help you distinguish which environment(development, production, etc…) you use.

1.Files

   background.js
   contentscript.js
   contentscript.css
   manifest.json
   icons/mysample.png

2. Surce code.

2.1. background.js

chrome.tabs.onUpdated.addListener(function  (tabId, changeInfo, tab){
    if(changeInfo.url){
        const message = {"type": "change_url"};
        chrome.tabs.sendMessage(tabId, message);
    }
  }
);

2.2. contentscript.js

var PANEL_ID          = 'mysample_panel';
var PANEL_CLASS_LEFT  = 'mysample_panel_top_right';
var PANEL_CLASS_RIGHT = 'mysample_panel_top_left';

(function(){
    chrome.runtime.onMessage.addListener(
     async function(message, sender, callback){
       if(message.type === "change_url"){
           change_url(location.href);
       }
     }
  );
})();

window.onload = showMySamplePanel();

//----------------------------------------------------------
// [Japanese] URL文字列を表示する MY_PANEL  をDOMに追加する。
// [English]  Add "MY_PANEL" to the DOM, which shows the url string.
//----------------------------------------------------------

async function showMySamplePanel() {
    var panel = document.createElement('div');
    panel.setAttribute('id', PANEL_ID);
    panel.setAttribute('class', PANEL_CLASS_LEFT);
    panel.onmouseover = moveMySamplePanel;

    
    var message = document.createElement('p');
    message.innerText = '';
    panel.appendChild(message);
    document.body.appendChild(panel);
    change_url(location.href);
}

//----------------------------------------------------------
// [Japanese] MY_PANELの位置を変える
// [English]  Change MY_PANEL's position
//----------------------------------------------------------
async function moveMySamplePanel() {
    var panel = document.getElementById(PANEL_ID);
    var elementClass = panel.getAttribute('class');
    if (elementClass == PANEL_CLASS_RIGHT) {
        panel.setAttribute('class', PANEL_CLASS_LEFT);
    } else {
        panel.setAttribute('class', PANEL_CLASS_RIGHT);
    }
}

//----------------------------------------------------------
// [Japanese] URL文字列をセットする
// [English]  set the url string.
//----------------------------------------------------------
function change_url(url)
{
    // Change Message when the URL changed.
    var panel = document.getElementById(PANEL_ID);
    panel = document.getElementById(PANEL_ID);
    panel.textContent = url;
    panel.style.backgroundColor="rgba(255,0,0,0.5)";
}

2.3. contentscript.css

#mysample_panel {
  padding: 5px;
  border: solid 1px #000000;
  position: fixed;
  top: 5px;
  z-index: 99999;
  color: black;
  float: left;
  font-weight: bold;
  font-size: x-small;
}

.mysample_panel_top_right {
  position: fixed;
  top: 1px;
  right: 15px;
}

.mysample_panel_top_left {
  position: fixed;
  top: 1px;
  left: 15px;
}

2.4. manifest.json

{
    "manifest_version": 3,
    "name": "my sample",
    "version": "1.0",
    "description": "show url string",
    "icons": { 
        "16":  "icons/mysample.png", 
        "48":  "icons/mysample.png", 
        "128": "icons/mysample.png"
    },

    "content_scripts": [
        {
            "matches": ["https://*/*", "http://*/*"],
            "js": ["contentscript.js"],
            "css": ["contentscript.css"],
            "run_at": "document_end"
        }
    ],
    "permissions" :[
        "storage", "scripting", "tabs", "activeTab" 
    ],
    "background" : {
      "service_worker" : "background.js"
    }
}

and also, You have to prepare a image file for icons/mysample.png.