I am trying to create a Chrome extensions that perform an Autocomplete functio on an input field.
First please have a look and the function code on a normal HTML page
<!DOCTYPE html>
<html>
<head>
<title>Testing autocomplete</title>
<script>
var people = ['Fabio', 'Marco', 'Pietro', 'Kucio', 'Pato'];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" onkeyup="changeInput(this.value)">
<div id="result"></div>
</body>
</html>
Now, if we run this code on any webpage it works just fine.
The issue I am having is to move the above functions in a Chrome Extension.
I have my manifest.json here:
{
"name": "AutoComplete UZ",
"version": "1.0",
"description": "Provides with a small popup window with the AutoComplete function with UZ internal emails.",
"browser_action": {
"default_popup": "popup.html",
"default_title": "UZ AutoComplete"
},
"content_scripts": [
{
"matches" : ["http://*/*", "https://*/*"],
"css": ["style.css"],
"js" : ["popup.js"]
}
],
"manifest_version": 2
}
My popup.html file here:
<!DOCTYPE html>
<html>
<head>
<title>UZ AutoComplete</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="popup.js"></script>
</head>
<body>
<h1>UZ AutoComplete</h1>
<h3>Type email address</h3>
<input id="amount" type="text" onkeyup="changeInput(this.value)" placeholder="your email">
<div id="result"></div>
</body>
</html>
and my popup.js file here:
var people = [
'Fabio',
'Marco',
'Pietro',
'Kucio',
'Pato'
];
function matchPeople(input) {
var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
return people.filter(function(person) {
if (person.match(reg)) {
return person;
}
});
}
function changeInput(val) {
var autoCompleteResult = matchPeople(val);
var text = "";
var i;
for (i = 0; i < autoCompleteResult.length; i++) {
text += autoCompleteResult[i] + "<br>";
}
document.getElementById("result").innerHTML = text;
}
If I pack the above files and create an Extension, the above code will not work. I see the popup.html input field but the functions that make the magic won't trigger and I do not understand why.
I do not think I need an event.js page to run the above simple functions but please let me know the best approach for this. Hope I was clear enough on what I am trying to achieve.
Any help is more than welcome stackoverflowers!