私のウェブサイトをChrome拡張機能として設定しました。拡張機能をインストールすると、ログインボタンとともにユーザー名とパスワードを尋ねるポップアップウィンドウに移動します。しかし、ユーザーがjavascriptに入力したユーザー名にアラートを送信しようとすると、機能しません。誰か助けてください。理由は何ですか。これが私のmanifest.jsonです
{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "calpine_not_logged_in.png"
},
"permissions": [
"*://blog.calpinetech.com/test/index.php",
"alarms",
"notifications"
],
"web_accessible_resources": [
"/icon_128.png"]
}
これがインストール時にポップアップウィンドウを作成する私のコードです
chrome.windows.create({url : "test.html"});
これが私のtest.htmlです
<html>
<head>
<script type="text/javascript">
function log(){
var uname=document.getElementById('name');
alert(uname);
}
</script>
</head>
<body>
<form name="userinfo" id="userinfo">
username :
<input id="name" type="text" name="username"/><br><br>
password :
<input type="password" name="password"/><br><br>
<input type="button" value="Log In" onclick="log()"/>
<p id="pp"></p>
</form>
</body>
</html>
それが機能しない理由test.htmlは、拡張機能の「ビュー」として開かれ、コンテンツセキュリティポリシー（CSP）がインラインスクリプトとインラインイベントバインディングの実行を防止するためです。
コードとイベントバインディングを外部JSファイルに移動する必要があります。
ではtest.htmlという。
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
...
<input type="button" id="login" value="Log In" />
...
</body>
</html>
ではtest.js：
window.addEventListener('DOMContentLoaded', function() {
var login = document.querySelector('input#login');
login.addEventListener('click', function() {
// ...do stuff...
});
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加