0

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!

Fabio
  • 15
  • 4
  • 1. The popup is a separate page with its own DOM, see [How to access the webpage DOM rather than the extension page DOM?](//stackoverflow.com/a/4532567) and 2. you can't embed inline js code (event listeners) in extension pages by default nor should you, see [onClick within Chrome Extension not working](//stackoverflow.com/a/13592045) – wOxxOm Sep 20 '17 at 19:58

1 Answers1

2

Google Chrome extensions do not allow inline Javascript.

You'll need to to add an event listener in your popup.js instead.

document.querySelector('#amount').addEventListener('keyup', function() {
    //get input's value and call your functions here
});
Bricky
  • 1,879
  • 9
  • 23