Selecting span elements by id for chrome extension

Question

I'm currently trying to select all spans that start with MTG_INSTR and follow by a number (MTG_INSTR1, MTG_INSTR2, etc). I've tried jquery and editing the text to test it using

(function() {
"use strict";

window.onload = function() {
    gatherNames();

};

function gatherNames()
{
    $("span[id^='MTG_INSTR$']").val("TEST");
    setTimeout(gatherNames, 5000);
}
})();

but that didn't work as nothing happened. I also tried using querySelectorAll

var elements = document.querySelectorAll("[id^=MTG_INSTR$]");
for (var i = 0; i < elements.length; i++)
{
    var text = elements[i].innerHTML;
    alert(text);
}

that also didn't work. I'm trying to do this for my school's class search page and gather all the teacher's names for a chrome extension. This is my first attempt at a chrome extension and I'm using this piece on the content_script.js file if it matters and an example of the HTML for the corresponding span/parent div is

<div id="win0divMTG_INSTR$2">
   <span class="PSLONGEDITBOX" id="MTG_INSTR$2">EXAMPLE NAME</span>
</div>

Also, this is part of my manifest.json that includes the jquery.js I downloaded and placed in the same folder as the other files.

"background": {
"scripts": [
  "jquery.js",
  "background.js"]
 "persistent": false
},

"content_scripts": [
{
"matches":[
"css": ["content_script.css"],
"js": ["jquery.js", "content_script.js"]
}
 ]

I've updated what I fully have in my js file and the only error I get from the console is [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/, which I checked is solely from the school's site. — Luke, May 18 '17 at 21:45

score 0 · Answer 1 · answered May 18 '17 at 21:28

0

Possibly that jquery is not configured properly in your extension. You may also try the native document.getElementById.

answered May 18 '17 at 21:28

orabis

2,749
2
13
29

score 0 · Accepted Answer · answered May 18 '17 at 21:46

0

$ is not a valid attribute character for an id in HTML. Remove the $, sign and they will begin to work.

I have tested it.

<div id="win0divMTG_INSTR$2">
    <span class="PSLONGEDITBOX" id="MTG_INSTR2">EXAMPLE NAME</span>
    <span class="PSLONGEDITBOX" id="MTG_INSTR3">EXAMPLE NAME</span>
</div>
<script>
    var elements = document.querySelectorAll("[id^=MTG_INSTR]");
    console.log(elements);
    /*for (var i = 0; i < elements.length; i++) {
        var text = elements[i].innerHTML;
        alert(text);
    }*/
</script>

Output

[span#MTG_INSTR2.PSLONGEDITBOX, span#MTG_INSTR3.PSLONGEDITBOX]

Hope this helps...

answered May 18 '17 at 21:46

Clinton Yeboah

126
3
9

Valid characters allowed in html attribute values: http://stackoverflow.com/a/79022/6443770 – Clinton Yeboah May 18 '17 at 21:49
Thank you, this worked but I also saw that I made a dumb mistake and was trying to access elements created by the website's JS and these spans don't appear on the Source Page html. Do you know if there's a way around this? – Luke May 18 '17 at 22:10
I will be happy to help. But it's difficult to understand what you mean from these few sentences. Try and ask a _new question_ with details, and perhaps send me the link here. Will try to answer or someone else may. – Clinton Yeboah May 18 '17 at 22:15
@LukeSeo That shouldn't matter. jQuery selectors work with the current DOM contents, not the original HTML. – Barmar May 18 '17 at 22:17
@Barmar I agree with you. Jquery can operate on dynamically created elements – Clinton Yeboah May 18 '17 at 22:24
@Barmar I tried using jQuery and use the line $("span[id^=MTG_INSTR]").text('text'); to edit the text in all the spans with an id that starts with MTG_INSTR, but it still fails to do so. – Luke May 18 '17 at 22:44

Selecting span elements by id for chrome extension

2 Answers2