我一直在尝试为Safari Firefox和Chrome开发一个简单的扩展，其中表单在弹出窗口中呈现给用户，填写后在本地评估，并在该评估中定义对用户的响应。原始表格可以在以下位置找到： https://dl.dropbox.com/u/86545493/Waze/Calculadora.html
我也已经能够创建一个有效的野生动物园扩展，可以在这里下载：https://dl.dropbox.com/u/86545493/Waze/Extensions/WRTC.safariextz但是在尝试创建Chrome扩展程序时，我的问题就开始了。
我按照教程创建了第一个扩展名，并能够创建一个按钮并将表单加载为弹出窗口。但是，安全限制不允许我的表单运行。根据我通过阅读开发人员指南所理解的内容，我需要的是将javascript分离到它自己的文件中，并从弹出文件中调用它。但是，文档的语言对我（医学生）来说太技术性了，我一直无法理解格式化应该使用的消息的正确方法。这是我的代码的当前状态：
弹出窗口.html
<head>
<script type="text/javascript" src="popup.js"></script>
</head>
<body>
<h1>Calculadora de Tipo de Camino</h1>
<form id="Calle" target="_self">
Cruceros <select id="cruceros">
<option value=1>Glorietas</option>
<option value=1>Rotondas</option>
<option value=1>Semáforos</option>
<option value=0 selected>Sin Control</option>
<option value=2>Sin Cruceros</option>
</select></br>
Carriles <select id="carriles">
<option value=1 selected>1</option>
<option value=2>2</option>
<option value=3>3 o más</option>
</select></br>
Sentidos Separados físicamente o parte de par vial <input type="checkbox" id="sentidos"></br>
Con Laterales o Acotamiento <input type="checkbox" id="laterales"></br>
Entradas y Salidas delimitadas <input type="checkbox" id="ramps"></br>
Avenida, Boulevard, o Circuito <input type="checkbox" id="name"></br>
Es Carretera
<select id="carretera">
<option value=0 selected>No</option>
<option value=1>Municipal</option>
<option value=2>Estatal</option>
<option value=3>Federal</option>
</select> Revisar en: <a href="http://petra.sdg.mx/sigcsi/" target="_blank">SCT</a></br>
Tiene topes <input type="checkbox" id="topes"></br>
</br>
</form>
<button type="button" onclick="textR()">Calcular Puntos</button>
<hr><p id="resultn"></p>
<p id="resultt"></p>
</body>
弹出窗口.js
function textR()
{var cru=document.getElementById("cruceros").value;
if (cru==0){crun=0}
else if (cru==1){crun=1}
else{crun=2}
var carr=document.getElementById("carriles").value;
if (carr==1){carrn=0}
else if (carr==2){carrn=1}
else{carrn=2}
sen=(document.getElementById("sentidos").checked==true)?1:0;
lat=(document.getElementById("laterales").checked==true)?1:0;
ram=(document.getElementById("ramps").checked==true)?1:0;
av=(document.getElementById("name").checked==true)?1:0;
var hw=document.getElementById("carretera").value;
if (hw==1){hwn=1}
else if (hw==2){hwn=2}
else if (hw==3){hwn=3}
else{hwn=0}
saluden=(document.getElementById("topes").checked==true)?1:0;
var r=crun+carrn+sen+lat+ram+av+hwn+saluden;
document.getElementById("resultn").innerHTML=(r+" puntos");
if (r<2){rt='Street'}
else if (r<4){rt='<span class="pstreet">Primary Street'}
else if (r<7){rt='<span class="mihw"> Minor Highway '}
else if (r<9){rt='<span class="mahw"> Major Highway '}
else {rt='<span class="fw"> Freeway '}
document.getElementById("resultt").innerHTML=(rt);
}
你能告诉我要使用的正确语法吗？
消除内联代码onclick="textR()"并将其添加到popup.js中，如下所示
document.getElementsByTagName("button")[0].addEventListener("click",textR);
最后我最终document.getElementById("calcButton").addEventListener("click", textR);放在弹出窗口的末尾.js并且不得不<script type="text/javascript" src="popup.js"></script>移动到弹出窗口的末尾.html。
我发现这篇文章很有用：Javascript：未捕获的类型错误：无法调用 null 的方法"addEventListener"