I am working on a Chrome extension, but cannot get notifications working. the workflow is the user right clicks on a link, selects "Send Link" from the extension's context menu, then a confirmation should display as a notification.
I have followed the example posted in another question, but it does not work. No notification is shown, nothing is logged in the console and the chrome.runtime.lastError is always "undefined". It's like the whole thing is just ignored. This is on Windows 10. What am I doing wrong?
script.js
function getlink(info,tab) {
var opt = {
iconUrl: "http://www.google.com/favicon.ico",
type: 'list',
title: 'Primary Title',
message: 'Primary message to display',
priority: 1,
items: [{ title: 'Item1', message: 'This is item 1.'},
{ title: 'Item2', message: 'This is item 2.'},
{ title: 'Item3', message: 'This is item 3.'}]
};
chrome.notifications.create('notify1', opt, function() { console.log('created!'); });
alert(chrome.runtime.lastError); //always undefined
}
chrome.contextMenus.create({
title: "Send link",
contexts:["link"],
onclick: getlink
});
manifest.json
{
"manifest_version": 2,
"version": "1.0",
"name": "ext1",
"description": "Extension1",
"icons": {
"16": "images/img16.png",
"48": "images/img48.png",
"128": "images/img128.png"
},
"browser_action":
{
"default_icon": "images/img128.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs",
"contextMenus",
"*://*/*",
"notifications"
],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css": ["styles.css"],
"js": ["getDescription.js"]
}
],
"background": {
"scripts": ["script.js"]
}
}
Related
What my code basically should perform:
Create a custom menu
When a text is selected on any webpage, right click and click on the new context menu
Opens a new tab (a specific url), wait till it fully loads, than puts the previously selected text into a textarea (there is only one on that page) and clicks ok button, to summarize the selected text
My background.js:
chrome.contextMenus.create({
id: "summarize",
title: "Summarize",
contexts: ["selection"]
});
chrome.contextMenus.onClicked.addListener(function (info, tab) {
if (info.menuItemId === "summarize") {
chrome.tabs.create({
url: "https://example.com/form"
}, function (tab) {
chrome.scripting.executeScript({
target: {
tabId: tab.id
},
files: ['action.js'],
});
});
}
});
My manifest.json:
{
"manifest_version": 3,
"name": "Quick Actions",
"description": "Quick Actions",
"version": "1.4.9",
"permissions": [
"activeTab",
"contextMenus",
"unlimitedStorage",
"<all_urls>"
],
"background": {
"service_worker": "background.js"
},
"browser_action": {
"default_title": "Summarize",
"default_popup": "popup.html"
},
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},
"browser_action": {
"default_icon": "icon16.png"
}
}
The problem:
When the new tab opens, the code doesn't run at all.
I tried to debug it, but even the console.log() part didn't work. I also tried with onLoad, same result. It seems that nothing triggered on the new page.
I read this and trying to make simple extension that is displaying notification, so I wrote the below:
// background.js
let color = '#3aa757';
chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({ color });
});
chrome.contextMenus.create({
"id": "sampleContextMenu",
"title": "Sample Context Menu",
"contexts": ["selection"],
});
// Example of a simple user data object
const user = {
username: 'demo-user'
};
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
// 2. A page requested user data, respond with a copy of `user`
if (message === 'get-user-data') {
showStayHydratedNotification()
sendResponse(user);
}
});
function showStayHydratedNotification() {
chrome.notifications.create('NOTFICATION_ID', {
type: 'basic',
iconUrl: '../m.png',
title: 'notification title',
message: 'notification message',
priority: 2,
buttons: [
{
title: 'Yes'
},
{
title: 'No'
}
]
})
}
And
//content-script
document.body.style.backgroundColor = 'orange';
console.log('Hello')
// 1. Send the background a message requesting the user's data
chrome.runtime.sendMessage('get-user-data', (response) => {
// 3. Got an asynchronous response with the data from the background
console.log('received user data', response);
// initializeUI(response);
});
My manifest is:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "js/background.js"
},
"permissions": ["storage", "activeTab", "contextMenus", "scripting", "alarms", "notifications"],
"options_page": "html/options.html",
"action": {
"default_popup": "html/popup.html"
},
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"exclude_matches": ["*://*/*business*"],
"run_at": "document_idle",
"css": ["css/my-styles.css"],
"js": ["js/content-script.js"]
}
]
}
The extension structure is:
When I load the page, everything in the extension is working fine, except the notification, it is not showing up, and I'm not getting any error:
What could be the mistake I made?
popup.js
function start(){
let options = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "/icon_128.png"
}
chrome.notifications.create(options);
}
// When the button is clicked, inject function will execute on current page
startButton.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: start,
});
});
manifest.json
{
"name": "Meet Auto Exit Bot",
"description": "Exits meet based on number of people present.",
"version": "1.0",
"manifest_version": 3,
"icons": {
"128": "icon_128.png"
},
"action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"activeTab",
"scripting",
"notifications"
]
}
I am developing a chrome in which I am using chrome notifications to notify users. But I am not able to figure out why chrome.notifications.create is not working inside my start() function. It works when using outside the callback function.
I need to close a specific tab in Google Chrome.
The behaviour is that an extension open up URL after she loaded and this can't be avoid.
This doesn't work :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"],
"persistent": false
}
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onUpdated.addListener(function(tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab)
}
});
In developper mode, i can see Uncaught TypeError: Cannot read property 'onUpdated' of undefined
As you can see, i'm a beginner.
Do you know how to achieve this ?
EDIT:
I also tried :
#background.js
chrome.tabs.onActivated.addListener(function(activeInfo) {
chrome.tabs.get(activeInfo.tabId, function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
});
chrome.tabs.getCurrent(function(tab){
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab);
}
});
chrome.tabs.query({currentWindow: true, active: true}, function(tabs){
if(tabs[0].url=="http://www.example.com") {
chrome.tabs.remove(tabs[0]);
}
});
The error is the same, only the property name change onActivated, getcurrent or query
Thanks to wOxxOm (and his patience), here is a code which do the job :
#manifest.json
{
"name": "Close Tab Helpx Adobe",
"description": "Close the url http://www.example.com",
"version": "0.1",
"manifest_version": 2,
"background": {
"scripts": ["background.js"],
"persistent": false
},
"icons": {
"16": "close-tab-helpx-adobe-16.png",
"128": "close-tab-helpx-adobe-128.png"
},
"permissions": [
"tabs"
]
}
#background.js
chrome.tabs.onCreated.addListener(function(tab) {
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
if(tab.url=="http://www.example.com") {
chrome.tabs.remove(tab.id);
}
});
});
So, i have my answer.
To go further ...
Haibara Ai says "Please be aware chrome.tabs.onUpdated will also fired for iframes, if a page contains many iframes, each completed iframe will trigger the event though you have checked : https://stackoverflow.com/a/36818991/2241806"
I am trying to send a message from my chrome extension popup window to the content script of the page, but the listener is not picking up the sent messages.
popup.js
chrome.runtime.sendMessage({ greeting: "hello" })
main.js (content script, part of the DOM)
The Listener is not picking up the sent messages:
chrome.runtime.onMessage.addListener(function (request) {
console.log("message received")
if (request.greeting == "hello") {
console.log("hello message")
}
})
manifest.json
{
"manifest_version": 3,
"name": "Go Go Ninja Computers",
"version": "0.54",
"description": "This extension is trying to send a message.",
"background": {
"scripts": [
"background.js"
],
"persistent": false
},
"permissions": [
"storage"
],
"content_scripts":
[
{
"matches": ["*://*/*"],
"js": ["main.js"],
"css" : ["style.css"],
"run_at": "document_end"
}
],
"browser_action": {
"default_title": "Ninja Pirate",
"default_popup": "popup.html"
}
}
I am just following these basic instructions, so I'm quite baffled why this isn't working? I'm also not sure if 'background.js' needs to be included, but without it, I cannot use console.log in popup.js.