在 chrome 扩展中使用 javascript

【问题标题】：Use javascript in chrome extension在 chrome 扩展中使用 javascript
【发布时间】：2016-09-12 15:33:50
【问题描述】：

我正在尝试创建一个测试 Chrome 扩展程序，以便在文本区域中输入一些文本并在用户按 Enter 时提醒它。

我的 main.html：

<html>
<head>
<script src="jquery.js"></script>
<script>

function doAlert(e){

    if(e.which == 13) {

        alert($('.myword').val());
        e.preventDefault();

    }

}

</script>
</head>
<body>
<textarea class="myword" onkeyup="doAlert(event)"placeholder="Fill me" rows="1" cols="32" style="resize: none;"></textarea>
</body>
</html>

在浏览器中执行文件通常会产生预期的结果。但是在我的扩展弹出窗口中，我根本没有得到回复。

请帮忙。提前致谢。

【问题讨论】：

扩展的控制台是否有错误？
没有。没有。

标签： javascript html google-chrome events extjs

【解决方案1】：

由于内容安全政策，内联 javascript 无法在 chrome 扩展程序中运行。您将必须创建外部 js 文件。将您的“doAlert”函数放入一些文件 alertTest.js 内联事件处理程序也不起作用。您需要在 js 文件中绑定事件处理程序。例如

main.html

<html>
   <head>
      <script src="jquery.js"></script>
      <script src="alertTest.js"></script>
   </head>
   <body>
     <textarea class="myword" id="textBox" placeholder="Fill me" rows="1" cols="32" style="resize: none;"></textarea>
   </body>
</html>

alertTest.js

function doAlert(e){

    if(e.which == 13) {
       alert($('.myword').val());
       e.preventDefault();
    }
 }

 document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('textBox').addEventListener('keyup', doAlert);

 });

这是相同的文档：https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution

【讨论】：