Can't get notifications to work on Google Chrome Extension - javascript

I'm writing a Google Chrome extension, but I can't get chrome notifications to work.
The goal (at least for testing purposes): to display a notification when the user clicks on the extension icon on the top right.
What's happening: clicking on the extension icon only displays the "Test body" text from popup.html but no notifications. Inspecting the console for the extension, I can see the result of the callback function: Last error: undefined.
EDIT: I've tried using Google's Notification API to test the functionality and it also seemed to not work. This link talks about a bug on the Chrome notifications, so I worry that might be the issue. Any input about the bug would be appreciated.
Here is my code:
manifest.json:
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"icons": { "16": "images/icon16.png", "48": "images/icon48.png", "128": "images/icon128.png" },
"content_scripts": [
{
"matches": ["*://*.amazon.com/*buy*"],
"js": ["js/content.js"]
}
],
"browser_action": {
"default_popup": "html/popup.html",
"default_title": "Test Extension"
},
"background": {
"scripts": ["js/background.js"]
},
"permissions": [
"notifications"
],
"web_accessible_resources": ["images/icon48.png"]
}
popup.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nubank Credit Control</title>
</head>
<body>
<p>Test body</p>
<script src="../js/popup.js"></script>
</body>
</html>
content.js:
chrome.runtime.sendMessage({
url: window.location.href
});
background.js:
chrome.runtime.onMessage.addListener(function () {
const options = {
type: "basic",
iconUrl: chrome.extension.getURL("../images/icon48.png"),
title: "This is the title",
message: "This is the main message of the notification",
};
chrome.notifications.create("notifId", options, function() {console.log("Last error:", chrome.runtime.lastError);});
});

Actually, notifications can be triggered in popup.js as well. As far as I can see the issue is in how you call chrome.notifications.create().
The first parameter is optional but if you still want to pass it, it should be a valid notification id, not just 'notifId'.
For testing purposes this should be enough:
manifest.json
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_popup": "html/popup.html",
"default_title": "Test Extension"
},
"permissions": [
"notifications"
]
}
popup.js
const options = {
type: "basic",
iconUrl: "../images/icon48.png",
title: "Popup.js",
message: "Hello from popup.js!"
};
chrome.notifications.create(options);
Or, in case of using background.js:
manifest.json
{
"name": "Test Extension",
"description": "Test description",
"version": "1.0",
"manifest_version": 2,
"browser_action": {
"default_title": "Test Extension"
},
"background": {
"scripts": ["js/background.js"]
},
"permissions": [
"notifications"
]
}
background.js
const options = {
type: "basic",
iconUrl: "../images/icon48.png",
title: "Background.js",
message: "Hello from background.js!"
};
chrome.browserAction.onClicked.addListener(function (){
chrome.notifications.create(options);
});

The chrome.notifications API is only available in the background context, see: https://stackoverflow.com/a/6189524/3862289 for a complete solution.

Related

Why does tab.url from the callback of "chrome.tabs.onUpdated.addListener()" return undefined?

