创建 chrome 扩展后无法访问 popup.js 文件答案

【问题标题】：it can not access popup.js file after creating a chrome extension创建 chrome 扩展后无法访问 popup.js 文件
【发布时间】：2012-04-12 16:54:07
【问题描述】：

manifest.json

{
  "name": "Summer",
  "version": "1.0",
  "manifest_version": 2,
  "description": "This is an addition extension",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
        <form name="form">
            <div id="sayi1">Sayı 1 :    <input type = "text" name="deger1"></div> 
            <div id="sayi2">Sayı 2 :    <input type = "text" name="deger2"></div> 
            <div id="sonuc">Sonuç :     <input type = "text" name="cevap"></div>
            <div id="button"><input type="button" value="Hesapla" onclick="hesaplama()" /></div>
        </form>
  </body>
</html>

popup.js

function hesaplama()
{
var sayi1 = window.document.form.deger1.value;
var sayi2 = window.document.form.deger2.value;
var toplam = parseFloat(sayi1) + parseFloat(sayi2) ;
window.document.form.cevap.value = toplam; 
}

当我加载这个扩展时，我可以正常看到。但是当我填充 deger1 和 deger2 文本框并单击按钮时，函数不起作用，在 souc 文本框（结果文本框）中为空。我该如何解决？我是创建 chrome 扩展的新手。感谢您的帮助。

【问题讨论】：

滥用eval？请改用parseFloat(say\u01311) + parseFloat(say\u01312)...
您是否在控制台中遇到任何错误？ code.google.com/chrome/extensions/…
1.您在输入中输入了什么？ 2. 尝试在控制台中单独运行每一行，以确保您期望发生的事情实际上就是发生的事情。 2.1 我的意思是确保DOM调用返回一个值，看看eval(say11)给你什么，等等。
在控制台上“由于 Content-Security-Policy 拒绝执行内联事件处理程序。”

标签： google-chrome-extension

【解决方案1】：

您的清单中有manifest_version : 2，所以请阅读它引入的更改....
http://code.google.com/chrome/extensions/manifestVersion.html
由于 html (<input type="button" value="Hesapla" onclick="hesaplama()" />) 中的 onclick 事件处理程序，您进入了控制台 Refused to execute inline event handler because of Content-Security-Policy。对于清单版本 2，这是不允许的，您需要从 js 代码而不是 html 中附加事件侦听器。
这是您的代码的工作版本....
popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
        <form name="form">
            <div id="sayi1">Sayı 1 :    <input type = "text" name="deger1"></div> 
            <div id="sayi2">Sayı 2 :    <input type = "text" name="deger2"></div> 
            <div id="sonuc">Sonuç :     <input type = "text" name="cevap"></div>
            <div id="button"><input type="button" value="Hesapla" /></div>
        </form>
  </body>
</html>

popup.js

function hesaplama()
{
var sayı1 = window.document.form.deger1.value;
var sayı2 = window.document.form.deger2.value;
var toplam = (parseFloat(sayı1) + parseFloat(sayı2)) ;
window.document.form.cevap.value = toplam;
}
window.onload = function(){
    document.querySelector('input[value="Hesapla"]').onclick=hesaplama;
}

【讨论】：

欢迎您 :) 哦，您可能应该在该输入中添加一个 id 并更改 querySelector 以查找它。