Chrome擴展使用jQuery不工作

我試圖用jQuery菜單構建一個非常簡單的Chrome擴展 - 它基於我在線收集的一些代碼。當我在瀏覽器中測試HTML時，問題出在我作爲Chrome擴展測試時。Chrome擴展使用jQuery不工作

清單文件中是否有任何缺失？

感謝

以下是文件：

的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)"}); 
}); 
});

來源

2013-12-10 user2103505

後控制檯輸出 –

爲彈出的腳本不應該在清單中的內容腳本部分中提到。在popup.html的''部分中放置它們就足夠了。清單中的「content-scripts」部分僅用於內容腳本。 – devnull69

-1

清單看起來很好，所以我懷疑目錄結構問題。

'不工作'是一個相當廣泛的問題描述。把一些控制檯拿出來放入你的目錄結構中。

來源

2013-12-10 19:40:41

你缺少一些右括號

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

來源

2015-10-21 17:26:26 poke19962008

Chrome擴展使用jQuery不工作

回答

相關問題