Question

我正在尝试编写我的第一个chrome扩展来测试我从codecademy（HTML / CSS，JQUERY和Javascript）获取的知识。首先，我尝试通过点击按钮将文本附加到段落标记。

继承我的代码：

  <!doctype html>
<html>
    <head>
        <title>Facebook event graph</title>

        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
        <script src="popup.js"> </script>
    </head>
    <body>
        <form id="inputUrl">
                Enter a URL:  <input type="text" name="url" id="url">
                <button type="button" onclick="getFacebookData()"> Get Data </button>
        </form>
        <canvas id="graph" width="300" height="100">   
        </canvas> 
        <p id="text" width="300" height="100">1</p>
    </body>
</html>

和我的popup.js：

$(document).ready(function(){

    //Variables
    function getFacebookData() {
        $('p').append('Test');
    };
});

这可能是我做错的一些非常基本的事情，但是我们真的很感激正确的方向：）

Answer 1

您not allowed to use inline scripting喜欢onclick="getFacebookData()"

您必须从html中删除处理程序：
```
<button type="button" id="my-button"> Get Data </button>
```
你必须将处理程序移动到popup.js：
```
$(document).ready(function(){
    $('#my-button').click(getFacebookData);
});
```
默认情况下，由于内容安全策略的原因，您也不允许从外部CDN加载jQuery - 当然也不允许加载http。你不应该！将jQuery放在扩展程序的文件夹中并在本地加载。
品味问题，但我会将getFacebookData()定义放在$(document).ready之外，因此它可以在全球范围内使用。此外，不需要分号。

最后但并非最不重要：对于将来debugging，请检查分机的相应页面的控制台。对于诸如后台/选项页面之类的内容，您应该可以从开发者模式扩展列表中访问它们。对于弹出窗口，您应右键单击扩展程序的按钮，然后选择“检查弹出窗口”。

如何通过JQuery向段落标记添加文本？

1 个答案: