0
入力フィールドにオートコンプリート機能を実行するChrome拡張機能を作成しようとしています。クロムエクステンション。 JSが実行されていません
まず、我々はすべてのウェブページにこのコードを実行すると、それだけで正常に動作し、今通常の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ページは必要ありませんが、このための最善の方法を教えてください。私が達成しようとしていることについて私は十分に明確だったと思います。
ご迷惑をおかけしていますか？
1.ポップアップは独自のDOMを持つ別のページです。[拡張ページDOMではなくウェブページDOMにアクセスする方法]（// stackoverflow.com/a/4532567）と2.デフォルトで拡張ページにインラインjsコード（イベントリスナー）を埋め込むことはできません。[Chrome拡張機能内のonClickは動作しません]（// stackoverflow.com/a/13592045） – wOxxOm