Phil Phil - 2 months ago 8
HTML Question

Jquery validate within chrome extension options page

Completely new to this and JavaScript and coding in general so my apologies go out before I start.

I've been trying to use

to check text inputs for a chrome extension's Options page I've been trying to create.

Things just go sideways when I add
tag to the options.html page: as soon as you click save button all the
formatting is lost.

I've used chrome extension options example and get the same results.


"manifest_version": 2,
"name": "Options Test extension",
"version": "1.0",

"options_ui": {
"page": "options.html",
"chrome_style": true


<!DOCTYPE html>
<title>My Test Extension Options</title>
body: { padding: 10px; }

<form id="form_a">
Favorite color:
<select id="color">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>

<input type="checkbox" id="like">
I like colors.

<div id="status"></div>
<button id="save">Save</button>
<script src="options.js"></script>


// Saves options to
function save_options() {
var color = document.getElementById('color').value;
var likesColor = document.getElementById('like').checked;{
favoriteColor: color,
likesColor: likesColor
}, function() {
// Update status to let user know options were saved.
var status = document.getElementById('status');
status.textContent = 'Options saved.';
setTimeout(function() {
status.textContent = '';
}, 750);

// Restores select box and checkbox state using the preferences
// stored in
function restore_options() {
// Use default value color = 'red' and likesColor = true.{
favoriteColor: 'red',
likesColor: true
}, function(items) {
document.getElementById('color').value = items.favoriteColor;
document.getElementById('like').checked = items.likesColor;
document.addEventListener('DOMContentLoaded', restore_options);

How would I go about validating inputs when I can't use the
, for the text inputs I have in my own extension?

Xan Xan

What you mean by "things go sideways" is likely the default behavior of <button> elements.

If such an element is inside a <form> element, the default is to behave like a submit button. That's not what you want: it reloads the page (which apparently has an added effect of not applying chrome_style as it's not explicitly loaded "as the options page").

Your problems can be fixed by specifying the button type:

<button type="button" id="save">Save</button>

Alternatively, you could call preventDefault() on the event object in save_options (if you added an event parameter). But specifying a button type is cleaner.