Chrome extensions - unload event page immediately - google-chrome-extension

I'm new to Chrome extension developing. I've written an extension that shows a notification every time a new tab is created. It works, however if I open a tab and immediately open another tab, the notification will be shown only for the first tab.
On the Chrome extension documentation I read this:
Once the event page has been idle a short time (a few seconds), the chrome.runtime.onSuspend event is dispatched.
Apparently it explains why there was no notification for the second tab. Is it possible to unload the event page immediately (i.e. once the notification is shown), without waiting a few seconds?
This is my code:
manifest.json
{
"name": "test",
"version": "1.0",
"description": "notification test",
"manifest_version": 2,
"permissions": [ "tabs", "notifications" ],
"background": { "scripts": ["background.js"], "persistent": false }
}
background.js
var notification = webkitNotifications.createNotification(
'48.png',
'hello',
'this is a test'
);
chrome.tabs.onCreated.addListener(function(tab) {
notification.show();
});

Code a)
manifest.json
{
"name": "test",
"version": "1.0",
"description": "notification test",
"manifest_version": 2,
"permissions": [ "tabs", "notifications" ],
"background": { "scripts": ["background.js"], "persistent": false },
"web_accessible_resources": [
"48.png"
]
}
background.js
function notify(tab){
console.log(tab);
var notification = webkitNotifications.createNotification(
'48.png',
'hello',
'this is a test'
);
notification.show();
}
chrome.tabs.onCreated.addListener(notify);
In this solution you will see two notifications if new tab is created first time/immediately after another tab because of https://code.google.com/p/chromium/issues/detail?id=162543. But here you are struck to event pages instead of background pages.
Code b)
By Making event page to background page you can get desired functionality running; However this do not use event page if you are particular about it.
manifest.json
{
"name": "test",
"version": "1.0",
"description": "notification test",
"manifest_version": 2,
"permissions": [ "tabs", "notifications" ],
"background": { "scripts": ["background.js"], "persistent": true },
"web_accessible_resources": [
"48.png"
]
}
background.js
function notify(tab){
console.log(tab);
var notification = webkitNotifications.createNotification(
'48.png',
'hello',
'this is a test'
);
notification.show();
}
chrome.tabs.onCreated.addListener(notify);

Related

Chrome and closing a specific tab URL

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"

background.js only works when opened DevTools in chrome extensions

background.js
(function () {
chrome.windows.onRemoved.removeListener();
chrome.windows.onRemoved.addListener(function (windowid) {
alert(0);
});
})()
manifest.json
{
"name": "Merge Windows1",
"version": "1.0.2",
"description": "Merges all of the browser's windows into the current window",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"permissions": [
"input", "http://*/*", "tabs"
],
"manifest_version": 2
}
When I opened the DevTools by click "background page" in Chrome Extensions, the code in background.js works and alert when close browser. Otherwise no alert box.

Chrome extension: How to insert or paste text into a tweet