For my Chrome extension, I need to show the pageAction only on a certain website. I used to do this with declarativeContent, but it isn't supported on Firefox, so I have to do it the manual way. The answers to this question suggested that you could simply use something like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if (changeInfo.status === "complete" && tab.url) {
if (tab.url.match(/google.com/)) {
chrome.pageAction.show(tabId);
}
}
});
This didn't work for me, so I modified the code in the background script to look like this:
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
console.log("Tab updated! Tab URL: " + tab.url);
});
Every time you update a tab the console just prints Tab updated! Tab URL: undefined a few times. I also tried to query the tab like the answers to this question said, which produces the same output.
The other files of the extension are:
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
popup.html:
<!DOCTYPE html>
<html>
<body>
This is a popup!
</body>
</html>
You are missing the tabs permission from your manifest.json file. With this permission the URL of the tab should also be logged to the console.
"permissions": ["activeTab", "tabs"] // <-- This
manifest.json:
{
"name": "Test",
"version": "1.0",
"description": "Test for StackOverflow",
"permissions": ["activeTab", "tabs"],
"background": {
"scripts": ["background.js"]
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}

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 - generate report from background but show in pop up? [duplicate]

This question already has an answer here:
Communicate between scripts in the background context (background script, browser action, page action, options page, etc.)
(1 answer)
Closed 5 years ago.
I'm writing up a chrome extension, with all analysis happening in my background.js. Say the result comes out from this script, in the format of a HTML table, then how can I show it in the pop up page, which is the page after the user clicks on the extension icon?
Many thanks!
This is my manifest.js
{
"manifest_version": 2,
"name": "myExtension",
"description": "...",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "lightning.png",
"default_title": "Click here!",
"default_popup": "intro.html"
},
"permissions": [
"background",
"activeTab",
"tabs",
"bookmarks",
"webRequestBlocking",
"webRequest",
"<all_urls>",
"debugger"
]
}
The idea is to keep message listener in background script, so each time popup is running it asks for a report.
That is the code:
manifest.json
{
"name": "test",
"version": "0.0.1",
"manifest_version": 2,
"description": "Test",
"background": {
"scripts": [
"background.js"
]
},
"permissions": [],
"browser_action": {
"default_popup": "popup.html"
}
}
popup.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="report"></div>
<script src="popup.js"></script>
</body>
</html>
popup.js
var reportContainer = document.querySelector('#report');
chrome.runtime.sendMessage({action: 'report'}, function (response) {
reportContainer.innerHTML = response;
});
background.js
var report = '<h1>hello from background</h1>';
chrome.runtime.onMessage.addListener(
function(data, sender, sendResponse) {
if(data.action === 'report') {
sendResponse(report);
}
}
);

Chrome Extension for loop inconsistent

I'm running into an issue with a Chrome extension I'm currently working on. Its function is to take user input from the popup textarea and create tabs for each url separated by a line break. Overall, it successfully opens all urls 90% of the time but 10% of the time it only opens 7/10 urls in the textarea. Also, jquery 2.2.3 is used to get the values of the textarea, not sure if that matters.
I'm trying to figure out how/why it will occasionally only open 7/10 urls in the textarea and if it can be fixed. Below is the manifest, popup.html, and backend.js.
backend.js:
function urltoTabs(){
var text = $('textarea').val().split('\n');
for (var h = 0; h <= text.length; h++) {
if (text[h].length < 1) continue;
chrome.tabs.create({url:text[h]});
}
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('engage').addEventListener('click', urltoTabs);
});
popup.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="backend.js"></script>
</head>
<body>
<form>
<p><strong>List urls below<strong><br />
<textarea id="textarea" rows="15"></textarea></p>
<button id="engage">Engage!</button>
</form>
</body>
</html>
manifest.json:
{
"manifest_version": 2,
"name": "Link to Tabs",
"short_name": "Link To Tabs",
"description": "Test url to tabs.",
"version": "0.0.4",
"minimum_chrome_version": "38",
"content_scripts": [
{
"matches": ["*://*/*"],
"js": ["backend.js"]
}],
"permissions": [
"tabs"
],
"browser_action": {
"default_icon": {
"19": "assets/icon_16.png"
},
"default_title": "New Tabs!",
"default_popup": "popup.html"
},
"icons": {
"16": "assets/icon_16.png",
"128": "assets/icon_128.png"
}
}
I appreciate any help on this!
Answer credit goes to #wolf-war
The issue was the popup would close once tabs were created which would close the operation prematurely. Pushing popup.html and backend.js to the background fixed this issue. All that changed was the manifest.json.
manifest.json:
{
"manifest_version": 2,
"name": "Link to Tabs",
"short_name": "Link To Tabs",
"description": "Test url to tabs.",
"version": "0.0.4",
"minimum_chrome_version": "38",
"background": {
"js": "backend.js", // Needs both js and html to store user input correctly
"page": "popup.html"
},
"permissions": [
"tabs"
],
//content_scripts was removed
"browser_action": {
"default_icon": {
"19": "assets/icon_16.png"
},
"default_title": "New Tabs!",
"default_popup": "popup.html"
},
"icons": {
"16": "assets/icon_16.png",
"128": "assets/icon_128.png"
}
}
Thanks for all the help, I really appreciate it!

Not able to add jquery file to chrome extension

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"]).

Categories