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!
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.
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.
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.
Re: jQuery Library File Name Extensionjs.
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>
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>
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