文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jQuery的Chrome扩展不起作用

问使用jQuery的Chrome扩展不起作用
EN

Stack Overflow用户

提问于 2013-12-10 21:45:51

回答 2查看 715关注 0票数 0

我正在尝试构建一个带有jQuery菜单的非常简单的Chrome扩展--它基于我在网上收集的一些代码。当我在浏览器中测试HTML时，问题出在我作为Chrome扩展进行测试时。

清单文件中有没有遗漏什么？

谢谢

以下是这些文件：

manifest.json

{
"name": "name",
"description": "desc",
"version": "1.4",

"manifest_version": 2,

"browser_action": {
    "default_icon": "ari.png",
    "default_popup": "popup.html"
                    },
  "permissions": [
            "tabs",
            "http://*/",
            "https://*/",
            "file:///*/*",
            "https://*.google.com/"
            ]

"content_scripts": [{
    "matches": ["http://*/*"]
    "js": [
           "jquery.js",
           "popup.js"
          ],
}

popup.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>title</title>
<script src="jquery.js"></script>
<script src="popup.js"></script>

<style>
</style>

<!--
  - JavaScript and HTML must be in separate files: see our Content Security
  - Policy documentation[1] for details and explanation.
  -
  - [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->



</head>

<body>

<div style="float:left" > <!--This is the first division of left-->
<p><strong>Report by region</strong></p>
<div id="firstpane" class="menu_list"> <!--Code for menu starts here-->
    <p class="menu_head">Header-1</p>
    <div class="menu_body">
    <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a> 
    </div>
    <p class="menu_head">Header-2</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a> 
    </div>
    <p class="menu_head">Header-3</p>
    <div class="menu_body">
      <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a>         
   </div>
</div>  <!--Code for menu ends here-->
</div>

<div style="float:left; margin-left:20px;"> <!--This is the second division of right-->
<p><strong>Works with mouse over</strong></p>
<div class="menu_list" id="secondpane"> <!--Code for menu starts here-->
    <p class="menu_head">Header-1</p>
    <div class="menu_body">
    <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a> 
    </div>
    <p class="menu_head">Header-2</p>
    <div class="menu_body">
        <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a> 
    </div>
    <p class="menu_head">Header-3</p>
    <div class="menu_body">
      <a href="#">Link-1</a>
     <a href="#">Link-2</a>
     <a href="#">Link-3</a>         
   </div>
</div>      <!--Code for menu ends here-->
</div>

</body>
</html>

popup.js

<!--//---------------------------------+
//  Developed by Roshan Bhattarai 
//  Visit http://roshanbh.com.np for this script and more.
//  This notice MUST stay intact for legal use
// --------------------------------->

$(document).ready(function()
{
    //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
    $("#firstpane p.menu_head").click(function()
{
    $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({backgroundImage:"url(left.png)"});
});
//slides the element with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{
     $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
     $(this).siblings().css({backgroundImage:"url(left.png)"});
});
});

javascript

jquery

google-chrome-extension

回答 2

Stack Overflow用户

发布于 2015-10-22 01:26:27

你遗漏了一些右括号

"content_scripts": [{
"matches": ["http://*/*"],
"js": [
       "jquery.js",
       "popup.js"
      ]
}]

票数 0

Stack Overflow用户

发布于 2013-12-11 03:40:42

清单看起来没问题，所以我怀疑是目录结构问题。

“不工作”是对你的问题的一个相当宽泛的描述。发布一些控制台输出，并输入您的目录结构。

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/20496213

复制

相似问题

问使用jQuery的Chrome扩展不起作用
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的Chrome扩展不起作用EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery的Chrome扩展不起作用
EN