I've been trying to develop a chrome extension that creates notifications after certain periods of time. I've been using both chrome.alarms and chrome.notifications to accomplish this, but I cannot get notifications to appear, even when creating them from the console. I also don't get any errors from runtime.lastError in the callback. I do know for certain that the alarm listener and callback are being executed.
manifest.json
{
"manifest_version": 2,
"name": "notifications",
"version": "0.0",
"browser_action": {
"default_popup": "popup.html"
},
"background": {
"scripts": ["notifications.js"],
"persistent": false
},
"permissions": [
"alarms",
"storage",
"notifications"
],
"web_accessible_resources": [
"mascot48.png"
]
}
notifications.js
function resetTimer(id, minutes) {
chrome.alarms.create(id,{delayInMinutes: minutes});
}
chrome.alarms.onAlarm.addListener((alarm) => {
console.log('alarm!');
chrome.notifications.create('reminder', {
type: 'basic',
iconUrl: 'mascot48.png',
title: 'Dont forget!',
message: 'You have things to do'
}, function(notificationId) {
console.log(chrome.runtime.lastError);
});
});
Is there anything clear that I'm getting wrong?
EDIT: For clarity, notifications.js is my events page, the popup page is the one that runs the code to start the alarms.
Related
Following Chrome Extension Manifest V3 rule I want to create an extension, that listens to particular network request and, for startes, just log them to the console of the currently opened tab (later I want to add custom script and styles to the page in the current tab).
For this I try to utilize chrome.scripting.executeScript.
When I implement the sample from https://github.com/GoogleChrome/chrome-extensions-samples/blob/main/examples/page-redder/manifest.json it works like expected for the chrome.action.onClicked listener.
As soon as I try to execute a script within the chrome.webRequest.onBeforeRequest listener, this error pops up:
Error in event handler: TypeError: Error in invocation of
scripting.executeScript(scripting.ScriptInjection injection, optional
function callback): Error at parameter 'injection': Error at property
'target': Missing required property 'tabId'.
at chrome.webRequest.onBeforeRequest.addListener.urls ()
Missing required property tabId? I assume it has to do with the lifecycle, but I cannot figure out what to do. This is my manifest:
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js",
"matches": [ "<all_urls>"]
},
"host_permissions": [
"<all_urls>"
],
"permissions": [
"activeTab",
"tabs",
"webRequest",
"webNavigation",
"management",
"scripting"
]
}
And this is my script, I just slightly modified the "redden"-example:
function reddenPage(url) {
console.log(url);
}
chrome.webRequest.onBeforeRequest.addListener((tab) => {
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: reddenPage,
args: [tab.url],
});
},
{urls: ["*://*.google.com/*"]},
[]);
I don't know exactly why, but the script from Github seems not work. This is how it works:
It's not only a couple of changed brackets, look at tab instead of (tab), but also tab.tabId instead of tab.id:
chrome.webRequest.onBeforeRequest.addListener(tab => {
chrome.scripting.executeScript(
{
target: { tabId: tab.tabId },
function: reddenPage,
args: [details.url],
},
() => { console.log('ZZZ') });
}, {
urls: ['<all_urls>']
});
I found this answer on how to grab the page source of current tab:
Getting the source HTML of the current page from chrome extension
However, this answer requires user to press the extension popup.
I would like to know how I can access the page source upon loading of page (without having to invoke the popup).
In my background.js I've tired this:
chrome.tabs.onUpdated.addListener(function (tabId , info) {
console.log(info)
chrome.tabs.executeScript(null, {
file: "getPagesSource.js"
}, function() {
if (chrome.runtime.lastError) {
message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
}
});
});
but this results in the following error:
There was an error injecting script : Cannot access contents of the
page. Extension manifest must request permission to access the
respective host.
My manifest.js:
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["declarativeContent",
"https://www.example.com/*",
"storage",
"activeTab"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": ["content.js"]
}
],
"options_page": "options.html",
"manifest_version": 2,
"page_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
}
I don't think the issue is really with permissions because I am able to get the page source from the popup.html (which is page_action script). But I am not able to get it via "background" or "content_scripts". Why is that and what is the proper way to accomplish this?
It is about the permissions.
Your example a bit insufficient, but as I can see you are using "activeTab" permission.
According to the activeTab docs, the extension will get access (e.g. sources) to current tab after any of these actions will be performed:
Executing a browser action
Executing a page action
Executing a context menu item
Executing a keyboard shortcut from the commands API
Accepting a suggestion from the omnibox API
That's why you can get sources after opening the popup.
In order to get access to tabs without those actions, you need to ask for the following permissions:
tabs
<all_urls>
Be noted, it allows you to run content-script on every tab, not only the active one.
Here is the simplest example:
manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["tabs", "<all_urls>"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
background.js
chrome.tabs.onUpdated.addListener(function (tabId, info) {
if(info.status === 'complete') {
chrome.tabs.executeScript({
code: "document.documentElement.innerHTML" // or 'file: "getPagesSource.js"'
}, function(result) {
if (chrome.runtime.lastError) {
console.error(chrome.runtime.lastError.message);
} else {
console.log(result)
}
});
}
});
So I'm in the midst of creating my first Chrome Extension (Trying)
I feel like I'm close... But I genuinely don't know what to google to get the answers I need. So I'm sorry if this is a silly question.
Essentially what I'm trying to do is on click of extension - Append HTML & CSS to body and run a jQuery function. But from the looks of it, I need to call in jQuery in the manifest? Which I think I've done and it's still not working.
My Code:
manifest.json
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Hover Title",
"default_icon": "icon.png"
},
"content_scripts": [ {
"js": [ "jquery-1.7.2.min.js", "background.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"manifest_version": 2
}
background.js
chrome.browserAction.onClicked.addListener(function(tab) {
(function ($) {
$('body').append("Hello");
alert("Hello");
console.log("Hello");
}(jQuery));
});
Any insight into where I'm going wrong would be massively helpful!
Thank you!!
Chrome extension architecture is simple but it doesn't mean one can write code without studying it.
There are two methods of injecting content scripts:
Unconditionally on all specified urls, in which case "content_script" key is used in the manifest and the content scripts communicate with the background page via runtime.sendMessage.
Only when some event occurs like e.g. the user clicks our toolbar icon, in which case we only need the permission to access the active tab.
So in the given case we'll attach the icon click handler and inject the code afterwards:
manifest.json:
{
"name": "Title",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_title": "Icon Title",
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"]
},
"permissions": ["activeTab"],
"manifest_version": 2
}
background.js (this is an event page because we didn't use "persistent": true in the manifest, so be advised that the [global] variables will be lost after a few seconds of inactivity; instead you should use chrome.storage API or HTML5 localStorage/sessionStorage/and so on):
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({file: "jquery-1.7.2.min.js"}, function(result) {
chrome.tabs.executeScript({file: "content.js"}, function(result) {
});
});
});
content.js (the code runs in a sandbox so there's no need to hide global variables using IIFE)
$('body').append("Hello");
alert("Hello");
console.log("Hello");
I'm building a Google Chrome extension and want to autoload my extension on every new page, so that I can get the current url and check in a Database some data for it. I want to do it a bit like the adblockers and show how many ads where blocked with the badgetext. Anyway I don't get it workig to autoload on every new page I open. It loades once and then stays there. It only reloads when I click on the Icon to get the popup.html.
Here my Manifest:
{
"manifest_version": 2,
"name": "Some name",
"description": "Some desc.",
"version": "1.0",
"permissions": [
"tabs",
"background"
],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"background": {
"scripts": ["background.js"],
"persistent": false
}
}
My background.js looks like this
chrome.windows.onFocusChanged.addListener(function(){
chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
// do some stuff with the new url
});
});
Someone have a hint?
I would use chrome.tabs API instead of chrome.windows API.
http://developer.chrome.com/extensions/tabs.html
onCreated event and onUpdated event should work.
chrome.tabs.onCreated.addListener(function callback)
chrome.tabs.onUpdated.addListener(function callback)
I want to make a browserAction extension, with an icon and a listener on it.
I have a manifest file, and a background script, the script is the following:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,{code:'some code here'});
});
The code works on the page, i tried it on a different way (popup and a button what fires the action). But if i try it with a browserAction onclick method, nothing happens:(
The manifest:
{
"name": "somename",
"version": "1.0",
"manifest_version": 2,
"description": "sometext",
"browser_action": {
"default_icon": "images/icon.png",
"default_title": "MyStyle"
},
"background": {
"scripts": ["js/code.js"]
},
"permissions": [
"tabs",
"https://www.examplesite.ex/*",
"http://www.examplesite.ex/*",
"http://*.ex/*"
]
}
Can anybody help me?:/
Since the original question has been solved in the comments, I'll answer the follow-up question:
"Next step to make it automatic, without any click".
This can be done easily using Content scripts. When you don't have to access global variables, the following code is sufficient. Otherwise, inject the script using the techniques as mentioned here:
js/code.js
document.title = "newtitle";
manifest.json
{
"name": "somename",
"version": "1.0",
"manifest_version": 2,
"description": "sometext",
"content_scripts": {
"js": ["js/code.js"],
"matches": [ "*://www.examplesite.ex/*", "http://*.ex/*" ]
},
"permissions": [ "*://www.examplesite.ex/*", "http://*.ex/*" ]
}