Introduction :

In this Blog, we are going to discuss how to perform select events one tab to another tab events. Those events the are radio button, select tag, and range.

Flow diagram :

Prerequisites :

Javascript

Steps :

Step 1: Add the Chrome extension to the browser

Add the Chrome extension to the browser, follow the steps on the below reference page.

Ref – How to create a browser extension tab events communication using JavaScript?

Step 2: Navigating an events page

In this page, we have three types of events. if you need any sample code you can refer below the HTML code.

1)The below code it explains about select tag event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Radio button</title>
</head>
<style>
  .center {
  margin: auto;
  width: 30%;
  border: 3px solid green;
  padding: 10px;
}
</style>
<body>
     <div class="center">
      <h1> Radio Button</h1>
     <label for="html">
      <input type="radio" id="html" name="fav_language" value="html"><br><br>
      HTML
     </label> <br><br>
     <label for="html">
      <input type="radio" id="html" name="fav_language" value="html"><br><br>
      CSS
     </label><br><br>
     <label for="javascript">
      <input type="radio" id="javascript" name="fav_language" value="JavaScript"><br><br>
      JavaScript
     </label><br><br>
    </div>
</body>

A sample .radiobutton.html file can be found in the following git repository file.

https://github.com/episyche/browser_extension_sending_radio_select_range_events/blob/master/radionbutton.html

2) The below code it explains about select tag event

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SelectBox</title>
</head>
<style>
  .center {
  margin: auto;
  width: 30%;
  border: 3px solid green;
  padding: 10px;
}
</style>
<body>
<div class="center">
  <h1> Choose a car:</h1>
<select class="cars" id="cars">
  <option value="mercedes">Mercedes</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="audi">Audi</option>
</select>
<select name="cars">
  <option  value="mercedes">Apple</option>
  <option  value="volvo">Banana</option>
  <option  value="saab"> Cucumber</option>
  <option  value="audi">Dragonfruit</option>
</select>
</div>
</body>
</html>

A sample .select.html file can be found in the following git repository file.

https://github.com/episyche/browser_extension_sending_radio_select_range_events/blob/master/selecttag.html

3)below this code it explains about range event

<!DOCTYPE html>
<html lang="en"
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Range</title>
</head>
<style>
  .center {
  margin: auto;
  width: 30%;
  border: 3px solid green;
  padding: 10px;
}
</style>
<body>
  <div class="center">
  <h1>Display a Range Field</h1>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50"><br><br>
    <label for="range_weight">Weight: </label> <input type="range" name="weight" class="slider" min="0" max="100" id="vo"
      value="75">
</div>
</body>
</html>

A sample .range.html file can be found in the following git repository file.

https://github.com/episyche/browser_extension_sending_radio_select_range_events/blob/master/range.html

Step 2: Get the radio button value

Radio button :

Radio buttons are everywhere on the web. In fact, they’re so common that HTML has its own input type for them, allowing anyone with HTML knowledge to insert them on a page. As long as the code is written properly, the browser will handle all basic functionality for you.

1) Add the following code to the content.js file

document.addEventListener('mouseup', function (e) {
  let createForType;
  if (e.target.tagName === "LABEL") {
      let forType = e.target.attributes;
      if (forType.for !== undefined) {
          let getForType = forType.for.value;
          createForType = document.getElementById(getForType);
      }
      else if (forType.for === undefined) {
          let parent = e.target.parentNode;
      }
      if (createForType !== undefined) {
          if (createForType.type === "radio") {
              chrome.runtime.sendMessage({
                  type: "radioEvent",
                  event: {
                      tagName: createForType.tagName,
                      value: createForType.value,
                      type: createForType.type,
                      className: createForType.className,
                      id: createForType.id,
                      checked: !createForType.checked
                  }
              })
          }
      }
  }
})

This JS code listens for mouseup events on a page. in this event check if the target element LABEL tag. Finally, if the element is a radio input, it sends a message to the Chrome extension background script with information about the radio input, including its tag name, value, type, class name, ID, and whether it is checked or not.

2) Add the following snippet to your background.js file

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.type === 'radioEvent') {
    chrome.storage.sync.get(['mobiletabid'], function (result) {
        let mobileTabId = result.mobiletabid;
        console.log('radioEvent', message, 'mobileTabId')
        chrome.tabs.sendMessage(mobileTabId, { type: 'radioEvent', message })
    })
}
})

This JavaScript code listens for messages from a Chrome extension's background script. When it receives a message of type 'radioEvent', it retrieves the 'mobile-tabid' from Chrome storage and sends a message containing the received 'radioEvent' message to the tab identified by 'mobile tabid'.

