Chrome extension to add more options to selection list?

[cbsarge]

I'm trying to figure out some javascript to use in a Chrome extension. The idea is to add some more options to a drop down list so players have some more choices. I've used the getElementByID function to add some html to existing divs but, this doesn't seem to be an option here as there is no div ID to target. The html I want to change is below. Is there a similar function to accomplish what I'm trying to do? I am hoping to add options for 500, 1000, 1500 and 2000.

Thank you!

<div class="training_quantity">
<select name="count" id="training_count_4">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
         <option value="10">10</option>
         <option value="25">25</option>
         <option value="50">50</option>
         <option value="100">100</option>
</select>
</div>

 

[vacunita]

Use the same approach, but use the createElement, and addOption functions.

var dropdDown=document.getElementById('training_count_4');
var newOption=documnent.createElement('option');
newOption.value="xxx";
newOption.text="xxx";
dropDown.options.addOption(newOption);

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

Hmmm... I tried placing the following code in my js file and no dice.

javascript:(function()
    {
		window.onload = function()  {
		var dropdDown=document.getElementById('training_count_4');
		var newOption=documnent.createElement('option');
		newOption.value="1000";
		newOption.text="1000";
		dropDown.options.addOption(newOption);
		};
    }
)();

 

[cbsarge]

Actually, the same drop down is used in multiple places on the page. If it could be selected by name (count in this case) then I could modify them all in one fell swoop to include the larger options. Is it possible to create an array of all the selection lists with the name "count" and ad the additional options to all of them?

Thanks Vacunita!

 

[vacunita]

I tried placing the following code in my js file and no dice.

Why? was there an error generated? Did you check the correct Drop down to see that the option was added. Any debugging you did?

You could use the getElementsByName function to get all elements with the same name in an array, and then loop through that to add the relevant options to each dropdown.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

With the original code you provided I'm receiving the following error: Uncaught TypeError: Cannot read property 'options' of null

The code as I have it in my js file is:

javascript:(function()
    {
        window.onload = function()  {
		var dropDown = document.getElementById('training_count_4');
		var newOption = document.createElement('option');
		newOption.value = "1000";
		newOption.text = "1000";
		dropDown.options.addOption('newOption');        
        };
    }
)();

 

[vacunita]

Uncaught TypeError: Cannot read property 'options' of null

Seems its not correctly getting the dropdown object so its null. Which is why it can't get the options property of a Null object.

Make sure the dropdown's ID is in fact training_count_4

And that there's no other element with that Id before the dropdown.

I've tried it out, and it works for me, it automatically adds the extra option to the dropdown.







----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[vacunita]

Addendum, the function name for adding the option is simply add rather than addOption, so to prevent a future error:

 dropDown.options.[red]add[/red]('newOption');

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

Thank you Vacunita - I'll make that change first chance I get and let you know how it goes.

 

[vacunita]

Remove the quotes, as you are just passing the object.

 dropDown.options.add(newOption);

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

I'm getting a different error now - Uncaught ReferenceError: documnent is not defined

the script is now like this:

javascript:(function()
    {
        window.onload = function()  {
		var dropDown = document.getElementById('training_count_4');
		var newOption = documnent.createElement('option');
		newOption.value = "1000";
		newOption.text = "1000";
		dropDown.options.add(newOption);        
        };
    }
)();

 

[vacunita]

C'mon, that's easy. Check your spelling

docum[b][red]n[/red][/b]ent

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

lol - whoops! missed that.

Now I'm getting this - Uncaught TypeError: Cannot read property 'options' of null

javascript:(function()
    {
        window.onload = function()  {
        var dropDown = document.getElementById('training_count_4');
        var newOption = document.createElement('option');
        newOption.value = "1000";
        newOption.text = "1000";
        dropDown.options.add(newOption);        
        };
    }
)();

 

[vacunita]

Back to the old error. Again make sure the Id exists, it can be read, and there's only one of them. I've tested this out, and it works as long as there's a drop-down with the appropriate ID.

The code has no errors any more, so its up to your implementation, which since I don't know what your actual page looks like i can't say for sure where the problem is.

Since its running onload, it may be that the dropdown is not fully rendered yet by the time it tries to access it or something like that.

You are going to have to figure out what's happening in your extension.

I'm just running the code directly when the extension loads by using the content_scripts section of the extension's json object.

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
    "[URL unfurl="true"]http://localhost/drop.html"[/URL]
  ],
  "content_scripts": [
    {
      "matches": ["[URL unfurl="true"]http://localhost/*"[/URL]],
      "js": ["opt.js"]
    }
  ]
  
}

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[cbsarge]

Hmmm... the URL of the game page never changes but, it looks like maybe pats of it are rendered in frames or something like that when certain parts of the game are accessed. I was thinking if I told the extension to run on all pages it would cover me but, perhaps I need to try to implement it in a way that allows me to run the js file with a toolbar shortcut. This would probably make it easier to debug too.

I have been unable to find an extension example so far that works this way (fire a js file on a button click) but, I'll keep looking.

Thank you very much for all your help so far!

 

[vacunita]

After reading through the extensions documentation, very quickly mind you, I think what you are looking for is the background_page property, and within that the chrome.browserAction.onClicked

This assigns a function to call when the extension button on chrome's toolbar is clicked.

You can then use executeScript to run your altering script.

http://code.google.com/chrome/extensions/tabs.html#method-executeScript

html>
<head>
<script>
console.log("Background.html"); // This gets displayed. O.K.
    
function runScript() {


}

// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
    	chrome.tabs.executeScript(tab.id, {file: "[red]content_script.js[/red]"});
  });
</script>
</head>
</html>

This page should be loaded in your extension via the manifest as:

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "permissions": [
"[URL unfurl="true"]http://*/*",[/URL] "[URL unfurl="true"]https://*/*",[/URL] "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["[URL unfurl="true"]http://localhost/*"[/URL]],
      "js": ["opt.js"]
    }
  ],
 [red] "background_page": "background.html"[/red]
}

Then have your script set up so it automatically runs when its called.

        var dropDown =     document.getElementById('training_count_4');
        var newOption = document.createElement('option');
        newOption.value = "1000";
        newOption.text = "1000";
        dropDown.options.add(newOption);

Also make sure you have right permissions in your manifest file.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[BillyRayPreachersSon]

the same drop down is used in multiple places on the page. If it could be selected by name (count in this case) then I could modify them all in one fell swoop to include the larger options

An alternative to having many select elements each with the same options would be to have only one select element, storing its value in a hidden field. This might offer better performance if the number of options will be getting very large.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[cbsarge]

*sigh* This is so frustrating...

I'm getting the "Cannot read property 'options' of null" message when I run the extension. Below is the content of my files.

<html>
<head>
<script>
console.log("Background.html"); // This gets displayed. O.K.
    
function runScript() {
}
// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(tab.id, {file: "trainingaid.js"});
});
</script>
</head>
</html>

{
  "name": "My First Extension",
  "version": "1.0",
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "fire-icon.png"
  },
  "permissions": [
"[URL unfurl="true"]http://*/*",[/URL] "[URL unfurl="true"]https://*/*",[/URL] "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["[URL unfurl="true"]http://*/*"[/URL]],
      "js": ["trainingaid.js"]
    }
  ],
  "background_page": "background.html"
}

javascript:(function()
    {
        var dropDown = document.getElementById('training_count_4');
        var newOption = document.createElement('option');
        newOption.value = "1000";
        newOption.text = "1000";
        dropDown.options.add(newOption);
    }
)();