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

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

问题描述

这是我的 HTML:

<头><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 纯红色");});<身体><div id="彩虹">

<div id="登录框"><div id="欢迎">Dobrodošli，uporabnik！</div><br>

文档加载后，它应该在我所有的 div 周围放置一个红色边框(HTML 文件中有很多)，但它没有.我不明白这里有什么问题.jQuery 都在同一个文件中，托管 jQuery 的链接由 Google 提供并且也有效.

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

还值得一提的是，上面的图片只是谷歌提供的示例图片.这不是我的形象.我的 div 没有边框，jQuery 不会改变这一点.

manifest.json

<代码>....浏览器动作":{"default_popup": "popupindex.html",}....

我不知道这个弹出窗口会如何影响 .js 文件功能，但我确定它与此有关.

从对 OP 回答的评论中添加:
在所有这些 div 周围添加边框只是我测试 jQuery 是否有效的方式.将来我将需要 jQuery 来做很多其他的事情.它甚至无法处理这个简单的事情.

解决方案

您正在尝试加载/运行违反

manifest.json:

{描述":在弹出窗口中演示 jQuery 的使用"，manifest_version":2，名称":jQuery-in-popup"，版本":0.1"，浏览器动作":{默认图标":{48":myIcon.png"},default_title":显示面板"，default_popup":popupindex.html"}}

popupindex.html:

<头><title>PassVault</title><元字符集=utf-8"><script type='text/javascript' src='jquery.min.js'></script><script type="text/javascript";src='popupindex.js'><身体><div id="彩虹">

<div id="登录框"><div id="欢迎">Dobrodošli，uporabnik！</div><br>

popupindex.js:

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

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;script&gt; 中的简单 jQueryChrome 扩展弹出窗口中的标记未执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