谷歌浏览器插件 - 需要帮助

Question

谷歌浏览器插件 - 需要帮助

jquerygoogle-chromegoogle-chrome-extension

3

我是一个新手，想学习如何开发谷歌浏览器扩展程序，并有一些基本问题。

我想制作一个谷歌浏览器扩展程序，它的方案如下：

- 一个包含按钮和结果字段（popup.html）的弹出窗口。

- 当单击按钮时，我希望触发一个事件，这个事件应该连接到一个web服务器（我也制作了servlet），并从服务器收集信息（XMLHttpRequest()）。

- 然后，我希望我的扩展程序将收集到的信息加载到其中一个结果字段中。

很简单，不是吗？但是我在一开始就遇到了几个问题：我开始通过阅读教程来进行开发，但是我对扩展程序的主要结构还不清晰。现在，我开始了一个应用程序，其中包含一个popup.html和manifest.json......在popup.html中有一个结果字段和一个按钮。

<div id="extension_container">
<div id="header">
    <p id="intro">Result here</p>
    <button type="button" id="button">Click Me!</button>
</div> <!-- END header -->
<div id="content">

</div> <!-- END content -->

当按钮被点击时，我触发一个事件，并用jQuery进行处理，代码如下：

<script>
    $(document).ready(function(){
        $("#button").click(function(){
            $("#intro").text("Hello, im added");
            alert("Clicked");
        });
    });
</script>

问题来了，当在popup.html中使用时，它不起作用。如果我将其加载到Chrome中，什么都不会发生。否则，如果我在浏览器中打开popup.html而不是作为扩展程序，则一切正常工作。所以，我认为我对扩展结构有基本的误解，从background pages，background javascript等开始... :( 有人能帮助我吗？

- Attila Kling

我不确定...但如果我没记错的话，把<script>标签放在哪里打开弹出窗口很重要。你尝试把js代码放在文件中并在主html页面中链接它了吗？你收到安全错误了吗？ - Fabio B.

如果我直接用Chrome打开popup.html（注意：脚本和HTML也在这里），一切都正常，事件被触发，并且文本显示出来了，就像预期的那样。但是，如果我通过chrome://extensions ->“加载未打包的应用程序”将我的扩展加载到Chrome中，并打开popup.html，则什么也不会发生:( - Attila Kling

2个回答

0

你确定已经添加了jQuery库并且使用了类似这样的附加标签吗？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

在我这样做之后，就再也没有问题了。在我这样做之前，当然会出现"$未定义"的错误。

- devnull69

谢谢你的回答，我添加了两种不同的方式，一种是你所写的，为了确保，我将其下载到我的库中，并直接插入到代码中。 :/ - Attila Kling

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- PAEz · Accepted Answer

在Chrome 19.0.1084.1版本中测试，这对我有效…

弹出窗口.html

<!doctype html>
<html>
<head>
    <script src="jquery-1.7.1.min.js"></script>
    <script src="popup.js"></script>
</head>
<body>
    <div id="extension_container">
        <div id="header">
            <p id="intro">Result here</p>
            <button type="button" id="button">Click Me!</button>
        </div> <!-- END header -->
        <div id="content">
        </div> <!-- END content -->
    </div>
</body>
</html>

popup.js

$(document).ready(function() {
    $("#button").click(function() {
        $("#intro").text("Hello, im added");
        alert("Clicked");
    });
});

可能的错误
我认为你的问题可能是你在清单文件中设置了"manifest_version" : 2，而你的popup.html看起来像这样....

 <!doctype html>
<html>
<head>
    <script src="jquery-1.7.1.min.js"></script>
    <!--script src="popup.js"></script-->
    <script>
    $(document).ready(function() {
        $("#button").click(function() {
            $("#intro").text("Hello, im added");
            alert("Clicked");
        });
    });
    </script>
</head>
<body>
    <div id="extension_container">
        <div id="header">
            <p id="intro">Result here</p>
            <button type="button" id="button">Click Me!</button>
        </div> <!-- END header -->
        <div id="content">
        </div> <!-- END content -->
     </div>  
</body>
</html>

这样做是行不通的，因为在清单版本2中不允许使用内联脚本。