Question

我决定制作自己的Google Chrome扩展程序。

我试图计算用户提供的文字中的单词和字母。

出于某种原因，当我点击计数时，我看不到任何输出

我的代码中没有语法错误（使用括号调试器检查），只是一些逻辑错误

这是我的manifest.json文件

{
"manifest_version": 2,

  "name": "Count Words In Text",
  "description": "This extension allows the user to count words in given input",
  "version": "0.0",
  "icons": {"128":"icon.png"},
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Count Text!"
  },
  "permissions": [
  ]
}

这是我的HTML文件，popup.html

    <!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Count Text!</title>
    <style type="text/css">
      body {
        margin: 10px;
        white-space: nowrap;
      }

      h1 {
        font-size: 15px;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
    -->
    <script src="popup.js"></script>
  </head>

  <body>
    <h1>TEXT COUNTER</h1>
    <div id="container">
      <input type="text" id="a" value=""></input><br>
<button onclick="words()">Count!</button><br>
<input type="text" value="" id="b"></input>
    </div>
  </body>
</html>

这是我的javascript文件，你可能知道我不能在html中使用内联脚本，所以我必须制作一个单独的JS文件

   /*global document*/
function words(){
var a = document.getElementById("a").value;
var b = a.split(" ");
var c = a.split("");
var d = b.length;
var e = c.length;
document.getElementById("b").innerHTML="Number of Letters: "+e+"\n"+"Number of Words: "+d;
}

元素的布局等是正确的，它只是不起作用的功能......似乎我的功能甚至没有被调用，请告知是否有任何解决方案谢谢

编辑：我刚刚在控制台上找到了这个，感谢@Titus
＆＃34;拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令：＆＃34; script-src＆＃39; self＆＃39; blob：filesystem：chrome-extension-resource：＆＃34;。 “不安全 - 内联”和“不安全”。关键字，哈希（＆＃39; sha256 -...＆＃39;）或nonce（＆＃39; nonce -...＆＃39;）是启用内联执行所必需的。＆＃34; < / p>

Answer 1

您自己承认您不能使用内联脚本，但您使用：

<button onclick="words()">

这是内联脚本。改变

<button id="myButton">

并将其添加到 popup.js 文件中：

document.getElementById("myButton").onclick = words;

另外，将<script src="popup.js">标记移到<body>的底部，以便在结尾处进行解析。

Answer 2

标识为b的元素是输入，您应该使用：

document.getElementById("b").value = ....

而不是：

document.getElementById("b").innerHTML = ...

在Google Chrome扩展程序中计算单词和字母并不起作用

2 个答案: