它在创建chrome扩展后无法访问popup.js文件 [英] it can not access popup.js file after creating a chrome extension
问题描述
{
name：Summer，
version：1.0，
manifest_version：2，
description：这是一个附加扩展，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
}
}
popup.html
< ;! doctype html>
< html>
< head>
< title>入门Extension的弹出式菜单< / title>
<！ - 为了安全起见，JavaScript和HTML必须位于不同的文件中。 - >
< script src =popup.js>< / script>
< / head>
< body>
< form name =form>
< div id =sayi1>Sayı1：< input type =textname =deger1>< / div>
< div id =sayi2>Sayı2：< input type =textname =deger2>< / div>
< div id =sonuc>Sonuç：< input type =textname =cevap>< / div>
< div id =button>< input type =buttonvalue =Hesaplaonclick =hesaplama（）/>< / div>
< / form>
< / body>
< / html>
popup.js
函数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文本框，并单击按钮，函数不起作用，在sonuc文本框（结果文本框）为空。
我该如何解决它？我是创建Chrome扩展的新手。感谢您的帮助。
您有 manifest_version：2 在您的清单中，请阅读它所介绍的更改....
http： //code.google.com/chrome/extensions/manifestVersion.html
您在控制台拒绝执行内联事件处理程序，因为Content-Security-Policy ，因为您的html中的onclick事件处理程序（< input type =buttonvalue =Hesaplaonclick =hesaplama（）/> ）。使用清单版本2这是不允许的，你需要从你的js代码中附加事件列表器，而不是在html中。
这是你的代码的工作版本....
popup.html
<！doctype html>
< html>
< head>
< title>入门Extension的弹出式菜单< / title>
<！ - 为了安全起见，JavaScript和HTML必须位于不同的文件中。 - >
< script src =popup.js>< / script>
< / head>
< body>
< form name =form>
< div id =sayi1>Sayı1：< input type =textname =deger1>< / div>
< div id =sayi2>Sayı2：< input type =textname =deger2>< / div>
< div id =sonuc>Sonuç：< input type =textname =cevap>< / div>
< div id =button>< input type =buttonvalue =Hesapla/>< / div>
< / form>
< / body>
< / html>
popup.js
函数hesaplama（）
{
varsayı1= window.document.form.deger1.value;
varsayı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;
}
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;
}
When i load this extension, i can see normally. But when i filled the deger1 and deger2 textbox and clicked the button, function is not working, in the sonuc textbox (result textbox) is null. How can i fix it? I am new at creating chrome extensions. Thanks for your help.
You've got manifest_version : 2 in your manifest, so please go read about the changes it introduces....
http://code.google.com/chrome/extensions/manifestVersion.html
You got in the console Refused to execute inline event handler because of Content-Security-Policy, because of the onclick event handler in your html (<input type="button" value="Hesapla" onclick="hesaplama()" />). With manifest version 2 this isnt allowed, you need to attach the event listner from your js code and not in the html.
Here's a working version of your code....
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;
}
这篇关于它在创建chrome扩展后无法访问popup.js文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
