Geek Answers Handbook

Using jquery in chrome extension

the chrome extension that I create gets the selected text from the tab open when the user clicks the select button in the popup. I am trying to use jquery for this.

manifest.json

{ "manifest_version": 2, "name": "cap", "description": "BLAH", "version": "1.0", "permissions": [ "tabs", "https://*/*","http://*/*" ], "content_scripts": [ { "matches": ["http://*/*","https://*/*"], "js": ["selection.js"], "run_at": "document_start", "all_frames": true } ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup_main.html" } }

I have included jquery script in popup.html

 <html><head> <meta charset="utf-8"> <title>popup</title> <link rel="stylesheet" href="/popup.css"> <script type="text/javascript" src="popup.js"></script> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <!-- <script type="text/javascript" src="js/tag-it.js"></script> --> </head> <body> </body></html>

popup.js

 $(document).ready(function(){ $("p").click(function(){ chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) { var text = document.getElementById('text'); text.innerHTML = response.data; }); }); }); });

when I run this script, I get an error:

Unprepared ReferenceError: $ undefined

Please, help!

+6
source share
2 answers

You need to reorder the script tag to allow jQuery to load:

 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="popup.js"></script>
+13
source

Reorder. First you need to load the main jquery plugin, and then other plugins

 <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="popup.js"></script>
+6
source

More articles:


All Articles