in my chrome extension I want the popup whenever it is being closed to send a message to the background script. This message should contain the current content of a text area on the popup as well as the url of the tab the popup was opened on.
window.onblur = function(){
let text = document.getElementById("txtarea").value;
chrome.runtime.sendMessage({msg: text});
}
With just the content of the text area everything works fine. However when i want to add the url of the current tab like this:
window.onblur = function(){
let text = document.getElementById("txtarea").value;
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
let currentTab = tabs[0].url;
chrome.runtime.sendMessage({msg: text; url: currentTab});
});
}
nothing is received by the background script before the popup is closed. I'm guessing this is just because it takes too long right? Is there a way I could make this work? It is important that I really get the url of the tab the popup was opened on. When I for example move the query to the background script and close the popup by switching tabs the url of the new tab is being printed out instead of the one I want.
Thank you :)
Related
I am fighting with CKEditor in order that after CKEditor is loaded with a content and without selecting any style from toolbar, the changes (new text) made from an user, are automatically set in bold (no toolbar needed for the user).
I tried executing a command on the "click" event setting the bold style but it does not work very well
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
myEditor.commands.bold.exec();
});
});
so I changed inserting element with bold style on click event
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
var parent = myEditor.getSelection().getStartElement()
//simplified code without check if span already exist
myEditor.insertHtml('<span class="boldStyle">');
myEditor.insertHtml('</span>');
});
});
This works a bit better but I wonder if this approach is a good idea or how I could do better
Thanks
Is there anyway to use chrome.browserAction.onClicked.addListener in background.js while using default pop.html?
It's like I'm trying to make a multipurpose extension where on clicking extension icon there comes up a popup with button nd then one of the button click should be responsible for fetching tab id.
Is it possible?
Popup.js:-
function sendId(){
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
let tabDefination={
tabDetail:tabs,
txt:"tabId",
purpose:"ScreenShot"
}
console.log(tabs)
//Use runtime for sending mssg to bg scripts and tab for content.js
chrome.runtime.sendMessage(tabDefination);
});
}
By this way we can pass the tab id freom popup.js to background script.
Here is my popup.html code:
Google
But when I click the Google link nothing happens. How do I make the link take me to google.com in the current tab?
You need to use chrome.tabs.query to find the selected tab and update it.
So I would do something like:
popup.html:
<div id='clickme'>Google</div>
<script src = 'popupjs.js'></script>
popupjs.js:
document.getElementById('clickme').onclick = function() {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
var tab = tabs[0];
chrome.tabs.update(tab.id, {url: 'http://www.google.com'});
});
};
This uses chrome.tabs.query and chrome.tabs.update to find the current tab id and update it with the url http://www.google.com.
Note: You will need the tabs permission in your manifest file!
You could then use some CSS to make the div look like a real link, or just change the cursor when hovering over it.
I am writing a Chrome extension, in which there is a dialog-like window to let users input the username and password, which are then sent back to background page to make a request for the token in OAuth 2.0.
To send the username and password from dialog window back to background page, I used the following codes (inside the dialog window .html file):
<script>
function usrpwd(){
var up = {};
up.usr = document.login_form.usr.value;
up.pwd = document.login_form.pwd.value;
chrome.tabs.sendRequest(window.dialogArguments,up);
window.close();
}
</script>
where the window.dialogArguments is supposed to be the tab ID of the extension's background page.
And the dialog window is opened in background page by
chrome.contextMenus.create({
"title" : "show Modal Dialog",
"contexts" : ["all", "page"],
"onclick": handle_click
});
function handle_click(){
chrome.tabs.getSelected(null, function(tab){
console.log('tab ', tab);
window.showModalDialog("login_popup.html", tab.id, "dialogHeight:300px; dialogLeft:200px;");
});
}
The tab.id is supposed to be the ID of the background page, and it will be passed to dialog window and assigned to window.dialogArguments.
Also in the background page, the username and password are received by,
chrome.extension.onRequest.addListener(
function(request){
console.log("Username: ", request.usr);
console.log("Username: ", request.pwd);
}
);
However, console.log('tab ', tab) inside the handle_click function always shows that the getSelected tab is the tab where the context menu got clicked, not the background page. So I am wondering how to get the tab ID of the background page in this case. Or is there any other better ways to communicate between dialog window and background page?
Thanks a lot!
Background pages do not have a tabId, since they are not tabs.
To send a message to the background page, use chrome.extension.sendRequest (extension instead of tabs).
PS. Full demo
I need a page action popup icon to appear when a tab has a specific URL in the address bar.
I have this in my background page
chrome.tabs.query({url:"MYURL.COM"} , function(tab)
{
for(i=0;i<tab.length;i++)
{
console.log(tab[i].id);
chrome.pageAction.show(tab[i].id);
}
});
The popup shows whenever I reload the extension but as soon as user refreshes, it goes away and doesn't come back.
The reason is that the background.js page is only loaded once, so you need to add a listener to every time the page tab is updated to check whether the page action should be shown, something like this:
chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tabId);
}
});
There is no reason to iterate over each tab as you have done.
As Adam has already said, the tabs.onUpdated event is the way to do it.
Anyway, it [seems like I'm not the only one who experienced that the tabs.onUpdated event doesn't always fire when it should - even when waiting for complete status.
So if you're having the same issue, you might want to try my modified version that has proven reliable for me 100%.
chrome.tabs.onUpdated.addListener(function(tabId, change) {
if (change.status == "complete") {
chrome.tabs.query({active: true}, function(tabs) {
var tab = tabs[0];
// Now do stuff with tab .. Eg:
if (tab.url.indexOf("MYURL.COM") > -1) {
chrome.pageAction.show(tab.id); }
else {
chrome.pageAction.hide(tab.id); }
});
}
});
Use chrome.tabs.onUpdated to listen to new tabs and tab reloads of the domain you are interested in.