3) Add the following snippet to your content.js file

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  if (message.type === "radioEvent") {
    let radioBtnId = message.message.event.id;
    let radioBtnValue = message.message.event.value;
    let radioBtnTypeFCE = message.message.event.type;
    let radioBtnTagNameFCE = message.message.event.tagName;
    let radioBtnChecked = message.message.event.checked;

    if (radioBtnId) {
        let createId = document.getElementById(radioBtnId);
        createId.value = radioBtnValue;
        createId.checked = radioBtnChecked;
    }
    else if (radioBtnTypeFCE) {
        let createBtnType = document.getElementsByTagName(radioBtnTagNameFCE);
        for (i = 0; i < createBtnType.length; i++) {
            if (radioBtnTypeFCE === createBtnType[i].type) {
                if (radioBtnValue !== createBtnType[i].value) {
                    createBtnType[i].checked = radioBtnChecked;
                }
            }
        }
    }
}
})

This JavaScript code listens for messages from a Chrome extension's background script. When it receives a message of type 'radioEvent', it retrieves information about a radio button, such as its ID, value, type, tag name, and checked status. Then, it updates the corresponding radio button element on the webpage based on this information.

4) If you want to test the radio button, you can open the radiobutton.html file

5) If you click on the actual tab, the new tab will also get the values

if you can click the button and also change the value in the new tab

step 3: Get the select tag value :

Select tag :

The <select> tag in HTML is used to create a dropdown list of options within a form. Users can select one option from the list, and the selected value can be submitted along with other form data when the form is submitted. This tag is commonly used for providing users with a set of predefined choices in a user-friendly dropdown format.

1)Add the following code to the content.js file

  else if (e.target.tagName === "SELECT") {
        let createSelectId;
        createSelectId = e.target;
        let boxid = createSelectId.id;
        let selectBoxId = e.target.attributes;
        let createClassName = Array.from(document.getElementsByClassName(createSelectId.className));
        let classData = createClassName.findIndex((element) => element === createSelectId);
        let createTagName = Array.from(document.getElementsByTagName(createSelectId.tagName));
        let TagNameData = createTagName.findIndex((element) => element === createSelectId);
        let selectTagName = createSelectId.tagName;
        let selectName = createSelectId.name;
        chrome.runtime.sendMessage({
            type: "selectEvent",
            event: {
                tagName: createSelectId.tagName,
                name: createSelectId.name,
                value: createSelectId.value,
                className: createSelectId.className,
                id: createSelectId.id,
                checked: !createSelectId.checked,
                type: createSelectId.type,
                classNameIndex: classData,
                TagNameIndex: TagNameData,
            }
        })
    }

This JavaScript code handles mouseup events on SELECT elements. When a SELECT element is clicked, it gathers various attributes and properties of the element such as ID, class name, tag name, and name. Then, it sends a message to the Chrome extension's background script containing this information as part of a 'selectEvent' type message.

2)Add the following code in the background.js file

else if (message.type === 'selectEvent') {
    chrome.storage.sync.get(['mobiletabid'], function (result) {
        let mobileTabId = result.mobiletabid;
        chrome.tabs.sendMessage(mobileTabId, { type: 'selectEvent', message })
    })
}

This JavaScript code listens for messages from a Chrome extension's background script. If the received message is of type 'selectEvent', it retrieves the 'mobiletabid' from Chrome storage and sends a message containing the received 'selectEvent' message to the tab identified by 'mobiletabid'.

3)Add the following code to the content.js file

 else if (message.type === "selectEvent") {
        let selectBoxTagId = message.message.event.id;
        let selectBoxTagValue = message.message.event.value;
        let selectBoxTagClassName = message.message.event.className;
        let selectBoxTagname = message.message.event.name;
        let selectBoxListnerTagName = message.message.event.tagName;
        let selectBoxTagType = message.message.event.type;
        let selectBoxTagChecked = message.message.event.checked;
        let selectBoxTagIndex = message.message.event.classNameIndex;
        let selectBoxListnerTagNameIndex = message.message.event.TagNameIndex;
        let selectBoxValue = message.message.event.value;
        let selectBoxChecked = message.message.event.checked;
        if (selectBoxTagId) {
            let listnerSelectBoxId = document.getElementById(selectBoxTagId);
            listnerSelectBoxId.value = selectBoxValue;
            listnerSelectBoxId.checked = selectBoxChecked;
        }
        else if (selectBoxTagClassName) {
            let createSelectBoxClassName = document.getElementsByClassName(selectBoxTagClassName);
            createSelectBoxClassName.value = selectBoxValue;
            createSelectBoxClassName.checked = selectBoxChecked;
        }
        else if (selectBoxTagIndex) {
            let selectBoxIndexCN = document.getElementsByTagName(selectBoxListnerTagName)
            if (selectBoxListnerTagNameIndex >= 0 && selectBoxIndexCN.length >= selectBoxListnerTagNameIndex) {
                let index = selectBoxListnerTagNameIndex;
                let element = selectBoxIndexCN[index];
                element.value = selectBoxValue;
                element.checked = selectBoxChecked;
            }
        }
        else if (selectBoxListnerTagNameIndex) {
            let selectBoxTagNameCN = document.getElementsByTagName(selectBoxTagNameCN)
            if (selectBoxListnerTagNameIndex >= 0 && selectBoxTagNameCN.length >= selectBoxListnerTagNameIndex) {
                let index = selectBoxListnerTagNameIndex;
                let element = selectBoxTagNameCN[index];
                element.value = selectBoxValue;
                element.checked = selectBoxChecked;
            }
        }
    }

