Not able to add jquery file to chrome extension - javascript

I am trying to add Jquery to my chrome extension ,
here is my manifest.json
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["background.js"]
},
"js": ["js/jquery-1.10.2.min.js"]
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"],
"web_accessible_resources": [
"img/bt.png"
"js/jquery-1.10.2.min.js"
]
}
Problem is it is giving ,
Uncaught ReferenceError: $ is not defined

Apparently, your extension uses primarily background page and that is the place where you need jQuery. In this case, you can simply add jQuery JavaScript file in the list of background scripts:
{
"name": "OSpy",
"description": "",
"version": "1",
"manifest_version": 2,
"background":{
"scripts":["js/jquery-1.10.2.min.js", "background.js"]
},
"browser_action": {
"default_title": "Object Spy"
},
"permissions":["tabs","<all_urls>"]
}
REMEMBER TO PUT JQUERY SCRIPT BEFORE YOUR ACTUAL BACKGROUND SCRIPT!
Here's a simple example. Let's say you have an extension that makes Ajax request from its background page to its local html file and print the response to the console.
manifest.json:
{
"name": "Local Request",
"description": "Send Ajax request using jQuery",
"version": "2.0",
"background": {
"scripts": ["js/jquery-1.10.2.min.js", "background.js"],
"persistent": false
},
"browser_action": {
"default_title": "Send Request"
},
"manifest_version": 2
}
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
$.get("ajax/test.html", function(data) {
console.log(data);
});
});
Do the same steps to use jQuery in your content script. Here's an example of doing that in official documentation: http://developer.chrome.com/extensions/content_scripts.html ("js": ["jquery.js", "myscript.js"]).

Related

Google Chrome Extensions v3 - Error in event handler: ReferenceError: Image is not defined

I try to create a chrome extension with Manifest v3.
When creating a notification i need to set an iconUrl. The icon is "48.png" and it is with the manifest.json in the root folder.
Instead of my notification i get an error:
Error in event handler: ReferenceError: Image is not defined
In v3 they changed the web_accessable_resources definition. I think im setting it wrong but it could also be something else..
My Manifest.json
{
"name": "Hello Extensions",
"description":
"Shows off desktop notifications, which are \"toast\" windows that pop up on the desktop.",
"version": "1.0",
"icons": {"16": "16.png", "48": "48.png", "128": "128.png"},
"permissions": ["alarms","storage", "notifications"],
"background": {"service_worker": "background.js"},
"manifest_version": 3,
"web_accessible_resources": [{
"resources": ["48.png"],
"matches": [],
"extension_ids": [],
"use_dynamic_url": false
}]
}
My background.js
chrome.runtime.onInstalled.addListener(function() {
var options = {
title: "Title",
message: "Message goes here",
type: "basic",
iconUrl: "48.png"
};
return chrome.notifications.create("", options, function() {});
});

Chrome Extension, Add Listener Not Responding

I'm trying to create an alert on when chrome.tabs.audible changes condition. After reading the Google developer API information, I do not understand what I'm doing incorrectly. I'm not familiar with JS, so it is possible I'm doing something stupid...
manifest.json:
{
"name": "Extension",
"author": "Extension Author",
"description": "Extension description",
"manifest_version": 2,
"version": "1",
"permissions": [
"tabs",
],
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": [
"js/background.js"
],
"persistent": false
}
}
background.js:
chrome.tabs.audible.addListener(function(tabs) {
alert("AUDIO");
});
I'm able to load the extension and load the 'popup.html' menu. If I add alert("test"); to 'backgournd.js' outside of a function, it will create the alert.
Look at the Summary table here. There is no Method, Event or Property "audible" inside it, so your chrome.tabs.audible shouldn't work. It is equal to undefined.
You should use onupdate event. So, you code looks like:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, Tab){
if(changeInfo.audible){
console.log("The tab with id = " + tabId + "has changed its audible state.");
}
})

Firefox WebExtention API: TypeError: browser.browserAction is undefined [duplicate]

