Search code examples
javascripthtmlgoogle-chromeparseint

How to properly use parseInt to select/check a span element from within a chrome extension


I am attempting to use parseInt to determine if a span element is equal to or greater than 1 from within my Google Chrome Extension.

I am attempting to check for this "0" to change and on change to launch a specific URL - See Image for Reference

Here is a screenshot of the "inspect" option from within chrome.

Here is the page HTML:

<div id="onlinebar" style="text-align: right">

	<a href="javascript:win1()" class="tb_options" title="Kalbėkis su savo piratais.">Užsuk į smuklę</a>&nbsp;&nbsp;| &nbsp;&nbsp;

	<span id="tb_gang" class="tb_options" onClick="ShowTbPopup(this); obShowHide(0)">My Fleet: (<b>2</b>)</span>&nbsp;&nbsp;| &nbsp;&nbsp;

	<span id="tb_friend" class="tb_options" onClick="ShowTbPopup(this); obShowHide(1)">My Friends: (<b>2</b>)</span>&nbsp;&nbsp;| &nbsp;&nbsp;

	<span id="tb_enemies" class="tb_options" onClick="ShowTbPopup(this); obShowHide(2)">My Enemies: (<b>0</b>)</span>&nbsp;&nbsp;&nbsp;&nbsp;

	<a id="closebox" href="#" onclick="javascript:var conf = confirm('Are you sure you want to remove the login box? (It can be turned back on from settings)'); if(conf){ document.getElementById('onlinebar').style.display='none'; setBarPrefs('11769'); }" style="margin-right:20px;"><img src="/images/close.gif" border="0"/></a>

</div>

This is what I have tried:

function checkEnemies(){
	numEnemies = parseInt($$("[id^=tb_enemies]")[0].title.split(" ")[0]);
	if (numEnemies >= 1){
		$$("a[href*='sea']")[0].click();
		return true;
	}
	return false;
}


var bool = checkEnemies();

And also this:

function checkEnemies(){
	numEnemies = parseInt($$('#tb_enemies')[0].title.split(" ")[0]);
	if (numMessages >= 1){
		$$("a[href*='sea']")[0].click();
		return true;
	}
	return false;
}


var bool = checkEnemies();

Thanks for any help you can offer.

-Shane


Solution

  • The number doesn't seem to be set as the value of the title attribute, you can get it directly from the element's content, here is an example:

    // jQuery
    
    let number = parseInt($("#tb_enemies b").text());
    console.log("jQuery the number is:", number);
    
    // vanilla JavaScript
    
    number = parseInt(document.querySelector("#tb_enemies b").textContent);
    console.log("vanilla JavaScript the number is:", number);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div id="onlinebar" style="text-align: right">
    
    	<a href="javascript:win1()" class="tb_options" title="Kalbėkis su savo piratais.">Užsuk į smuklę</a>&nbsp;&nbsp;| &nbsp;&nbsp;
    
    	<span id="tb_gang" class="tb_options" onClick="ShowTbPopup(this); obShowHide(0)">My Fleet: (<b>2</b>)</span>&nbsp;&nbsp;| &nbsp;&nbsp;
    
    	<span id="tb_friend" class="tb_options" onClick="ShowTbPopup(this); obShowHide(1)">My Friends: (<b>2</b>)</span>&nbsp;&nbsp;| &nbsp;&nbsp;
    
    	<span id="tb_enemies" class="tb_options" onClick="ShowTbPopup(this); obShowHide(2)">My Enemies: (<b>0</b>)</span>&nbsp;&nbsp;&nbsp;&nbsp;
    
    	<a id="closebox" href="#" onclick="javascript:var conf = confirm('Are you sure you want to remove the login box? (It can be turned back on from settings)'); if(conf){ document.getElementById('onlinebar').style.display='none'; setBarPrefs('11769'); }" style="margin-right:20px;"><img src="/images/close.gif" border="0"/></a>
    
    </div>

    What this does is to get the text content of the first <b> element inside the element with ID tb_enemies and parse that text to an integer.