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
Related
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.
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 :)
I need to modify classical Notes Web UI application. In the UI, it shows mail data. If the data has attachments, they are shown as links in the body field.
I'd like to detect when a user clicks the links, and enable "next" button so that the user can move to the next screen. Is it possbile?
Yes, and this has nothing to do with Domino specifically: put a div around your next button, that initially has the style display: none or give itself an ID and put the display: none directly in the properties box of the button on the html tab, fields ID and style.
Then write a little JavaScript that runs in the onLoad event, selects all a tags with attachments in it (they all have $FILE in the href) and add a function to the click- event to set the style of the button to display: block or something else.
You can prevent the default event (open the attachment) by using preventDefault():
var list = document.getElementsByTagName("a");
for (el of list) {
if (el.href.includes("$FILE")) {
el.addEventListener("click", function(event){
var yourNextDiv = document.getElementById("IDOfDivWithNextButton")
yourNextDiv.style.display = "block"
event.preventDefault()
});
}
}
I would like to be able to link to individual tabs in a PrimeFaces' "tabView". In other words, if my page "test.jsf" has a tabView with a tab entitled "Example", I want to be able to click a link to "Test.jsf#Example" and have the "Example" tab loaded automatically. How can I do this?
This can be done with a wee bit of JavaScript (using jQuery). I hope I have commented the following code well-enough that it can be understood.
<script type="text/javascript">
// What this does: when the page is loaded with a URL fragment (i.e, the #abc in example.com/index.html#abc),
// load the tab (by "clicking" on the link) that has the same text value as the fragment.
// Example: if you go to test.jsf#Example, the tab called "Example" will be clicked and loaded.
// This allows individual tabs to be linked to, and puts what tab you were on in the history.
navigateToTab = function () {
if (window.location.hash) {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
if (jQuery(el).text() === window.location.hash.replace('#', '')) {
jQuery(el).click();
return;
}
})
}
};
jQuery().ready(navigateToTab);
jQuery(window).bind('hashchange', navigateToTab);
// This makes it so that if you click a tab, it sets the URL fragment to be the tab's title. See above.
// E.g. if you click on the tab called "Example", then it sets the onclick attribute of the tab's "a" tag
// to be "#Example"
setupTabFragmentLinks = function () {
jQuery('ul.ui-tabs-nav li a').each(function (i, el) {
el.onclick = function() {window.location = '#' + jQuery(el).text()};
})
};
jQuery().ready(setupTabFragmentLinks);
</script>
All you have to do is insert that JavaScript in the page that has the tabs. Then you can get a link to a tab with the usual <a href='test.jsf#Example>Click here!</a>. An added bonus is that the tab you were on becomes part of the browser history; i.e., if you navigate away from the page that has the tabs, then press the "back" button, you are brought back to the tab you were on.
Note: if the tabView changes (e.g. you add or remove tabs), you will need to call setupTabFragmentLinks again.
Primefaces provides a javascript API for the <p:tabView/>(and many other components). You can call the select(index) method on the client side widgetVar name of your <p:tabView/>. For example, on a tab view
<p:tabView id="thePanel" widgetVar="tabPanel"/>
From a <p:CommandButton/>, you can call tabPanel.select(1) in the onclick attribute to select the first tab and so forth
<p:commandButton update=":thePanel" value="Do It " id="doIt" onclick="tabPanel.select(1)"/>
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.