This question already has answers here:
TypeError: [API] is undefined in content script or Why can't I do this in a content script?
(2 answers)
Closed 5 years ago.
While migrating my old Firefox add-on to WebExtension API, failed to understand while I am getting this error:
TypeError: browser.browserAction is undefined
Here is the manifest.json:
{
"manifest_version": 2,
"name": "My Login",
"version": "3.0",
"description": "Login to my page",
"homepage_url": "https://localhost",
"icons": {
"48": "icons/button-1.png"
},
"permissions": [
"activeTab", "storage"
],
"browser_action": {
"default_icon": "icons/button-1.png",
"default_title": "Login"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["index.js"]
}
],
"options_ui": {
"page": "options.html"
}
}
Here is the index.js:
function handleClick() {
var loginUserName, loginPassword;
var URL = window.content.location.href;
var doc = window.content.document;
}
browser.browserAction.onClicked.addListener(handleClick);
So I am getting TypeError: browser.browserAction is undefined in the browser console when I go to about:debugging and load my add-on as a temporary addon.
Options.html, options.js and button-1.png do exist - I just don't place them here.
Observed in Firefox 55.0.3 (32-bit). Any idea why this error happens?
Thanks,
Racoon
browser.browserAction should be called in a background script and not in a content script like you're doing. So assuming this code is in background.js:
function handleClick() {
console.log("do something.");
// If you want to something with the content, you will need a content script and messaging
}
browser.browserAction.onClicked.addListener(handleClick);
You add the background_scripts key in manifest.json:
{
"manifest_version": 2,
"name": "My Login",
"version": "3.0",
"description": "Login to my page",
"homepage_url": "https://localhost",
"icons": {
"48": "icons/button-1.png"
},
"background": {
"scripts": ["background.js"]
}
}

Javascript external script for Chrome Extension not working

I'm currently developing a Chrome extension but my it doesn't seem to be able to execute any Javascript.
$(document).ready(function () {
$("#overlay").hide();
});
In this example I'm trying to hide a div with id "overlay" but it doesn't seem to be working. Stored in an external file (popup.js)
Manifest:
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"description": "",
"offline_enabled": true,
"background": {
"scripts": [
"js/background.js"
]
},
"icons": { "16": "android-16.png",
"48": "android-48.png",
"128": "android-128.png"
},
"browser_action": {
"default_icon" : "android-128.png",
"default_title": "",
"default_popup": "index.html"
},
"permissions": [
"background", "unlimitedStorage", "tabs"
],
"web_accessible_resources": [
"index.html","js/popup.js"
]
}
HTML links situated before body closing tags:
<script src="js/background.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/popup.js"></script>
Just as #Xan mentioned due to the CSP will block the script the best way to avoid this and do it work is downloading jquery.js and make it part of your extension.

Chrome Extension With Background Page Not Working With Manifest Version 2

I have a simple chrome extension which displays a little icon in Google Chrome. On click, it loads a search page of my site, which in term redirects you to the right page.
https://chrome.google.com/webstore/detail/w3patrol-watch-over-any-w/addcgpijdjacmndaadfgcpbfinagiplm is the extension.
Now, Google is forcing me to update to manifest version 2, instead of 1. But this is breaking my working extension.
In manifest.json I have added manifest_version 2, but since then the icon does not work anymore when I click on it.
{
"background": {
"page": "background.html"
},
"browser_action": {
"default_icon": "icon19.png",
"default_title": "__MSG_default_title__"
},
"default_locale": "en",
"description": "__MSG_description__",
"icons": {
"128": "icon128.png",
"19": "icon19.png",
"48": "icon48.png"
},
"name": "__MSG_name__",
"permissions": [ "tabs", "http://*.w3patrol.com/" ],
"update_url": "http://clients2.google.com/service/update2/crx",
"version": "1.0",
"manifest_version": 2
}
This is background.html
<script type="text/javascript">
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
</script>
What do I need to add/change to get it working with manifest version 2?
You just need to remove the script tag from your background page. Here's how background.js(instead of background.html) should look like:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.getSelected(null,function(tab) {
chrome.tabs.create( { url: "http://w3patrol.com/search.php?q=" +tab.url } );
});
});
And remove the 'page' property in background. Add 'scripts' property:
"background": {
"scripts": ["background.js"]
},

Categories