I am developing an extension which shows some values in popup. The values are fetched in event page script periodically.
function load() {
var value = fetch();
// I would like to set this value to popup content.
}
chrome.alarms.onAlarm.addListener(function(alarm) {
if (alarm.name === "refresh") {
load();
}
});
chrome.alarms.create("refresh", {"periodInMinutes": 10});
I tried to get the popup window to change its content using chrome.extension.getViews({ViewType: "popup"}) in event page script but it returned an empty array.
I know I can do it using storage but it seems to me overkill.
So how can I use the value in popup?
Related
I'm trying to get selected text from codeeditor of DevTools. I can get selectionInfo in onSelectionChanged handler, but I dont know how to get text.
Also how to get selectionInfo (current selection) before onSelectionChanged fired?
chrome.devtools.panels.sources.createSidebarPane(
"title",
function(sidebar) {
function update(selectionInfo) {
//alert([selectionInfo.url, selectionInfo.startLine, selectionInfo.endLine, selectionInfo.startColumn, selectionInfo.endColumn]);
sidebar.setObject(JSON.parse(JSON.stringify(selectionInfo)));
// How to extract text using data from selectionInfo ???
}
update(/*selectionInfo should be there*/);
chrome.devtools.panels.sources.onSelectionChanged.addListener(update);
}
);
The callback of chrome.devtools.panels.elements.onSelectionChanged.addListener doesn't take any argument, cf the API documentation. That means that your selectionInfo will always be undefined.
To get the selected element, you can use the $0 variable. Your code would therefore look like this:
chrome.devtools.panels.elements.createSidebarPane(
"title",
function(sidebar) {
function update() {
sidebar.setExpression("$0");
}
update();
chrome.devtools.panels.elements.onSelectionChanged.addListener(update);
}
);
Note: I replaced chrome.devtools.panels.sources, which doesn't exist, by chrome.devtools.panels.elements.
I need to modify the contents of browser Action popup on tab change.
I am detecting change of tab in background.js script
var tabHandler={
processChange:function(tab){
var parser = document.createElement('a');//To extract the hostname, we create dom element
parser.href = tab.url;
var regex=/^(www\.)?([^\.]+)/
var matches=regex.exec(parser.hostname)//This gives us the hostname, we extract the website name
var website=matches[2];
function getWebsiteCoupons(site){
var coupons=cache.pull(site)
if(!coupons){
couponfetcher(site)
coupons=cache.pull(site);
}
return coupons;
}
var coupons=getWebsiteCoupons(website);
//NEED TO UPDATE THE POPUP HERE
chrome.browserAction.setBadgeText({text:coupons.coupons.length+coupons.deals.length+""})
},
onTabUpdate:function(tabId, changeInfo, dtab){
chrome.tabs.get(tabId,tabHandler.processChange);
},
tabChanged:function(activeInfo) {
console.log(this) ;
chrome.tabs.get(activeInfo.tabId,tabHandler.processChange);
},
init:function(){
chrome.tabs.onActivated.addListener(this.tabChanged);
}
}
tabHandler.init();
So I tried to detect a click action on the browser action, but this doesn't work when I have a popup already defined.
function BrowserActionClicked(tab){
alert("hello");
}
chrome.browserAction.onClicked.addListener(BrowserActionClicked)
If I remove the popup from manifest, the script works. But I don't know how to get instance of the manifest's contents
I also tried getting the views. The view however is an empty view, doesn't contain the contents of the popup.
var view=chrome.extension.getViews();
$(view.document).append("Hello");
this didn't work either. How do I update the contents of the browser popup from background script?
I am in a bit of a fix here, to be honest
I have a google chrome extension that is shown onclick in a popup. There is a context menu with some options that need the current / active tab url. The extension has a problem described below.
Old code:
function menuCallback(info, tab) {
var currentUrl = tab.url;
With old code: If you right-click inside the popup, the current url returned is "chrome-extension..." and so on.
New Code: (i tried to fix the issue with)
chrome.tabs.query({'active': true, 'windowId': chrome.windows.WINDOW_ID_CURRENT},
function(tabs){
currentUrl = tabs[0].url;
}
);
This works, as it returns the tab url even if the click comes from inside the popup. But if i have like 10 open tabs and switch between two, always the old one is returned. For example i'm at google.de first, url returned is google.de. Now i switch to an already open tab like "heise.de" and right-click, it's still google.de. Next attempt / try the url is correct.
You probably want to use the onUpdated listener.
chrome.tabs.onUpdated.addListener(doSomething);
Which gives you the tabId, changeInfo and tab metadata. You then can do as you please:
var doSomething = function (tabId, changeInfo, tab) {
var match = /http:\/\/www.google.com/.exec(tab.url);
if(match && changeInfo.status == 'complete') {
... do something ...
}
}
EDIT: After reading again your question, what you probably want is the onHighlighted event listener. It returns an object with an array of tabsIds and the window as soon as you select a tab.
chrome.tabs.onHighlighted.addListener(function(o) { tabId = o.tabIds[0]; })
You can then use get in order to obtain more information about that specific tab.
chrome.tabs.get(tabId, function(tab) { ... })
I'm leaving the onUpdated code in case anyone wants the tab information whenever a page changes.
Using the query parameters the simplest solution to finding the URL of the active tab in the currently focused window would be the following.
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
currentUrl = tabs[0].url;
});
chrome.tabs.getSelected(null, function(tab) {
var currentURL= tab.url;
alert(currentURL); // this should give you current url.
}
I am building an extension where I want to be able to add a signifier to the extension button when the extension in the code has been activated. I was hoping I could add text to the extension button (top right)
Here is a simple scenario. Let's say my extension monitors browsing and gets the tab url, in my extension I have a list of domains to watch for.
Watch for these domains
www.website1.com
www.website2.com
If a user visits a domain in the watched list I want to indicate this somehow, by adding some text somewhere - I was hoping in the top right of the browser where the extensions buttons are. I don't really want to use a notification window as I want something unobtrusive. The text that I want to display would just be a few letters but different for different urls.
Does anyone have any inspiration?
Thanks
You may change the extension icon like this:
chrome.browserAction.setIcon({path: icon});
There is also a 'badge' - small box over the extension icon that shows ie. number of unread messages in gmail extension. You can manipulate it like this:
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230]});
chrome.browserAction.setBadgeText({text:"?"});
It is also possible to generate icon dynamically on a canvas element and then display it like this:
chrome.browserAction.setIcon({imageData:canvasContext.getImageData(0, 0, canvas.width,canvas.height)});
Note that you must call this from your background script, since the content script will not have permission!
tl;dr: Call it from background.js
I googled around this comment because I was trying to call a chrome.browserActions function from my content script
It's only accessible to scripts that are running as part of a chrome extension, since content_scripts are the same as client scripts you'd have to access them through the chrome.* api's
and to fix some addition headaches I had the call for setBadge text needs to look like:
chrome.browserAction.setBadgeText({text: 'ASDF'});
You can put as many characters as you want, but only 4 or so will appear. I got hung up on what the object property needed to be.
You can also set a timeout to check changes on the system every x minutes, and then update de badge.
On my extension, I have an task counter called inside a notification function. Something like :
$.getJSON(
"http://mydomain/notifications?ajax=1&callback=?",
function(data){
var result = data.retorno;
if(result.length > 0){
var totalItens = result[0].total
} else {
var totalItens = 0;
}
chrome.browserAction.setIcon({path: '19.png'});
chrome.browserAction.setBadgeText({text:''+totalItens+''});
for(var i=0; i<result.length; i++){
var imagem = 'http://mydomain/myimage';
var titulo = 'mytitle';
var desciption = 'mydescription';
var urlNot = 'http://mydomain/mypageOnclick';
var not = new Notifier(urlNot);
not.Notify(
imagem, // The image.
titulo, // The title.
desciption // The body.
);
}
}
);
You have to change in 3 files.
manifest.json
Check this code added
"background": { "scripts": ["background.js"], "persistent": false }
script.js
Add the following code:
const msg = 'updateIcon'
chrome.runtime.sendMessage({ message: msg }, function(response) {
});
background.js
Add the following code:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
console.log(request);
// Callback for that request
chrome.browserAction.setIcon({path: "/assets/icon.png"});
});
I am developing an extension for all the browsers. How do I store tab specific values in the session? I solved this problem in Firefox with an NSISessionStore object. In Safari and Google Chrome, I used SessionStorage; this object stores values for a specific tab with a specific domain. I want a solution for how to store values for a specific tab.
If you're asking how to manage data throughout the life of a tab you can simply create an object for the tab when it's created and delete it when it is closed.
// Create data store
var tabDataStore = {};
// Create listeners
chrome.tabs.onCreated.addListener(function (tab) {
tabDataStore['tab_' + tab.id] = {
urls: []
};
});
chrome.tabs.onRemoved.addListener(function (tabId) {
delete tabDataStore['tab_' + tabId];
});
// Save something against that tab's data
function saveUrl(tab) {
tabDataStore['tab_' + tab.id].urls.push(tab.url);
}
// Load something from tab's data
function loadOriginalUrl(tab) {
tabDataStore['tab_' + tab.id].urls[0];
}
However, this is all an assumption and you may want something completely different. Also, it depends when and what exactly you want to store.
Further information on tabs can be found in the official documentation.
If you want to persist anything you can use localStorage.
a simple way to do it, though not ideal as it would look messy would be to store the values in the URL hash
say the URL of the tab was http://whatever.com/
you could store the value in the hash like so
http://whatever.com/#value1=12&value2=10&value3=15212
there will also be a problem if the website uses the hash object for anyhting such as "in page" anchors, or ajaxy type stuff
Safari Answer
In your global page save directly to the tab.. so for instance on message from injected script
// global page
safari.application.addEventListener("message", function(event){
switch(event.name){
case "saveData":
event.target.page.tabData = { data: myData }
break;
case "getData":
event.target.page.dispatchMessage("tabData", myData);
break;
}
}, false);
-
// injected page
// first save data
safari.self.tab.dispatchMessage("saveData", {firstname:"mike", age: 25} );
// setup listner to recevie data
safari.self.addEventListener("message", function(event){
switch(event.name){
case "tabData":
// get data for page
console.debug(event.message);
// { firstname: "mike", age: 25 }
break;
}
}, false);
// send message to trigger response
safari.self.tab.dispatchMessage("getData", {} );