javascript - 警报在 chrome 扩展程序的弹出窗口中不起作用

标签 javascript google-chrome-extension popupwindow

谁能帮我找出我的问题。我已将我的网站设置为 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 作为扩展的“ View ”打开, Content Security Policy (CSP) 阻止执行内联脚本和内联事件绑定(bind)。

您应该将代码和事件绑定(bind)移动到外部 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...
    });
});

关于javascript - 警报在 chrome 扩展程序的弹出窗口中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20322019/

相关文章:

javascript - 显示书签图标

javascript - 更新/添加自己的扩展包目录中的文件

javascript - html5 音频。如何获得比特率

android - 无法与 PopupWindow 和 Background (GoogleMap) 交互

javascript - 在同一个 div 上多次单击时恢复更改

javascript - 功能是设置全部而不是每个

asp.net - 如何在父级中确定弹出的 radWindow 是否已关闭?

css - 我想让我的搜索栏像图像一样弹出窗口吗?

javascript - 如何转义 JSON 对象以提供给 JavaScript 函数?

javascript - 有没有办法在 ie9+ 中实现 promise