使用jQuery的Chrome扩展不起作用
Chrome Extension using jQuery not working
我正试图用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)"});
});
});
您缺少一些右括号
"content_scripts": [{
"matches": ["http://*/*"],
"js": [
"jquery.js",
"popup.js"
]
}]
清单看起来不错,所以我怀疑是目录结构问题。
"不工作"是对你的问题的一个相当宽泛的描述。发布一些控制台输出并放入您的目录结构。
相关文章:
- o数据扩展查询在SystemUserRolesSet上不起作用
- 正在处理在chrome扩展中不起作用的js
- 为什么这个扩展方法不起作用
- 为什么我的谷歌浏览器扩展程序在谷歌浏览器版本 41.0.2272.89 中不起作用
- Chrome 扩展程序权限不起作用
- Chrome 扩展 cookies.getAll 不起作用
- List.JS 在通过 Chrome 扩展程序注入时不起作用
- 设置Sails js视图扩展不'不起作用
- 使用jQuery的Chrome扩展不起作用
- chrome扩展名“sendResponse”不起作用
- 基本的谷歌chrome扩展消息传递不起作用
- $(document).click()在chrome扩展中不起作用
- Javascript在Google Chrome扩展的选项页中不起作用
- 在chrome扩展的弹出窗口中,警报不起作用
- firefox扩展对$.ajax的调用不起作用
- I'我试图制作一个chrome查找和替换扩展,但它赢了;不起作用
- chrome扩展弹出相同的选项卡仍然不起作用
- Javascript按钮单击在Chrome扩展弹出窗口中不起作用
- 从Ext.data.Store扩展不起作用
- 我注入css的chrome扩展不起作用