using jquery in chrome extension

google-chrome, google-chrome-extension, jquery

Solution

You need to change the order of your script tag to allow jQuery to load first:

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

Problem

the chrome extension i am building gets the selected text from the tab open when the user clicks on the select button in 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 the 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; }); }); }); }); ``` on executing this script i am geting the error: Uncaught ReferenceError: $ is not defined please help!

Original source