铬扩展。 JS没有运行[重复]答案

【问题标题】：chrome extension. JS not running [duplicate]铬扩展。 JS没有运行[重复]
【发布时间】：2018-03-02 00:19:59
【问题描述】：

我正在尝试创建一个在输入字段上执行自动完成功能的 Chrome 扩展程序。

首先请看一下普通HTML页面上的功能代码

<!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>

现在，如果我们在任何网页上运行此代码，它就可以正常工作。

我遇到的问题是在 Chrome 扩展程序中移动上述功能。

我的 manifest.json 在这里：

{
    "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
}

我的 popup.html 文件在这里：

<!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>

还有我的 popup.js 文件：

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;
    }

如果我打包上面的文件并创建一个扩展，上面的代码将不起作用。我看到了 popup.html 输入字段，但不会触发魔法的函数，我不明白为什么。

我认为我不需要 event.js 页面来运行上述简单功能，但请告诉我最好的方法。希望我对我想要实现的目标足够清楚。

任何帮助都不仅仅是欢迎 stackoverflowers！

【问题讨论】：

1.弹出窗口是一个单独的页面，具有自己的 DOM，请参阅How to access the webpage DOM rather than the extension page DOM? 和 2。默认情况下，您不能在扩展页面中嵌入内联 js 代码（事件侦听器），也不应该，请参阅onClick within Chrome Extension not working

标签： javascript google-chrome-extension

【解决方案1】：

谷歌浏览器扩展do not allow inline Javascript.

您需要在 popup.js 中添加一个事件侦听器。

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

【讨论】：

大家好，谢谢你重复这个问题。这解决了我的问题。