I'm trying to have it so that when a user clicks on the drop down menu in the google chrome's browser extension context menu that it creates the Chrome Notification. Any insight as to what I'm doing wrong would be much appreciated.
Side Note: All this is connected to a default popup on the chrome navbar that opens up a pop up box when clicked.
chrome.runtime.onInstalled.addListener(function() {
var context = "selection";
var title = "Add To test";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],
"id": "context" + context});
});
var options = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconURL: "test_logo.png"
};
chrome.contextMenus.onClicked.addListener(function() {
chrome.notifications.create(options, blarg);
});
function blarg() {
console.log("Pop UP FOR LIFE");
}
var options = {
type: "basic",
title: "Primary Title",
message: "Primary message to display",
iconUrl: "test_logo.png"
};
You must change iconURL to iconUrl. After change notifications will work.
chrome.notifications | examples
Related
This code work on desktop Chrome but don't work on android in Kiwi browser, I can't add new option in context menu when I select text
main.js
searchText = function(word){
var query = word.selectionText;
chrome.tabs.create({url: "https://www.ebay.com/sh/research?dayRange=365&sorting=-avgsalesprice&tabName=SOLD&keywords="
+ query}); };
chrome.contextMenus.removeAll(function() {
chrome.contextMenus.create({
id: "1",
title: "demo this!",
contexts:["selection"], // ContextType
}); })
chrome.contextMenus.onClicked.addListener(searchText);
I have created a chrome extension. I have used Selection and all context menus. I want to know how we can add popup error if any text is not selected from the page.
If any text selected then it should not show any error message.
Please find below code to display pop up:
chrome.contextMenus.create({
id: "context1",
title: "selected",
contexts: ["all"]
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (tab) {
if (info.menuItemId === "context1"){
var code = 'alert("text selected");';
chrome.tabs.executeScript(tab.id, { code: code });
}
}
});
I would like to show GCM service worker message only when there is no open chrome tab in my website or the tab is open and not selected (active).
Here is my code.
Error: chrome is not defined(…).
manifest.json
{
"name": "Webplus Express",
"short_name": "Webplus Express",
"icons": [{
"src": "https://raw.githubusercontent.com/deanhume/typography/gh-pages/icons/typography.png",
"sizes": "192x192",
"type": "image/png"
}],
"start_url": "/index.html",
"display": "standalone",
"gcm_sender_id": "298340340811",
"gcm_user_visible_only": true,
"background": {
"scripts": ["service-worker.js"]
},
"permissions": [
"gcm","tabs","activeTab"
]
}
service-worker.js
// The service worker running in background to receive the incoming
// push notifications and user clicks
self.addEventListener('push', function(event) {
// Since there is no payload data with the first version
// of push messages, we'll grab some data from
// an API and use it to populate a notification
var s_id=0;
self.registration.pushManager.getSubscription().then(function(subscription) {
if(subscription!=null){
s_id= subscription.endpoint.split("/").slice(-1);
var mURL="https://www.webplusexpress.com";
var ok=true;
chrome.tabs.getAllInWindow(undefined, function(tabs) {
for (var i = 0;i<tabs.length; i++) {
if (tabs[i].url && (tabs[i].url.indexOf(mURL)!=-1)) {
//chrome.tabs.update(tab.id, {selected: true});
if(tabs[i].highlighted){
ok=false;
}
return;
}
}
});
if (ok){
event.waitUntil(fetch('https://www.wpe.com/pushnotifyapi?s_id='+s_id).then(function(response) {
if (response.status !== 200) {
// Either show a message to the user explaining the error
// or enter a generic message and handle the
// onnotificationclick event to direct the user to a web page
console.log('Looks like there was a problem. Status Code: ' + response.status);
throw new Error();
}
// Examine the text in the response
return response.json().then(function(data) {
if (data.error || !data.notification) {
console.error('The API returned an error.', data.error);
throw new Error();
}
var title = data.notification.title;
var message = data.notification.message;
var icon = data.notification.icon;
console.log('icon received'+icon);
var notificationTag = data.notification.tag;
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
});
}).catch(function(err) {
console.error('Unable to retrieve data', err);
var title = 'An error occurred';
var message = 'We were unable to get the information for this push message';
var icon = 'https://www.webplusexpress.com/images/3web+carre.png';
var notificationTag = 'notification-error';
return self.registration.showNotification(title, {
body: message,
icon: icon,
tag: notificationTag
});
})
);
}
}
});
});
self.addEventListener('notificationclick', function(event) {
console.log('On notification click: ', event.notification.tag);
// Android doesn't close the notification when you click on it
// See: http://crbug.com/463146
event.notification.close();
// This looks to see if the current is already open and
// focuses if it is
event.waitUntil(
clients.matchAll({
type: "window"
})
.then(function(clientList) {
for (var i = 0; i < clientList.length; i++) {
var client = clientList[i];
if (client.url == '/' && 'focus' in client)
return client.focus();
}
if (clients.openWindow) {
return clients.openWindow('/');
}
})
);
});
Referring to Implementing Push Messaging for Chrome might help. It shows each step you need to complete in order to support push messaging in your web app wherein checking if service workers are supported is done before registering the service-worker.js file.
In addition to that, using Page Visibility API to detect when a webpage is visible or in focus might also help. When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page as done in SO post - Is there a way to detect if a browser window is not currently active?
Just started on a test chrome extension, basically I want to change the link on right click and send to clipboard, see:
background.js
var convert_buylink = function(event){
var parser = document.createElement('a');
parser.href = event.linkUrl;
parser.hostname = 'cart.local.co.nz';
parser.protocol = 'http';
var link = document.createElement('input');
//link.value = parse.href;
link.value = 'abc';
link.focus();
link.select();
document.execCommand('SelectAll');
document.execCommand("Copy")
}
chrome.contextMenus.create({title: "Copy Local BuyLink", contexts:["link"], onclick: convert_buylink});
manifest.json
{
"manifest_version": 2,
"name": "Local Buylink",
"description": "Changes buylink to local cart",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"permissions": [
"contextMenus",
"tabs",
"clipboardWrite"
]
}
I have read about some results from google about the copy not working, all of them saying it doesn't work on content page, but according to documentation:
A background page will be generated by the extension system that includes each of the files listed in the scripts property.
You're creating the input inside a document object of the background page, which fails because the user gesture (context menu click) required for the copy command to work was performed in another document object: the web page. Also the element you create doesn't belong to document yet, it's a detached node.
Solution: create a hidden input inside the web page.
background.js:
function convert_buylink(info, tab) {
var parser = new URL(info.linkUrl);
parser.hostname = 'cart.local.co.nz';
parser.protocol = 'http';
clipboardCopy(parser.href);
}
function clipboardCopy(text) {
chrome.tabs.executeScript({code: "\
var input = document.createElement('input');\
input.value = '" + text.replace(/'/g, "\\'") + "';\
input.style.cssText = 'opacity:0; position:fixed';\
document.body.appendChild(input);\
input.focus();\
input.select();\
document.execCommand('Copy');\
input.remove();\
"});
}
manifest.json:
"permissions": [
..............
"activeTab"
],
I want to create an addon for chrome. When clicked it should redirect the tab with a modified URL.
I am using this in a background page in a manifest:
<script type="text/javascript" language="JavaScript">
chrome.tabs.getCurrent(function (tab) {
var tabUrl = encodeURIComponent(tab.url);
var tabTitle = encodeURIComponent(tab.title);
chrome.tabs.update(tab.id, {url: "http://xyz.com/surf/browse.php?u=" + tabUrl});
});
</script>
And this is my manifest:
{
"name": "XYZ Surf",
"version": "1.0",
"description": "just info",
"background_page": "redirect.html",
"homepage_url":"http://www.xyz.com/surf",
"browser_action": {
"default_icon": "icon.png",
"default_title": "abc."
},
"permissions": ["tabs"]
}
All I want is that when the addon button is clicked then the user must be redirected to the modified URL. (Please explain completely and please do not refer to Google codes because it's going through my head.)
(I have been looking up for all answers and did find one but not getting it.)
Instead of doing that in the background page, you should listen on the browser action event [1]:
chrome.browserAction.onClicked.addListener(function(tab) {
var tabUrl = encodeURIComponent(tab.url);
var tabTitle = encodeURIComponent(tab.title);
chrome.tabs.update(tab.id, {url: "http://xyz.com/surf/browse.php?u=" + tabUrl});
});