JavaScript

If I "Inspect" a pop-up window/message box on chrome browser (by right clicking a web-page in chrome browser) there is a field called "Accessibility".

Under "Accessibility", there are "GenericContainer" which has "list". this list has a number of names as values (e.g. different type of pen).

I would like to copy all values (names) of "list" and separate each value (names) by ";" when I click that pop-up/ message box using a Add-On in Chrome.

How can I make that Add-On?

I understand that I have to write javascript to execute with other .js file, for example, codes in this tutorial-
https://markb.uk/building-a-simple-google-chrome-extension.html
But I don’t know related function I need to call.

Please keep it in your mind that I am new. Thanks in advance!

PS:

At least provide some tutorial, where I can find related instruction.

<SCRIPT language="javascript" type="text/javascript">



function salary()


{
a=Number(document.calculator.hourlyrate.value);

b=Number(document.calculator.hoursworked.value);

c=Number(document.calculator.weeks.value);

d=(a*b*c);

document.calculator.total.value=d;
}


function points()

{

a=Number(document.calculator.age.value);

b=Number(document.calculator.yos.value);

c=((a*2)+b);

document.calculator.total2.value=c;
if (c < 60) {
	document.calculator.EmployerContribution.value="You are at 1% Employer Contribution";
	}
	else if (c > 60 && c < 89) {
	document.calculator.EmployerContribution.value="You are at 3% Employer Contribution";
	}
	else if (c > 90 && c < 119) {
	document.calculator.EmployerContribution.value="You are at 5% Employer Contribution";
	}
	else if (c >= 120) {
	document.calculator.EmployerContribution.value="You are at 7% Employer Contribution";
	}
}


</SCRIPT>

Word.ApplicationClass

<asp:Button runat="server" id="btnSubmit" style="width:120px;padding: 0; border: 0;background-color:#D8D8D8 !important;color: #808080; height:30px;" Text="Generate Report" OnClick="btnSubmit_Click" Enabled="false" />

script type="text/javascript">

//function to enable button if two textboxes contains text
function SetButtonStatus(sender, target) {
var uuid = document.getElementById('<%=suuid.ClientID %>');
var calllist = document.getElementById('<%=caller_list_id.ClientID %>');
var phone = document.getElementById('<%=phonenumber.ClientID %>');
var startdate = document.getElementById('<%=date_start.ClientID %>');
var enddate = document.getElementById('<%=date_end.ClientID %>');
var calltype = document.getElementById('<%=call_type.ClientID %>');

//Condition to check whether user enters text in a two textbox or not
if ((((((sender.value.length >= 3 || uuid.value.length >= 3) || (sender.value.length >= 3 || calllist.value.length >= 3) || (sender.value.length >= 3 || phone.value.length >= 3)  || (sender.value.length >= 3 || startdate.value.length >= 3)  || (sender.value.length >= 3 || enddate.value.length >= 3)  || (sender.value.length >= 3 || calltype.value.length >= 3))))))
document.getElementById(target).disabled = false;
else
document.getElementById(target).disabled = true;
}
</script>

<asp:TextBox id="phonenumber" style="width:150px;" class="form-control" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />

    <script type="text/javascript">
     $(document).ready(function() {
     $("input").keypress(function(e) {
      if (e.which == 254) {
       $('#btnSubmit').click();
      return false;
     }
    return true;
  });
});
</script>

I want count in my textarea product codes.
I have whitelist for product codes so I cant type or write anything else into textarea.
Found bad issue, I can write only static product codes like (first 16 is product code other 6 is how many products it is in list...):

0FAR12345H00123C + 00001P
0FAR54321H00321C + 00001P
0FAR54321H00321C + 00002P

So now I have two problems..
First problem, whitelist universal product codes like this:

0FAR12345H00123C + 00001P
0FAR543H00321C + 00001P
0F321H321C + 00001P
0R31H1C + 001P

Second problem is how to count these product codes under textarea + overall count.

Example under textarea counts:
0FAR12345H00123C: 5
0FAR543H00321C: 2
0F321H321C: 6
0R31H1C: 4
Overall: 17

Javascript:

<pre>
"use strict";
	toFile.focus();

	var timeoutId;
	$('#toFile').on('keypress', function() {
	    console.log('Textarea Change');
	    
	    clearTimeout(timeoutId);
	    timeoutId = setTimeout(function() {
	        // Runs 3 second (3000 ms) after the last change    
	        saveToFile();
	    }, 3000);
	});

	toFile.addEventListener("keyup", event => {
	    const data = toFile.value.split("\n");
	    const result = data.unique();
	    info.textContent = result.length !== data.length ? "Duplicate removed" : "";
	    toFile.value = result.join('\n');
	});

	if (!Array.prototype.unique) {
	    Object.defineProperty(Array.prototype, "unique", {
	        configurable: false,  // these 3 properties default to false so not needed
	        enumerable: false,    // But have added them just to show their availability.
	        writable: false,         
	        value: function() { 
	            const existing = {};
	            return this.filter(a => existing[a] = !existing[a] ? true : false);
	        }
	    });
	} else {
	    throw new Error("Array.prototype.unique already defined.");
	}

	const CODE = ['Product', 'Codes', 'Here'];
	const reg = /^([a-zA-Z0-9]{1,6})$/;

	// Ensure values been inserted are in correct format
	function onInput() {
	  let values = event.target.value
	    .split('\n')
	    .map(v => {
	      v = v.trim().toUpperCase();
	      if (v.length <= 16) {
	        if (CODE[0].substr(0, v.length) != v &&
	          CODE[1].substr(0, v.length) != v) {
	          v = v.substr(0, v.length - 1);
	        }
	      } else if (!v.substr(16, 22).match(reg)) { // at the moment static 16 product code lenght + 6 is count of products.
	        v = v.substr(0, v.length - 1);
	      }
	      return v;
	    }).join('\n');

	  event.target.value = values;
	}
	
	function saveToFile() {
	    console.log('Saving to the db');
	    toFile = $('#toFile').val().replace(/\n\r?/g, '<br />');
		$.ajax({
			url: "test2.php",
			type: "POST",
			data: {toFile:toFile}, // serializes the form's elements.
			beforeSend: function(xhr) {
	            // Let them know we are saving
				$('#status').html('Saving...');
			},
			success: function(toFile) {
				// You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
	            // Now show them we saved and when we did
	            var d = new Date();
	            $('#status').html('Saved! Last: ' + d.toLocaleTimeString());
			},
		});
	}

	$('.form').submit(function(e) {
		saveToFile();
		e.preventDefault();
	})

<form class="contact-form" method="post">
    <textarea id="toFile" name="toFile" oninput="onInput()"></textarea><br>
    <input type="submit" value="Submit">
</form>

<!-- under here I want show count of product codes + overall count -->

<div id="status"></div>
<div id="info"></div