driving me nuts.. backstory.. I enter a LOT of contests on twitter, and find myself repeating common tasks of copy/pasting profile links and tagging friends. :)
So i figured, and extension might make this easier!
manifest:
{
"name": "Context Menus Sample (with Event Page)",
"description": "Shows some of the features of the Context Menus API using an event page",
"version": "0.7",
"permissions": ["contextMenus", "tabs", "clipboardWrite", "clipboardRead" ],
"background": {
"persistent": false,
"scripts": ["sample.js"]
},
"manifest_version": 2
}
sample.js
function onClickHandler(info, tab) {
if (info.menuItemId == 'h_profile') {
// here is where it needs to put the text
}
};
chrome.contextMenus.onClicked.addListener(onClickHandler);
// Set up context menu tree at install time.
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({"title": "HELLCASE", "contexts":["editable"], "id": "hellcase"});
chrome.contextMenus.create({"title": "PROFILE", "contexts":["editable"], "parentId": "hellcase", "id": "h_profile"});
});
i can get it to trigger, like an alert on clicking.. but no matter what i try i cant get it to insert text into the focused textarea (div) on twitter
i think it could be because its just a div and not an actual element like a textarea...
seems like it should be easy, yet it wont work! lol
any ideas?
UPDATE: it seems I needed a few more things - i dont know if they were all needed but it now works!
{
"name": "TwitterHelper",
"description": "Helps to make entering contests easier!",
"version": "0.5",
"permissions": [
"contextMenus","tabs","activeTab"],
"background": {
"persistent": false,
"scripts": ["myscript.js"]
},
"browser_action": {
"default_icon": "icon.png"
},
"manifest_version": 2
}
myscript.js
function onClickHandler(info, tab) {
if (info.menuItemId == 'h_profile') {
SendText('profile');
}
};
function SendText(strText){
chrome.tabs.executeScript({
code: 'var temp = document.activeElement.innerHTML; document.activeElement.innerHTML=temp + "' + strText + '";'
});
}
chrome.contextMenus.onClicked.addListener(onClickHandler);
// Set up context menu tree at install time.
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({"title": "HELLCASE", "contexts":["editable"], "id": "hellcase"});
chrome.contextMenus.create({"title": "PROFILE", "contexts":["editable"], "parentId": "hellcase", "id": "h_profile"});
});

How to open a mailto link with a click on a Chrome extension icon?

With the following code I try to open a mailto: link in a tab if the user clicks on the Chrome extension icon. However, upon click on the icon, no action is being performed.
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}
popup.js
chrome.browserAction.onClicked.addListener(function tab) {
var emailUrl = "mailto:address#domain.com";
chrome.tabs.create({ url: emailUrl });
};
There are multible issues with your code:
You never require you popup.js.
You JavaScript code is invalid.
I recommend using an eventPage to trigger the E-Mail link:
manifest.json
{
"manifest_version": 2,
"name": "Extension",
"description": "Description",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png"
},
"background": {
"scripts": ["eventPage.js"],
"persistent": false
}
}
eventPage.js
chrome.browserAction.onClicked.addListener(tab => {
chrome.tabs.create({ url: 'mailto:address#domain.com' })
})

Simple Chrome Extension : Open an url in a new tab

I'm looking to create a "new tab" extension like Panda or the Product Hunt Extension: the user can open a new tab with my website inside, with an hidden url.
I've generated my package with the awesome Extensionizr and here is my manifest.json :
manifest.json
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
]
}
My background.js come from this answer, the problem seems really similar.
background.js
chrome.browserAction.onClicked.addListener(function(activeTab) {
var newURL = "http://myapp.com";
chrome.tabs.create({ url: newURL });
});
I'm still getting this error when I try to run the background page from the extension settings : Uncaught TypeError: Cannot read property 'onClicked' of undefined
And when I open a new tab, Google Chrome took the advantage and display me a google search page.
I do it wrong, and I don't know how/where/why
You're completely off-track. You don't want to open a (simple) new tab, you want to replace the "New Tab page".
Daniel's answer correctly explains why your code does not work, but it won't do what you wanted.
To replace Chrome's New Tab page, you need to use Override Pages:
"chrome_url_overrides" : {
"newtab": "myPage.html"
},
Inside that myPage.html, you can add an <iframe> for your remote content.
That's because you need to register the browser action in the manifest. Here is your manifest with the browser action added at the bottom.
{
"name": "My app",
"version": "0.0.1",
"manifest_version": 2,
"description": "My awesome app",
"homepage_url": "http://myapp.com",
"icons": {
"16": "icons/icon16.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
"scripts": [
"src/bg/background.js"
],
"persistent": false
},
"permissions": [
"tabs",
"http://myapp.com/*"
],
"browser_action": {}
}
Here are the browser action docs: https://developer.chrome.com/extensions/browserAction

Resources