Google chrome extension 扩展问题-ContentScript&；覆盖层的前置任务
我目前正在为Google Chrome开发一个覆盖层（如果你愿意的话是一个工具栏），我有一些问题，我不明白为什么 因此，基本上我用manifest.json创建了一个扩展：Google chrome extension 扩展问题-ContentScript&；覆盖层的前置任务,google-chrome-extension,chromium,Google Chrome Extension,Chromium,我目前正在为Google Chrome开发一个覆盖层（如果你愿意的话是一个工具栏），我有一些问题，我不明白为什么 因此，基本上我用manifest.json创建了一个扩展： { "background_page" : "background.html", "browser_action" : { "default_icon" : "images/Extension.png" }, "content_scripts": [
{
"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}
<iframe id="YourToolbarFrame" src="'+toolbarURL+'">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/overlay.js"></script>
</head>
</html>
var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},
injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
body.append(iframe);
iframe.show();
//alert('Injection reussie');
}
}
var length = {}, maxLength = 0, currentLength;
$(function(){
$('#menu li.title')
.each(function(){
// Save the Menu Length
length[$(this).attr('id')] = currentLength = $(this).height();
// Fix the height
$(this).height(20);
if(currentLength > maxLength)
{
maxLength = currentLength;
}
// To don't overflow on the content
$('#menu').height(maxLength);
})
.mouseenter(function(){
$(this).stop().animate({
height: length[$(this).attr('id')]
}, 500);
})
.mouseleave(function(){
$(this).stop().animate({
height: '20px'
}, 500);
});
});
$(document).ready(function() {
overlay.init();
});
var覆盖={
init:function（）{
这个.injectoverlay（）；
//警报（‘初始化’）；
},
injectoverlay:function（）{
变量body=$（'body'），
overlayURL=chrome.extension.getURL（“overlay.html”），
iframe=$（''）；
body.append（iframe）；
iframe.show（）；
//警报（“注射重用”）；
}
}
var length={}，maxLength=0，currentLength；
$（函数（）{
$（“#menu li.title”）
.each（函数（{
//保存菜单长度
长度[$（this.attr（'id'）]=currentLength=$（this.height（）；
//固定高度
$（此）。高度（20）；
如果（currentLength>maxLength）
{
maxLength=当前长度；
}
//不要在内容上溢出
$（“#菜单”）。高度（最大长度）；
})
.mouseenter（函数（）{
$（this）.stop（）.animate({
高度：长度[$（this）.attr（'id'）]
}, 500);
})
.mouseleave（函数（）{
$（this）.stop（）.animate({
高度：“20px”
}, 500);
});
});
$（文档）.ready（函数（）{
overlay.init（）；
});
<html>
<head>
<title>overlay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
<base target="_blank" />
</head>
<body>
<div class="default">
<form id="searchForm">
<img id="logo" src="images/Extension.png"></img>
<input type="search" value="Enter you research" name="search">
<input type="submit" value="Go !" /> |
</form>
<ul id="menu">
<!--
<li class="title" id="accueil">
<a class="" href="#">Accueil</a>
</li>
-->
<li class="title" id="contact">
<a class="" href="#">Contact</a>
<ul class="dropMenu">
<li><a href="www.google.com">google</a></li>
<li><a href="www.yahoo.com">yahoo</a></li>
</ul>
</li>
</ul>
</div>
<!-- Include the library of Google, more centralized.
Optimized the browser cache.
Compressed version. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
覆盖层
|
-
overlay.jsjquery.js//"background_page" : "background.html", - this is not needed
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
（此外，背景页没有可见的正文，因此您现在可以将框架插入不可见的页）当您第一次安装扩展时，内容脚本不会被插入当前打开的选项卡中，只有在重新加载后才会被插入。这就是您所描述的吗？不，我从未看到我的内容脚本，即使我重新加载、打开新选项卡或重新启动浏览器…好的，那么请提供一些来自背景页和内容脚本的代码。非常感谢。我还有一个关于我们可以包含在内容脚本中的文件的问题。如果我在清单中包含jquery.js，那么会为所有文件加载它吗？此外，这是否可能包含“”而不是jquery.js？@Sindar如果您在清单中声明了多个内容脚本文件，那么它们都将按照与所有页面对应的顺序包含。您不能在那里使用外部链接，只能使用本地文件（最好还是使用本地文件，因为它们加载速度更快）