将 jQuery 加载到 chrome-extension [英] Loading jQuery into chrome-extension

查看:31
本文介绍了将 jQuery 加载到 chrome-extension的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试进入 Chrome 扩展程序的神奇世界.现在我已经建立了我的清单,试图加载 jquery.

I'm trying my first step into the magical world of Chrome Extensions. Now i've build up my manifest trying to load jquery.

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "description": "First try",
    "options_page": "options.html",
    "content_scripts": [{
        "matches": ["chrome-extension://*/*"],
        "js": ["jquery.js", "popup.js"],
        "run_at": "document_end"
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

实际上尝试重新加载扩展告诉我匹配项"与有效架构不匹配.

Actually trying to reload the extension tell me that the "matches" do not match a valid schema.

但这还不是全部.为了克服它,我尝试将匹配"值更改为 *://*/* 并重新加载.嗯,扩展似乎正确加载,但似乎 jquery 没有加载,因为我可以从 popup.js 得到的错误只是告诉我

But that's not all. To get over it, i've tried just changing the "matches" value to *://*/* and reload. Well, the extension seems to load correctly but seems like the jquery is not loaded due to the error i can get from the popup.js that just tell me

未捕获的引用错误:$ 未定义

Uncaught ReferenceError: $ is not defined

实际上 HTML 只是:

Actually the HTML is just:

<!doctype html>
<html>
<head>
    <title>Test Extension</title>
    <link rel="stylesheet" style="text/css" src="style.css">
</head>
<body>
    <div id="test"></div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

popup.js 代码就是这样做的:

The popup.js code just do this:

$("#test").html("Foo!");

推荐答案

内容脚本将永远在扩展的上下文中运行.在浏览器操作弹出窗口中加载脚本的正确方法是将其包含在您的代码中.让您的清单文件:

Content scripts will never run in the context of an extension. The correct way to load scripts in your browser action popup is by including it in your code. Let your manifest file be:

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "options_page": "options.html",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

popup.html:

...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>

这篇关于将 jQuery 加载到 chrome-extension的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