Question

我有一个有效的谷歌浏览器扩展程序，我正试图通过其他功能进行扩展。

我修改了“popup.html”以包含对jQuery的外部引用，它们是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

我在CodeIgniter中编写了相应的控制器模型方法来处理应用程序中其他地方使用的jQuery请求，并且正在运行：

$(document).ready($(function(){
    $('#link').autocomplete({
        source: "http://domain.com/topics/jq_get_topics_by_search_as_object/",
        appendTo: ".link-results",
        open: function(event, ui) {
        $('ul.ui-autocomplete#link')
                .removeAttr('style')
                .hide()
                .appendTo('.link-results')
                .show();
        },
        select: function(event, ui) {
            $('.link-results')
                .append('<div class="topic-link-box" id="topic-link-box-' + ui.item.topic_id + '"><input type="checkbox" id="topic-link-item-' + ui.item.topic_id + '" name="topic-links-add[]" value="' + ui.item.topic_id + '" checked="checked"><a href="' + 'http://macbookpro.local/development/theundercloud/topics/edit/' + ui.item.topic_id + '" title="Edit ' + ui.item.name + '">' + ui.item.name + '</a> [<a href="' + 'http://macbookpro.local/development/theundercloud/topics/view/' + ui.item.topic_id + '">View</a>] [<a href="' + 'http://macbookpro.local/development/theundercloud/topics/visit/' + ui.item.topic_id + '" target="_blank">Link</a>]</div>');
        }
    }).data("autocomplete")._renderItem = function(ul, item) {
        return $('<li></li>')
            .data("item.autocomplete", item)
            .append('<a>' + item.name + '</a>')
            .appendTo(ul);
    };
}));

另外，我把它包装在$（document）.ready（）方法中，这是我在应用程序中工作的唯一重大改变。

除了“popup.html”中的jQuery引用之外，我还有：

<form>
    <fieldset>
        <legend>Topics</legend>
        <dl>
            <dt><label for="link">Link</label></dt>
            <dd><input type="text" id="link" /></dd>
        </dl>
    </fieldset>
</form>

这是处理实际数据提交的主要表单的外部，我在其中：

<div class="link-results"></div>

毋庸置疑，这种安排是 - 据我所知并且能够测试 - 与应用程序本身的工作版本相同。但是，它无法在Google Chrome扩展程序中使用。

更新

我发现内容安全策略存在错误：

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.google.com".
Refused to load the script 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' because it violates the following Content Security Policy directive: "script-src 'self' https://www.google.com".
Uncaught ReferenceError: $ is not defined

我已将“manifest.json”更改为：

"permissions": [
    "tabs",
    "http://*/",
    "https://*/",
    "file:///*/*",
    "https://*.google.com/"
],
"content_security_policy": "script-src 'self' https://www.google.com; object-src 'self'",

我已经将使用Google的jQuery脚本引用更改为“https”，但这不是固定的东西。

有什么想法吗？

固定

我将“manifest.json”中的URL更改为与脚本引用中的URL相同。

Answer 1

我将“manifest.json”中的URL更改为脚本引用中的URL，就像Rob不久前指出的那样。

Answer 2

我对Web浏览器安全模型的理解将阻止您从动态插件等不安全的源加载javascirpt页面。此外，对于文档中的一些扩展插件，所有JS文件都存在于扩展https://developer.chrome.com/extensions/overview.html#relative-urls。

中

如此简单的答案是下载JQuery版本并将其包含在您的项目中。经过测试并为我工作。

在Google Chrome扩展程序popup.html中使用jQuery

2 个答案: