-1

http://jsbin.com/ejofazU/1/

可以在浏览器中找到，但是当我将其设置为弹出式 chrome 扩展时，javascript 不起作用，也不知道为什么。来源仍然相同，我在清单中附加了内容脚本，这会有所帮助，但似乎仍然无法使其正常工作。

任何帮助深表感谢。

显现

{
   "name": "Resistor Color Calculator",
   "description": "Just a basic resistor color calculator.",
   "version": "1.1.0",
   "permissions": [
     "tabs", "http://*/*", "https://*/*"
   ],
   "icons": {
     "128": "src/128x128.png",
     "256": "src/logo.png",
     "48": "src/48x48.png"
   },
   "browser_action": {
     "default_title": "Resistor Calculator",
     "default_icon": "src/48x48.png",
     "default_popup": "popup.html"
   },
   "content_scripts": [
     {
      "matches": ["http://*/*"],
      "js": ["jquery.js"]
     }
   ],
   "manifest_version": 2
}

弹出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
body {
   margin:0; padding:0;
   width: 600px; height: 500px;
   background:#000;
}
/* Styles Table/Text */
table {
   position:absolute;
   top:80px; left:0;
   width:100%; height:100%;
   font-weight: bold; color: gray; background: black;
}

/* Table Header */
th { text-align: center; color: white; background: #0af; }

/* Table Data */
td { background: white; }

/* Calculation */
h1 {
   position:absolute;
   top:0px; left:0;
   width:100%; color: white; text-align: center;
}

/* Calculation Area */
input { width:0; height:0; padding:0; margin:0; visibility:hidden; position:absolute; top:-100000; left:-100000; }
h1 {
   position:absolute;
   top:0px; left:0;
   width:100%; color: white; text-align: center;
}
</style>
<script type="text/javascript">
function generation() {
   // Colors
    $("select#colors").each(function() {
      var color = $(this).val();
      if(!color)
         return;
      $('span#1').text(color);   
    });

   $("select#digits").each(function() {
      var digits = $(this).val();
      if(!digits)
         return;
      $('span#2').text(digits);
   });

   $("select#multi").each(function() {
      var multi = $(this).val();
      if(!multi)
         return;
      $('span#3').text(multi);
   });

   $("select#toller").each(function() {
      var tollerance = $(this).val();
      if(!tollerance)
         return;
      $('span#4').text(tollerance);
   });
}

$(document).ready(function() {
   generation();

   var opt1 = $('#1').text(),
      opt2 = $('#2').text(),
      opt3 = $('#3').text(),
      opt4 = $('#banswer').text(),
      problem = $('input[name=problem]'),
      answer = $('input[name=hideresult]');

   problem.val(opt1 + '' + opt2 + '' + opt3);
   answer.val(problem.val());
   answer.val(eval(problem.val()));
   $('#answer').text(answer.val());
});

$(document).change(function(){
   generation();

   var opt1 = $('#1').text(),
      opt2 = $('#2').text(),
      opt3 = $('#3').text(),
      opt4 = $('#banswer').text(),
      problem = $('input[name=problem]'),
      answer = $('input[name=hideresult]');

   problem.val(opt1 + '' + opt2 + '' + opt3);
   answer.val(eval(problem.val()));
   $('#answer').text(answer.val());
});
</script>
</head>
<body>
   <!-- Calulation Result -->
   <div id="genarea">
      <h1 id="genresult">
         <span id="1"></span><span id="2"></span><span id="3"></span><span id="banswer"> = </span><span id="answer"> answer </span><span id="e-answer">&ohm;</span> <span id="4"></span><span id="math"></span>
      </h1>

      <input type="text" name="problem" />
      <input type="text" name="hideresult" />
   </div>

   <!-- Resistor Color Chart Here -->
   <table>
      <tr>
         <th>
            <select id="colors">
               <option value=" ">1st Band</option>
               <option style="background:black; color:white;" value="0">Black</option>
               <option style="background:brown; color:white;" value="1">Brown</option>
               <option style="background:red; color:white;" value="2">Red</option>
               <option style="background:orange; color:white;" value="3">Orange</option>
               <option style="background:yellow; color:black;" value="4">Yellow</option>
               <option style="background:green; color:white;" value="5">Green</option>
               <option style="background:blue; color:white;" value="6">Blue</option>
               <option style="background:violet; color:black;" value="7">Violet</option>
               <option style="background:grey; color:white;" value="8">Grey</option>
               <option style="background:white; color:black;" value="9">White</option>
            </select>
         </th>
         <th>
            <select id="digits">
               <option  value=" ">2nd Band</option>
               <option style="background:black; color:white;" value="0">Black</option>
               <option style="background:brown; color:white;" value="1">Brown</option>
               <option style="background:red; color:white;" value="2">Red</option>
               <option style="background:orange; color:white;" value="3">Orange</option>
               <option style="background:yellow; color:black;" value="4">Yellow</option>
               <option style="background:green; color:white;" value="5">Green</option>
               <option style="background:blue; color:white;" value="6">Blue</option>
               <option style="background:violet; color:black;" value="7">Violet</option>
               <option style="background:grey; color:white;" value="8">Grey</option>
               <option style="background:white; color:black;" value="9">White</option>
            </select>
         </th>
         <th>
            <select id="multi">
               <option value=" ">3rd Band</option>
               <option style="background:black; color:white;" value="*1">x1</option>
               <option style="background:brown; color:white;" value="*10">x10</option>
               <option style="background:red; color:white;" value="*100">x100</option>
               <option style="background:orange; color:white;" value="*1000">x1,000</option>
               <option style="background:yellow; color:black;" value="*10000">x10,000</option>
               <option style="background:green; color:white;" value="*100000">x100,000</option>
               <option style="background:blue; color:white;" value="*1000000">x1,000,000</option>
               <option style="background:violet; color:black;" value="*10000000">x10,000,000</option>
               <option style="background:grey; color:white;" value="*100000000">x100,000,000</option>
               <option style="background:white; color:black;" value="*1000000000">x1,000,000,000</option>
               <option style="background:white; color:black;" value="/10">&divide;10</option>
               <option style="background:white; color:black;" value="/100">&divide;100</option>
            </select>
         </th>
         <th>
            <select id="toller">
               <option value=" ">4th Band</option>
               <option style="background:Black; color:white;" value="&#177; 1%">Black</option>
               <option style="background:Brown; color:white;" value="&#177; 2%">Brown</option>
               <option style="background:Gold; color:black;" value="&#177; 5%">Gold</option>
               <option style="background:Silver; color:black;" value="&#177; 10%">Silver</option>
               <option value="&#177; 20%">None</option>
            </select>
         </th>
      </tr>
      <tr>
         <th>Color</th>
         <th>Digits</th>
         <th>Multiplier</th>
         <th>Tollerance</th>
      </tr>
      <tr>
         <th style="background:black;">Black</th>
         <td>0</td>
         <td>x1</td>
         <td>1%</td>
      </tr>
      <tr>
         <th style="background:brown;">Brown</th>
         <td>1</td>
         <td>x10</td>
         <td>2%</td>
      </tr>
      <tr>
         <th style="background:red;">Red</th>
         <td>2</td>
         <td>x100</td>
      </tr>
      <tr>
         <th style="background:orange;">Orange</th>
         <td>3</td>
         <td>x1,000</td>
      </tr>
      <tr>
          <th style="background:yellow; color:black;">Yellow</th>
         <td>4</td>
         <td>x10,000</td>
      </tr>
      <tr>
         <th style="background:green;">Green</th>
         <td>5</td>
         <td>x100,000</td>
      </tr>
      <tr>
         <th style="background:blue;">Blue</th>
         <td>6</td>
         <td>x1,000,000</td>
      </tr>
      <tr>
         <th style="background:violet; color:black;">Violet</th>
         <td>7</td>
         <td>x10,000,000</td>
      </tr>
      <tr>
         <th style="background:grey;">Grey</th>
         <td>8</td>
         <td>x100,000,000</td>
      </tr>
      <tr>
         <th style="background:white; color:black;">White</th>
         <td>9</td>
         <td>x1,000,000,000</td>
      </tr>
      <tr>
         <th style="background:gold; color:black;">Gold</th>
         <td></td>
         <td>&divide;10</td>
         <td>5%</td>
      </tr>
      <tr>
         <th style="background:silver; color:black;">Silver</th>
         <td></td>
         <td>&divide;100</td>
         <td>10%</td>
      </tr>
      <tr>
         <th style="background:white; color:black;">None</th>
         <td></td>
         <td></td>
         <td>20%</td>
      </tr>
   </table>
</body>
</html>
4

1 回答 1

1

首先，请阅读有关SSCCE的信息。

根据有关 Manifest V2 更改的文档：

[...] 内联事件处理程序 [...] 不会执行。

这些不适用于清单 V2 扩展。删除内联事件处理程序，将它们放在您的外部 JS 文件中，然后使用 addEventListener() 为它们注册事件处理程序。

因此，在您的情况下，将任何代码移动script到 JS 文件中的标记内，并将该文件作为scriptsrc 引用。此外，用外部 JS 文件中的等效代码替换任何内联 JS（例如添加事件侦听器）。

于 2013-11-10T23:17:59.653 回答