Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using jquery in chrome extension

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!

like image 453
flyingmachine Avatar asked Mar 30 '13 12:03

flyingmachine


People also ask

Does jQuery work on chrome?

noConflict(); It may take a bit of time for jQuery to load. But, once jQuery is loaded, you can run your custom jQuery functions in chrome console. There may be some conflicts with other jQuery versions that may have been loaded on the page.

Can you put jQuery in HTML?

Step 1: Open the HTML file in which you want to add your jQuery with the help of CDN. Step 2: Add <script> tag between the head tag and the title tag which will specify the src attribute for adding your jQuery. Step 3: After that, you have to add the following path in the src attribute of the script tag.

How do I run a jQuery file in HTML?

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.

What is the extension of jQuery file?

Re: jQuery Library File Name Extensionjs.


2 Answers

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>
like image 156
Eli Avatar answered Oct 05 '22 09:10

Eli


Change the order .You have to load the jquery core plugin first and then then other plugins

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
like image 32
Suresh Atta Avatar answered Oct 05 '22 09:10

Suresh Atta