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"});
});
Related
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'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
I have made an extension to my website.It navigates to my home page which is my login page.When the user log on to my site,the extension icon must appear green and when user log out, the icon should appear red. Please someone help me. I have been trying these two days, but I am not getting how to do it.
Here is my manifest.json file:
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Here is my background.js file:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://www.example.com"});
});
Here is my manifest.json:
{
"name": "Calpine Extension",
"version": "1.0",
"description": "Log on to calpinemate",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "calpine_not_logged_in.png"
},
"externally_connectable": {
"matches": ["http://calpinemate.com"]
}
}
One solution is to communicate the login status from your webpage to your extension (as explained here).
From your webpage you have to send messages to the extension to inform it about the user's login status.
Once the user successfully logs in, make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_IN'});
Once you detect that the user's session has ended (either expired or due to manually logging out), make sure you let the extension know:
chrome.runtime.sendMessage(
<your-extension-id>,
{status: 'LOGGED_OUT'});
From your extension listen for messages from the webpage and update accordingly, e.g. change the extension's icon. You'll need two icons (e.g. red.png for indicating logged-out user and green.png for indicating logged-in user) and the source code below:
background.js:
var url = '<your-webpage-url>';
// Listen for external messages (messages from web-pages).
chrome.runtime.onMessageExternal.addListener(function (msg, sender) {
if (sender.url === url) {
// OK, this page is allowed to communicate with me.
if (msg.status === 'LOGGED_IN') {
// Cool, the user is logged in.
chrome.browserAction.setIcon({path: 'green.png'});
} else if (msg.status === 'LOGGED_OUT') {
// How sad, the user is logges out.
chrome.browserAction.setIcon({path: 'red.png'});
}
}
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension",
"default_icon": "red.png"
},
"externally_connectable": {
"matches": ["<your-webpage-url>"]
}
}
U can keep 2 icon 1 in red and other in green and track session if login then show green icon else red
I need to create a simple chrome extension which when clicked have to navigate to that website.I have been searching long.But I couldn't find out.Please help me.
Here is my manifest.json file
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version":2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background_page": "background.html",
"permissions": [
"tabs"
]
}
this is my background.html
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
</script>
I am just trying to navigate into my site.But it is not working.Anyone please help me.I only have these two files in my directory and an image icon_128.png.Please help me
background_page is no longer supported in manifest_version 2. Instead use the new format. You can also remove the tabs permissions value since chrome.tabs.create doesn't require it.
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"manifest_version": 2,
"browser_action": {
"default_icon": "icon_128.png"
},
"background": {
"scripts": ["background.js"]
}
}
Move background.html to background.js, and remove the <script></script> tags.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({'url': "http://calpinemate.com"});
});
Maybe it is because you are missing theclosibg }) in your background page.
Besides, you don't need any permissions for what you want and it is recommended to use anon-persistent background page (a.k.a. event page).
E.g.:
background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.create({ "url": "http://calpinemate.com" });
});
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"description": "...",
"version": "0.0",
"background": {
"persistent": false,
"scripts": ["background.js"]
},
"browser_action": {
"default_title": "Test Extension"
"default_icon": "icon_128.png"
}
}
BTW, since you seem to be interested in changing the extension icon, you can take a look into chrome.browserAction.setIcon().
Below is an example that toggles the extension icon when the user clicks on the browser-action (you can adapt it according to your specific needs).
background.js:
var icons = ["red.png", "green.png"];
chrome.browserAction.onClicked.addListener(function(tab) {
var iconIdx = localStorage.getItem("iconIdx");
var newIdx = iconIdx ? (parseInt(iconIdx) + 1) % 2 : 1;
chrome.browserAction.setIcon({ path: icons[newIdx] });
localStorage.setItem("iconIdx", newIdx);
});
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);