3

マニフェスト.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 のテキストボックスに入力してボタンをクリックすると、関数が機能せず、sonuc テキストボックス (結果テキストボックス) が null になります。どうすれば修正できますか？私はクロム拡張機能を作成するのが初めてです。ご協力いただきありがとうございます。

4

1 に答える 1

6

あなたはあなたの マニフェストを持っているmanifest_version : 2ので、それが導入する変更について読んでください
....あなたのhtml（）で。マニフェスト バージョン 2 では、これは許可されていません。html ではなく、js コードからイベント リスナをアタッチする必要があります。 これがあなたのコードの作業バージョンです.... popup.html
Refused to execute inline event handler because of Content-Security-Policy<input type="button" value="Hesapla" onclick="hesaplama()" />

<!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;
}
于 2012-04-12T08:54:07.200 に答える