Javascript 如何在中使用jquery操作google chrome扩展DOM元素？
大家好，我正在尝试创建一个google chrome插件，但实际上我正在尝试添加jquery，以使我的生活更轻松 所以我实际上调用了html中的另一个脚本文件Javascript 如何在中使用jquery操作google chrome扩展DOM元素？,javascript,jquery,html,google-chrome,google-chrome-extension,Javascript,Jquery,Html,Google Chrome,Google Chrome Extension,大家好，我正在尝试创建一个google chrome插件，但实际上我正在尝试添加jquery，以使我的生活更轻松 所以我实际上调用了html中的另一个脚本文件 <script src="myScript.js"></script> 但我似乎可以使用jquery 所以问题是，如果我能做这样的事情，如果是的话，我做得对吗 更新 我的HTML代码是 <!doctype html> <head> <!-- this is the j
<script src="myScript.js"></script>
<!doctype html>
<head>
<!-- this is the jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Core CSS file -->
<link rel="stylesheet" href="assets/plugin/photoSwipe/photoswipe.css">
<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
In the folder of skin CSS file there are also:
- .png and .svg icons sprite,
- preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="assets/plugin/photoSwipe/default-skin/default-skin.css">
<!-- Core JS file -->
<script src="assets/plugin/photoSwipe/photoswipe.min.js"></script>
<!-- UI JS file -->
<script src="assets/plugin/photoSwipe/photoswipe-ui-default.min.js"></script>
<!--this is my own Style sheet-->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div id="NavDiv">
<h4 id="NavTitle">
<strong>
Navigation
</strong>
</h4>
<nav id="Navbar">
<ul>
<li><a><h4>Chat Bot</h4></a></li>
<li><a><h4>Recent</h4></a></li>
<li><a><h4>Settings</h4></a></li>
</ul>
</nav>
</div>
<div id="dimmer">
</div>
<div id="container">
<div id="Taskbar">
<div id ="HambugerMenu">
<img id ="TitleLogo" class="img-responsive" src="assets/image/menu.png">
</div>
<div id = "TitleLogoDiv">
<img id ="TitleLogo" class="img-responsive" src="assets/image/TitleLogo.png">
</div>
<h3 id = "TaskbarTitle">Recent</h3>
</div>
<div id="content">
</div>
</div>
<script src="myScript.js"></script>
</body>
航行
- 聊天机器人
- 最近的
- 背景
最近的
function ShowMenu(){
var NavDiv = document.getElementById("NavDiv");
NavDiv.style.WebkitTransform = "translateX(0)";
NavDiv.style.msTransform = "translateX(0)";
NavDiv.style.transition = "translateX(0)";
NavDiv.style.transition= "all 0.1s linear";
var dimmer = document.getElementById("dimmer");
dimmer.style.visibility = "visible"
dimmer.style.transition = "opacity 0.5s";
dimmer.style.WebkitTransition = "opacity 0.5s";
dimmer.style.msTransition = "opacity 0.5s";
dimmer.style.opacity = 0.5;
}
function HideMenu(){
var dimmer = document.getElementById("dimmer");
dimmer.style.transition = "opacity 0.1s";
dimmer.style.WebkitTransition = "opacity 0.1s";
dimmer.style.msTransition = "opacity 0.1s";
dimmer.style.opacity = 0;
var NavDiv = document.getElementById("NavDiv");
NavDiv.style.WebkitTransform = "translateX(-13em)";
NavDiv.style.msTransform = "translateX(-10em)";
NavDiv.style.transition = "translateX(-10em)";
NavDiv.style.transition= "all 0.3s linear";
setTimeout(function(){
dimmer.style.visibility = "hidden";
}, 300);
}
document.getElementById("HambugerMenu").onclick = function(){
ShowMenu();
};
document.getElementById("dimmer").onclick = function(){
HideMenu();
};
console.dir($('#dimmer')); <-----this is to test if jquery is working or not
功能显示菜单（）{
var NavDiv=document.getElementById（“NavDiv”）；
NavDiv.style.webkitttransform=“translateX（0）”；
NavDiv.style.msTransform=“translateX（0）”；
NavDiv.style.transition=“translateX（0）”；
NavDiv.style.transition=“所有0.1s线性”；
var dimmer=document.getElementById（“dimmer”）；
dimmer.style.visibility=“可见”
dimmer.style.transition=“不透明度0.5s”；
dimmer.style.WebkitTransition=“不透明度0.5s”；
dimmer.style.msTransition=“不透明度0.5s”；
dimmer.style.opacity=0.5；
}
函数HideMenu（）{
var dimmer=document.getElementById（“dimmer”）；
dimmer.style.transition=“不透明度0.1s”；
dimmer.style.WebkitTransition=“不透明度0.1s”；
dimmer.style.msTransition=“不透明度0.1s”；
dimmer.style.opacity=0；
var NavDiv=document.getElementById（“NavDiv”）；
NavDiv.style.webkitttransform=“translateX（-13em）”；
NavDiv.style.msTransform=“translateX（-10em）”；
NavDiv.style.transition=“translateX（-10em）”；
NavDiv.style.transition=“所有0.3s线性”；
setTimeout（函数（）{
dimmer.style.visibility=“隐藏”；
}, 300);
}
document.getElementById（“HambugerMenu”）.onclick=function（）{
ShowMenu（）；
};
document.getElementById（“dimmer”）.onclick=function（）{
HideMenu（）；
};
console.dir（$（“#调光器”） 这取决于您想在哪里使用Jquery，如果它在popup.html中，那么您必须将它添加到popup.html中脚本声明的上方
如果要在background.html中使用它，则必须将其添加到清单（）中
“背景”：{
“脚本”：[“jquery.js”]，
“持续”：假
}，
如果在内容脚本中，则您可以将其添加到清单中，以便：
“内容脚本”：[{
“匹配项”：[“http://*/*”，“https://*/*”]，
“js”：[“jquery-3.1.1.min.js”，“myScript.js”]
}]，
一种方法是直接从最小化的jquery文件中复制粘贴jquery作为一行代码。那么您在弹出窗口和内容脚本中使用相同的myscript.js？为什么？无论如何，您必须在“js”
中的内容脚本声明中包含popup.html中的所有其他脚本，因为脚本依赖于它们。或者，您必须将html注入页面，脚本才能工作。还有样式隔离的问题，在StackOverflow上有几种解决方案。您想要完成什么？除非您需要，否则请不要将jQuery加载到每个页面（content\u scripts
）和您的匹配项中。jQuery是85kiB的最小化代码。这是一个沉重的负担，每一页都要负担。我们这些打开100个标签的人怎么办？虽然您可能真的需要加载jQuery，但这样做更可能是为了不使用普通JavaScript而在自己的代码中保存几个/几百个字符。如果是这样的话（“让我的生活更轻松”），从用户的角度来看，这样做是一个非常糟糕的权衡。内容脚本与网页一起注入，因此它不能与弹出脚本相同，弹出脚本是一个不同的页面。一定要读这篇文章。您可能需要@Annonymous177，您可能正在使用jQuery来启用在其他方面很难/不可用的功能。如果是这样，那么使用它是合理的（通常意味着除了jQuery之外，还使用了一些插件）。但是，即使在使用它（+插件）创建页面内UI时，也只应加载用户开始交互所需的最小值。例如：没有jQuery，只有足够的UI资源和代码来显示初始UI元素，并识别用户已经开始与您的UI交互。一旦用户开始交互，然后加载所需的所有内容。OP已经知道这一点，正如您从发布的代码中所看到的，因此真正的问题仍然是未知的，因为它没有得到正确的解释。看到他的代码和最后的脚本注入，很可能是在popup.html中，如果是这样的话，答案是相关的，因为他必须在页面底部添加脚本应答器前面的popup.html是myscript.js。。。但事实上，澄清会更好。这也是为什么我引用了其他需求的所有可能性…包括jQuery在OP案例中从来都不是问题，所以您的答案是针对不同的问题。如果OP在其评论中说“$未定义”，则可能意味着问题包括jQuery。不久前，我开始使用chrome扩展，我也遇到了同样的困难，无法正确理解内容脚本/背景/弹出窗口是什么（以及在哪里）。我的观点是，对于这个特定的问题，您的答案太笼统了，除了在弹出窗口中引用远程jquery之外，还有很多问题
function ShowMenu(){
var NavDiv = document.getElementById("NavDiv");
NavDiv.style.WebkitTransform = "translateX(0)";
NavDiv.style.msTransform = "translateX(0)";
NavDiv.style.transition = "translateX(0)";
NavDiv.style.transition= "all 0.1s linear";
var dimmer = document.getElementById("dimmer");
dimmer.style.visibility = "visible"
dimmer.style.transition = "opacity 0.5s";
dimmer.style.WebkitTransition = "opacity 0.5s";
dimmer.style.msTransition = "opacity 0.5s";
dimmer.style.opacity = 0.5;
}
function HideMenu(){
var dimmer = document.getElementById("dimmer");
dimmer.style.transition = "opacity 0.1s";
dimmer.style.WebkitTransition = "opacity 0.1s";
dimmer.style.msTransition = "opacity 0.1s";
dimmer.style.opacity = 0;
var NavDiv = document.getElementById("NavDiv");
NavDiv.style.WebkitTransform = "translateX(-13em)";
NavDiv.style.msTransform = "translateX(-10em)";
NavDiv.style.transition = "translateX(-10em)";
NavDiv.style.transition= "all 0.3s linear";
setTimeout(function(){
dimmer.style.visibility = "hidden";
}, 300);
}
document.getElementById("HambugerMenu").onclick = function(){
ShowMenu();
};
document.getElementById("dimmer").onclick = function(){
HideMenu();
};
console.dir($('#dimmer')); <-----this is to test if jquery is working or not