This JavaScript code handles messages of type 'selectEvent' received from a Chrome extension's background script. It extracts various properties of the select box element from the received message, such as ID, value, class name, tag name, type, checked status, and index. Then, it updates the corresponding select box element on the webpage based on this information.

4)If you want to test the radio button, you can open the selecttag.html file

5)If you click on the actual tab, the new tab will also get the values

If you click on the select tag value

The new tab will also get the value

step 3: Get the range value

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). The default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the attributes below. max - specifies the maximum value allowed.

1)Add the following code to the content.js file

else if (e.target.tagName === "INPUT") {
    let forType = e.target.attributes;
    let createForType = e.target;
    let parent = e.target.parentElement.tagName;
    let inputclassname = createForType.className;
    let createselectTagName = Array.from(document.getElementsByTagName(createForType.tagName));
    let selectBoxTagNameIndex = createselectTagName.findIndex((element) => element === createForType);

    if (createForType !== undefined) {
        {
            chrome.runtime.sendMessage({
                type: "inputEvent",
                event: {
                    type: createForType.type,
                    id: createForType.id,
                    value: createForType.value,
                    name: createForType.name,
                    tagName: createForType.tagName,
                    TagNameIndex: selectBoxTagNameIndex,
                    checked: !createForType.checked,
                    parentElement: createForType.parentElement.tagName,
                    className : createForType.className
                }
            })
        }
    }
}

This JavaScript code listens for mouseup events on INPUT elements. When an INPUT element is clicked, it gathers various attributes and properties of the element such as ID, value, name, tag name, class name, and parent element's tag name. Then, it sends a message to the Chrome extension's background script containing this information as part of an 'inputEvent' type message.

2)Add the following code in the background.js file

else if (message.type === 'inputEvent') {
    chrome.storage.sync.get(['mobiletabid'], function (result) {
        let mobileTabId = result.mobiletabid;
        console.log('inputEvent', message, 'mobileTabId')
        chrome.tabs.sendMessage(mobileTabId, { type: 'inputEvent', message })
    })
}

This JavaScript code listens for messages from a Chrome extension's background script. If the received message is of type 'inputEvent', it retrieves the 'mobiletabid' from Chrome storage. Then, it logs the received message and sends it along with the 'inputEvent' type to the tab identified by 'mobiletabid'.

3)Add the following code in the content.js file

else if (message.type === "inputEvent") {
    let inputBtnId = message.message.event.id;
    let inputBtnType = message.message.event.type;
    let radioBtnTagName = message.message.event.tagName;
    let parentElement = message.message.event.parentElement;
    let inputBtnValue = message.message.event.value;
    let inputclassname = message.message.event.className;
    let inputBtnChecked = message.message.event.checked;
    let TagNameIndex = message.message.event.TagNameIndex;
    if (inputBtnId) {
        let inputId = document.getElementById(inputBtnId);
        inputId.value = inputBtnValue;
        inputId.checked = inputBtnChecked;
    }
   else if( inputclassname){
    let createInputCN = document.getElementsByClassName(inputclassname );
    for (let i=0; i< createInputCN.length; i++){
        if( createInputCN[i].type === inputBtnType){
            if(createInputCN[i].className === inputclassname )
            createInputCN.checked = inputBtnChecked;
        }
    }
   }
   else if (radioBtnTagName) {
    let inputType = document.getElementsByTagName(radioBtnTagName);
    let index = inputType[TagNameIndex]
    for (let i = 0; i < inputType.length; i++) {

        if (inputType[i].type === "checkbox") {
            if (inputBtnType === inputType[i].type) {
                if (inputBtnValue === inputType[i].value) {
                    inputType[i].checked = inputBtnChecked;
                }
            }
        }
    }
}
}

This JavaScript code handles messages of type 'inputEvent' received from a Chrome extension's background script. It extracts various properties of the input element from the received message, such as ID, type, tag name, parent element, value, class name, checked status, and tag name index. Then, it updates the corresponding input element on the webpage based on this information.

4)If you want to test range, you can open the range.html file

5)If you click on the actual tab, the new tab will also get the values

A Sample GitHub repo, with all the required configurations, is given below.

https://github.com/episyche/browser_extension_sending_radio_select_range_events

How to perform select events one tab to another tab?