<脚本>中的简单jQuery Chrome扩展程序弹出式窗口中的标记未执行 [英] Simple jQuery within <script> tag in Chrome extension popup is not executing

查看：374
本文介绍了<脚本>中的简单jQuery Chrome扩展程序弹出式窗口中的标记未执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的HTML：
$ b 

 <！doctype html> 
< html> 
< head> 
< title> PassVault< / title> 
< link rel =stylesheettype =text / csshref =stil.css> 
< meta charset =utf-8> 
< script type ='text / javascript'src ='http：//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 
 $（div）。css（border，3px solid red）; 
 
}）; 
< / script> 
< / head> 
 
< body> 
< div id =rainbow> < / DIV> 
< div id =loginBox> 
< div id =welcome> Dobrodošli，uporabnik！ < / DIV><峰; br> 
< / div> 
< / body> 
< / html>

文档加载完成后，应该在所有div上放一个红色边框（有很多内容HTML文件），但它不。我看不出这里有什么问题。 jQuery全部位于同一个文件中，jQuery托管的链接由Google提供，也可以使用。



值得一提的是， .html em>文件由Google Chrome扩展程序的 manifest.json 文件中的 browser_action 调用。所以，它以这种方式打开弹出窗口：





还值得一提的是，上面的图片只是Google提供的示例图片。这不是我的形象。我的div没有边框，jQuery也没有改变。



manifest.json 

  .... 
 
browser_action：{
default_popup：popupindex.html，
} 
 ....

我不明白这个窗口是一个弹出窗口会如何影响 .js 文件功能，但我相信它与此有关。



从OP对评论的回应中添加： >
围绕所有这些div添加边框只是我测试jQuery是否工作的方式。我将来需要jQuery来做大量的其他事情。它甚至不能用这个简单的东西。

解决方案

您正试图加载/运行违反



manifest.json ： 

  { 
description：演示如何在弹出窗口中使用jQuery，
manifest_version：2，
name：jQuery-in-popup，
版本：0.1，
 
browser_action：{
default_icon：{
48：myIcon.png
}，
default_title：显示面板，
default_popup：popupindex.html
} 
} 
   
 
  popupindex.html ：
 
 
 <！doctype html> 
< html> 
< head> 
< title> PassVault< / title> 
< meta charset =utf-8> 
< script type ='text / javascript'src ='jquery.min.js'>< / script> 
< script type =text / javascriptsrc ='popupindex.js'> < /脚本> 
< / head> 
< body> 
< div id =rainbow> < / DIV> 
< div id =loginBox> 
< div id =welcome> Dobrodošli，uporabnik！ < / DIV><峰; br> 
< / div> 
< / body> 
< / html> 
  
  popupindex.js ：
  $（document）.ready（function（）{
 $（div）。css（border， 3px纯红）; 
}）; 
  
  jquery.min.js ：
 
 
 
从 https：/ /ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js ，并存储为扩展程序目录中的 jquery.min.js 。
 
This is my HTML:
<!doctype html>
<html>
<head>
    <title>PassVault</title>
    <link rel="stylesheet" type="text/css" href="stil.css">
    <meta charset="utf-8">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $("div").css("border", "3px solid red");

        });
    </script>
</head>

<body>
    <div id="rainbow"> </div>
    <div id="loginBox">
        <div id="welcome"> Dobrodošli, uporabnik! </div><br>
    </div>
</body>
</html>

After the document loads up, it's supposed to put a red border around all my divs (there's plenty in the HTML file), but it doesn't. I don't see what's wrong here. The jQuery is all in the same file and the link where jQuery is hosted is provided by Google and also works.



It's worth mentioning that the .html file is called by browser_action from the manifest.json file of a Google Chrome extension. So, it opens the popup this way:






It is also worth mentioning that the above image is just an example image provided by Google. This is not my image. My div's have no borders and the jQuery doesn't change that.



manifest.json
.... 

"browser_action": {
    "default_popup": "popupindex.html",
}
....

I don't see how this window being a popup would affect the .js file functionality but I'm sure it has something to do with that.



Added from comment on an answer by OP:

Adding a border around all these divs was just my way of testing whether or not jQuery works. I will be needing jQuery for plenty of other things in the future. It doesn't even work with this simple thing.
 解决方案 
You are attempting to load/run scripts that violate the Content Security Policy. This affects both your attempt to load jQuery from a source external to your extension and your attempted use of an inline script (your $(document).read() code).



You can access the console for the popup by right-clicking in the popup and selecting "Inspect". The console would have shown you the following errors:
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".

and 
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-qMVaiPhbudnaz91QqECVnbdTvKWnqeultnb/Nt/ybo8='), or a nonce ('nonce-...') is required to enable inline execution.




Extension Default Content Security Policy



For Chrome extensions, the default Content Security Policy is:
script-src 'self'; object-src 'self'

Google explains that the reasons for this are:

  
This policy adds security by limiting extensions and applications in three ways:

  
  




Loading jQuery



For loading jQuery, the best solution is to download the jQuery code. From the question, the code you are using is at: http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js.  However, as mentioned by Ted, that is quite an old version of jQuery. Unless you have a reason to be using an older version, you might try https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js. You can then store that file in your extension directory (or in a subdirectory) and include it in your popupindex.html with 
<script src="jquery.min.js"></script>




Your own code



Your own JavaScript code is not running because the default content security policy for extensions does not permit inline scripts. The best solution is to move your $(document).ready() code into a separate file (e.g. popupindex.js) which is then included in your popupindex.html using:
<script src="popupindex.js"></script>

Obviously, that needs to be after the <script> tag that is loading jQuery.



You can include inline scripts, but you will need to supply a "hash of the script in the "script-src" directive" in the value for the content_security_policy key within your manifest.json. However, doing so is just not worth the time and effort.  It is much easier to move the code into a separate file.



JavaScript included in HTML defined event handlers is also not permitted



Code that you add in HTML for event handlers is JavaScript and is also not permitted.  For example, the following will fail:
<button onclick="doMyThing();">My button</button>

You need to code that as:
<button id="doMyThingButton">My button</button>

Then, in your separate JavaScript file (see above), something like:
document.getElementById('doMyThingButton').addEventListener('click',doMyThing,false);




Complete extension with popup running jQuery



The following complete extension, which runs your jQuery code, produces a popup which looks like:






manifest.json:
{
    "description": "Demonstrate use of jQuery in a popup.",
    "manifest_version": 2,
    "name": "jQuery-in-popup",
    "version": "0.1",

    "browser_action": {
        "default_icon": {
            "48": "myIcon.png"
        },
        "default_title": "Show panel",
        "default_popup": "popupindex.html"
    }
}

popupindex.html:
<!doctype html>
<html>
<head>
    <title>PassVault</title>
    <meta charset="utf-8">
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type="text/javascript" src='popupindex.js'> </script>
</head>
<body>
    <div id="rainbow"> </div>
    <div id="loginBox">
        <div id="welcome"> Dobrodošli, uporabnik! </div><br>
    </div>
</body>
</html>

popupindex.js:
$(document).ready(function () {
    $("div").css("border", "3px solid red");
});

jquery.min.js:



Downloaded from https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js and stored as jquery.min.js in the extension's directory.


                        
这篇关于&lt;脚本&gt;中的简单jQuery Chrome扩展程序弹出式窗口中的标记未执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