Menu
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.
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
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>
The popup.js code just do this:
$("#test").html("Foo!");
870
You can just put jquery. js into extension folder and include it in the manifest: { "name": "My extension", ... "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.
Load jQuery into your current page by copying and pasting the following code into your Chrome Console. var jqry = document. createElement('script'); jqry. src = "https://code.jquery.com/jquery-3.3.1.min.js"; document.
Step 1: Firstly, we have to open that Html file in which we want to add the jQuery using CDN. Step 2: After then, we have to place the cursor between the head tag just before the title tag. And, then we have to use the <script> tag, which specify the src attribute for adding.
jQuery code is implemented as part of JavaScript scripts. To add jQuery and JavaScript to your web pages, first add a <script> tag that loads the jQuery library, and then add your own <script> tags with your custom code.
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!"
}
}
And popup.html:
...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
