Get current page URL from a firefox sidebar extension - firefox

I'm writing a sidebar extension for Firefox and need a way to get the URL of the current page so I can check it against a database and display the results. How can I do this?

I stumbled over this post while looking for an answer to the same question.
Actually I think it's as easy as
alert(window.content.location.href)
See also https://developer.mozilla.org/en/DOM/window.content

window.top.getBrowser().selectedBrowser.contentWindow.location.href;
might work, otherwise I think you need to use:
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
mainWindow.getBrowser().selectedBrowser.contentWindow.location.href;

This seems to work fine for me
function getCurrentURL(){
var currentWindow = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("navigator:browser");
var currBrowser = currentWindow.getBrowser();
var currURL = currBrowser.currentURI.spec;
return currURL;
}

https://developer.mozilla.org/En/Working_with_windows_in_chrome_code
If you need to access the main browser from the code running in a sidebar, you'll something like what Wimmel posted, except the last line could be simplified to
mainWindow.content.location.href
(alternatively you could use 's API returning an nsIURI).
Depending on your task, it might make sense to run the code in the browser window instead (e.g. in a page load handler), then it can access the current page via the content shortcut and the sidebar via document.getElementById("sidebar").contentDocument or .contentWindow.

If you need only domain and subdomain;
Usage;
PageDomain.getDomain(); // stackoverflow.com
PageDomain.getSubDomain(); // abc.stackoverflow.com
Code;
PageDomain = {
getDomain : function() {
var docum = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("navigator:browser");
var domain = PageDomain.extractDomain(new String(docum.location));
return domain;
},
getSubDomain : function() {
var docum = Components.classes["#mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator).getMostRecentWindow("navigator:browser");
var subDomain = PageDomain.extractSubDomain(new String(docum.location));
return subDomain;
},
extractDomain: function(host) {
var s;
// Credits to Chris Zarate
host=host.replace('http:\/\/','');
host=host.replace('https:\/\/','');
re=new RegExp("([^/]+)");
host=host.match(re)[1];
host=host.split('.');
if(host[2]!=null) {
s=host[host.length-2]+'.'+host[host.length-1];
domains='ab.ca|ac.ac|ac.at|ac.be|ac.cn|ac.il|ac.in|ac.jp|ac.kr|ac.nz|ac.th|ac.uk|ac.za|adm.br|adv.br|agro.pl|ah.cn|aid.pl|alt.za|am.br|arq.br|art.br|arts.ro|asn.au|asso.fr|asso.mc|atm.pl|auto.pl|bbs.tr|bc.ca|bio.br|biz.pl|bj.cn|br.com|cn.com|cng.br|cnt.br|co.ac|co.at|co.il|co.in|co.jp|co.kr|co.nz|co.th|co.uk|co.za|com.au|com.br|com.cn|com.ec|com.fr|com.hk|com.mm|com.mx|com.pl|com.ro|com.ru|com.sg|com.tr|com.tw|cq.cn|cri.nz|de.com|ecn.br|edu.au|edu.cn|edu.hk|edu.mm|edu.mx|edu.pl|edu.tr|edu.za|eng.br|ernet.in|esp.br|etc.br|eti.br|eu.com|eu.lv|fin.ec|firm.ro|fm.br|fot.br|fst.br|g12.br|gb.com|gb.net|gd.cn|gen.nz|gmina.pl|go.jp|go.kr|go.th|gob.mx|gov.br|gov.cn|gov.ec|gov.il|gov.in|gov.mm|gov.mx|gov.sg|gov.tr|gov.za|govt.nz|gs.cn|gsm.pl|gv.ac|gv.at|gx.cn|gz.cn|hb.cn|he.cn|hi.cn|hk.cn|hl.cn|hn.cn|hu.com|idv.tw|ind.br|inf.br|info.pl|info.ro|iwi.nz|jl.cn|jor.br|jpn.com|js.cn|k12.il|k12.tr|lel.br|ln.cn|ltd.uk|mail.pl|maori.nz|mb.ca|me.uk|med.br|med.ec|media.pl|mi.th|miasta.pl|mil.br|mil.ec|mil.nz|mil.pl|mil.tr|mil.za|mo.cn|muni.il|nb.ca|ne.jp|ne.kr|net.au|net.br|net.cn|net.ec|net.hk|net.il|net.in|net.mm|net.mx|net.nz|net.pl|net.ru|net.sg|net.th|net.tr|net.tw|net.za|nf.ca|ngo.za|nm.cn|nm.kr|no.com|nom.br|nom.pl|nom.ro|nom.za|ns.ca|nt.ca|nt.ro|ntr.br|nx.cn|odo.br|on.ca|or.ac|or.at|or.jp|or.kr|or.th|org.au|org.br|org.cn|org.ec|org.hk|org.il|org.mm|org.mx|org.nz|org.pl|org.ro|org.ru|org.sg|org.tr|org.tw|org.uk|org.za|pc.pl|pe.ca|plc.uk|ppg.br|presse.fr|priv.pl|pro.br|psc.br|psi.br|qc.ca|qc.com|qh.cn|re.kr|realestate.pl|rec.br|rec.ro|rel.pl|res.in|ru.com|sa.com|sc.cn|school.nz|school.za|se.com|se.net|sh.cn|shop.pl|sk.ca|sklep.pl|slg.br|sn.cn|sos.pl|store.ro|targi.pl|tj.cn|tm.fr|tm.mc|tm.pl|tm.ro|tm.za|tmp.br|tourism.pl|travel.pl|tur.br|turystyka.pl|tv.br|tw.cn|uk.co|uk.com|uk.net|us.com|uy.com|vet.br|web.za|web.com|www.ro|xj.cn|xz.cn|yk.ca|yn.cn|za.com';
domains=domains.split('|');
for(var i=0;i<domains.length;i++) {
if(s==domains[i]) {
s=host[host.length-3]+'.'+s;
break;
}
}
} else {
s=host.join('.');
}
// Thanks Chris
return s;
},
extractSubDomain:function(host){
host=host.replace('http:\/\/','');
host=host.replace('https:\/\/','');
re=new RegExp("([^/]+)");
host=host.match(re)[1];
return host;
}
}

From a Firefox extension popup ;
You'll need
"permissions": [
"activeTab"
]
in your manifest or possibly tabs instead of activeTab
async function getCurrentTabUrl(){
let tabs = await browser.tabs.query({active: true, currentWindow: true}) ;
return tabs[0].url ;
}
let hostUrl = await getCurrentTab();
alert(hostUrl);

This works from a firefox "popup" extension.
browser.tabs.query({active: true, windowId: browser.windows.WINDOW_ID_CURRENT})
.then(tabs => browser.tabs.get(tabs[0].id))
.then(tab => {
console.log(tab);
});

Hallo,
I have tried to implement this in JavaScript, because I need that in my project too, but all three possible solutions didn't work. I have also implemented a small site to test it, but this also didn't work.
Here is the source code of the small site:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function Fall1 () {
alert(window.top.getBrowser().selectedBrowser.contentWindow.location.href);
}
function Fall2() {
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow);
alert(mainWindow.getBrowser().selectedBrowser.contentWindow.location.href);
}
function Fall3() {
alert(document.getElementById("sidebar").contentWindow.location.href);
}
</script>
</head>
<body>
<form name="Probe" action="">
<input type="button" value="Fall1"
onclick="Fall1()">
<input type="button" value="Fall2"
onclick="Fall2()">
<input type="button" value="Fall3"
onclick="Fall13()">
</form>
</body>
</html>

Related

Google App Scripts Function to Open URL [duplicate]

Is there a way to write a google apps script so when ran, a second browser window opens to www.google.com (or another site of my choice)?
I am trying to come up with a work-around to my previous question here:
Can I add a hyperlink inside a message box of a Google Apps spreadsheet
This function opens a URL without requiring additional user interaction.
/**
* Open a URL in a new tab.
*/
function openUrl( url ){
var html = HtmlService.createHtmlOutput('<html><script>'
+'window.close = function(){window.setTimeout(function(){google.script.host.close()},9)};'
+'var a = document.createElement("a"); a.href="'+url+'"; a.target="_blank";'
+'if(document.createEvent){'
+' var event=document.createEvent("MouseEvents");'
+' if(navigator.userAgent.toLowerCase().indexOf("firefox")>-1){window.document.body.append(a)}'
+' event.initEvent("click",true,true); a.dispatchEvent(event);'
+'}else{ a.click() }'
+'close();'
+'</script>'
// Offer URL as clickable link in case above code fails.
+'<body style="word-break:break-word;font-family:sans-serif;">Failed to open automatically. Click here to proceed.</body>'
+'<script>google.script.host.setHeight(40);google.script.host.setWidth(410)</script>'
+'</html>')
.setWidth( 90 ).setHeight( 1 );
SpreadsheetApp.getUi().showModalDialog( html, "Opening ..." );
}
This method works by creating a temporary dialog box, so it will not work in contexts where the UI service is not accessible, such as the script editor or a custom G Sheets formula.
You can build a small UI that does the job like this :
function test(){
showURL("http://www.google.com")
}
//
function showURL(href){
var app = UiApp.createApplication().setHeight(50).setWidth(200);
app.setTitle("Show URL");
var link = app.createAnchor('open ', href).setId("link");
app.add(link);
var doc = SpreadsheetApp.getActive();
doc.show(app);
}
If you want to 'show' the URL, just change this line like this :
var link = app.createAnchor(href, href).setId("link");
EDIT : link to a demo spreadsheet in read only because too many people keep writing unwanted things on it (just make a copy to use instead).
EDIT : UiApp was deprecated by Google on 11th Dec 2014, this method could break at any time and needs updating to use HTML service instead!
EDIT :
below is an implementation using html service.
function testNew(){
showAnchor('Stackoverflow','http://stackoverflow.com/questions/tagged/google-apps-script');
}
function showAnchor(name,url) {
var html = '<html><body>'+name+'</body></html>';
var ui = HtmlService.createHtmlOutput(html)
SpreadsheetApp.getUi().showModelessDialog(ui,"demo");
}
There really isn't a need to create a custom click event as suggested in the bountied answer or to show the url as suggested in the accepted answer.
window.open(url)1 does open web pages automatically without user interaction, provided pop- up blockers are disabled(as is the case with Stephen's answer)
openUrl.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<script>
const url1 ='https://stackoverflow.com/a/54675103';
const winRef = window.open(url1);
winRef ? google.script.host.close() : window.alert('Allow popup to redirect you to '+url1) ;
window.onload=function(){document.getElementById('url').href = url1;}
</script>
</head>
<body>
Kindly allow pop ups</br>
Or <a id='url'>Click here </a>to continue!!!
</body>
</html>
code.gs:
function modalUrl(){
SpreadsheetApp.getUi()
.showModalDialog(
HtmlService.createHtmlOutputFromFile('openUrl').setHeight(50),
'Opening StackOverflow'
)
}
Google Apps Script will not open automatically web pages, but it could be used to display a message with links, buttons that the user could click on them to open the desired web pages or even to use the Window object and methods like addEventListener() to open URLs.
It's worth to note that UiApp is now deprecated. From Class UiApp - Google Apps Script - Google Developers
Deprecated. The UI service was deprecated on December 11, 2014. To
create user interfaces, use the HTML service instead.
The example in the HTML Service linked page is pretty simple,
Code.gs
// Use this code for Google Docs, Forms, or new Sheets.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.createMenu('Dialog')
.addItem('Open', 'openDialog')
.addToUi();
}
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Dialog title');
}
A customized version of index.html to show two hyperlinks
<a href='http://stackoverflow.com' target='_blank'>Stack Overflow</a>
<br/>
<a href='http://meta.stackoverflow.com/' target='_blank'>Meta Stack Overflow</a>
Building of off an earlier example, I think there is a cleaner way of doing this. Create an index.html file in your project and using Stephen's code from above, just convert it into an HTML doc.
<!DOCTYPE html>
<html>
<base target="_top">
<script>
function onSuccess(url) {
var a = document.createElement("a");
a.href = url;
a.target = "_blank";
window.close = function () {
window.setTimeout(function() {
google.script.host.close();
}, 9);
};
if (document.createEvent) {
var event = document.createEvent("MouseEvents");
if (navigator.userAgent.toLowerCase().indexOf("firefox") > -1) {
window.document.body.append(a);
}
event.initEvent("click", true, true);
a.dispatchEvent(event);
} else {
a.click();
}
close();
}
function onFailure(url) {
var div = document.getElementById('failureContent');
var link = 'Process';
div.innerHtml = "Failure to open automatically: " + link;
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).getUrl();
</script>
<body>
<div id="failureContent"></div>
</body>
<script>
google.script.host.setHeight(40);
google.script.host.setWidth(410);
</script>
</html>
Then, in your Code.gs script, you can have something like the following,
function getUrl() {
return 'http://whatever.com';
}
function openUrl() {
var html = HtmlService.createHtmlOutputFromFile("index");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
I liked #Stephen M. Harris's answer, and it worked for me until recently. I'm not sure why it stopped working.
What works for me now on 2021-09-01:
function openUrl( url ){
Logger.log('openUrl. url: ' + url);
const html = `<html>
<a id='url' href="${url}">Click here</a>
<script>
var winRef = window.open("${url}");
winRef ? google.script.host.close() : window.alert('Configure browser to allow popup to redirect you to ${url}') ;
</script>
</html>`;
Logger.log('openUrl. html: ' + html);
var htmlOutput = HtmlService.createHtmlOutput(html).setWidth( 250 ).setHeight( 300 );
Logger.log('openUrl. htmlOutput: ' + htmlOutput);
SpreadsheetApp.getUi().showModalDialog( htmlOutput, `openUrl function in generic.gs is now opening a URL...` ); // https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes
}
https://developers.google.com/apps-script/reference/base/ui#showModalDialog(Object,String) Requires authorization with this scope: https://www.googleapis.com/auth/script.container.ui See https://developers.google.com/apps-script/concepts/scopes#setting_explicit_scopes

Firefox Addon SDK(jetpack): Passing page-script form data to index.js?

I want to pass the page script form data to index.js in my extension. What is the way to do it? I am trying to send it through content-script.js. To do this I am including my content-script.js file into the page-script. The content-script.js contains these lines of code-
function getInput(){
var url = document.getElementById('addr').value;
self.port.emit("addr",url);
}
Now from the page-script submit button I am calling getInput() function. But self.port.emit does not work here.
I have found out the solution. This can be done by creating DOM events.
In the page-script I have created a custom DOM event like this-
add.html->
<html>
<head>
<script>
function sendMessage() {
var url = document.getElementById('addr').value;
//console.log(url);
var event = document.createEvent('CustomEvent');
event.initCustomEvent("msg", true, true, url);
document.documentElement.dispatchEvent(event);
}
</script>
</head>
<body>
<form>
<input type="text" id="addr" name="addr">
<button onclick="sendMessage()">Add</button>
</form>
Next the helper.js listens for the new event and retrieves the message.
helper.js-
window.addEventListener("msg", function(event) {
var url = JSON.stringify(event.detail);
self.postMessage(url);
}, false);
Finally the index.js "panel" code looks like this-
var panels = require("sdk/panel");
var panel = panels.Panel({
width: 200,
height: 200,
contentURL: "./page.html",
contentScriptFile: "./helper.js",
onHide: handleHide,
onMessage: function(url) {
console.log(url); // displays the user input
}
});
Working fine. Is there other way to do this? Is this efficient one?
Also working fine with self.port.emit() and panel.port.on().

Does anyone know why this Ajax wont work?

I have some code, some to change the class of a div, the rest to load content into the ajax div.
The ajax div however, does not load content. Why might this be?
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
favorites = document.getElementById('favorites');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
var otherClasses = favorites.className;
if (otherClasses.contains("Active")) {
everyone.className = 'statusOptionActive';
favorites.className = 'statusOption';
}
}
favorites.onclick = function() {
loadXMLDoc('indexFav');
var otherClasses = everyone.className;
if (otherClasses.contains("Active")) {
favorites.className = 'statusOptionActive';
everyone.className = 'statusOption';
}
}
function loadXMLDoc(event) {
$.ajax({
url: "../home/" + event.data + ".php",
type: "GET",
success: function (result) {
$("#centreCont").html(result);
}
});
}
}
</script>
These divs start the ajax code (or should do at least)
<div id="everyone" class="statusOptionActive" onclick="loadXMLDoc('indexEveryone')">Everyone, everywhere</div>
<div id="favorites" class="statusOption" onclick="loadXMLDoc('indexFav')">Favourites Only</div>
Why won't it work :(
DEMO
Delete your div onclick event,since already you are manipulating your click event in the script.
Edited div
<div id="everyone" class="statusOptionActive">Everyone, everywhere</div>
<div id="favorites" class="statusOption">Favourites Only</div>
And I don know what argument you are passing in to loadXMLDoc('indexFav'); and loadXMLDoc('indexEveryone'); apart from that your javascript code is correct.
Hope this helps
Thank you
One obvious problem I can see is that you pass a string to loadXMLDoc, then you try to access .data on that string.

Ajax requests are not made on page load when using KnockoutJS

I am new to the whole front-end client scripting scene and have encountered a few difficulties when working on my most recent project. I have looked around the website and could not find anything that answered my question. There may be something here and I have just not found it because of my inexperience and if there is it would be nice if you can provide a link to those resources.
I am currently working on building a client that makes ajax calls to a cross-domain asp.net web api that I have built. I know that the web api works as it has been tested in fiddler. I have also managed to successfully make calls on a click event.
The problem is that I cannot seem to get this working on page load and with knockoutjs. I have tried to do a simple list that is populated with data when the page loads but when I load the page and check fiddler I can see that the ajax calls are not being made. This possibly explains why when I load the page the content isn't there. I have tried inserting some static data to view model and the binding worked so it seems it may be the case that there is something blocking the ajax calls.
I have looked at examples and have knocked up some code. I cannot see any problems with the code but as I am inexperienced there is certainly a possibility that I am missing something. There may also be more efficient ways to do model binding, if so, I would appreciate any advice from someone more experienced.
The code is:
#{
ViewBag.Title = "KnockoutTesting";
}
<!-- MAIN -->
<div id="main">
<!-- wrapper-main -->
<div class="wrapper">
<ul data-bind="foreach: places">
<li>
<span data-bind="text: title"></span>
</li>
</ul>
</div>
</div>
#section scripts {
<script type="text/javascript" src="../../Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="../../Scripts/knockout-2.1.0.js"></script>
<script type="text/javascript">
function PlacesViewModel() {
var self = this;
function Place(root, id, title, description, url, pub) {
var self = this;
self.id = id;
self.title = ko.observable(title);
self.description = ko.observable(description);
self.url = ko.observable(url);
self.pub = ko.observable(pub);
self.remove = function () {
root.sendDelete(self);
};
self.update = function (title, description, url, pub) {
self.title(title);
self.description(description);
self.url(url);
self.pub(pub);
};
};
self.places = ko.observableArray();
self.add = function (id, title, description, url, pub) {
self.places.push(new Place(self, id, title, description, url, pub));
};
self.remove = function (id) {
self.places.remove(function (place) { return place.id === id; });
};
self.update = function (id, title, description, url, pub) {
var oldItem = ko.utils.arrayFirst(self.places(), function (i) { return i.id === id; });
if (oldItem) {
oldItem.update(title, description, url, pub);
}
};
self.sendDelete = function (place) {
$.ajax({
url: "http://localhost:1357/api/places" + place.id,
type: "DELETE"
});
}
};
$(function () {
var viewModel = new PlacesViewModel();
ko.applyBindings(viewModel);
$JQuery.support.cors = true;
$.get("http://localhost:1357/api/places", function (places) {
$.each(places, function (idx, place) {
viewModel.add(place.PlaceID, place.Title, place.Description, place.URL, place.Public);
});
}, "json");
});
</script>
}
It has been simplified for the sake of getting it to work before I add more functionality.
Thanks for your time.
I believe your problem may lie in your Web API implementation. Both the client and the server must support CORS. According to Carlos' post, Web API does not natively support CORS. His post includes a code sample.

jquery cookie setup

I am a newbie at jquery. I've been researching how to set cookies for a jquery function using the cookie plugin.
I have this simple hide and show function for a div but want the class states to persist after links to other pages and refreshing.
The JS looks like this
<script type="text/javascript">
$(document).ready(function(){
$("div.toggle_search").hide();
$("h2.trigger_up").click(function() {
$(this).toggleClass("active").prev().slideToggle(250);
if ($.cookie('more_search','1')) {
$("#criteria").attr('class', $.cookie('more_search'));
} else {
$("#criteria").attr('class', 'active');
}
$.cookie('more_search', $(".trigger_up").attr('class'));
return false;
});
});
</script>
HTML
<div id="criteria">
<div class="toggle_search">
<div class='left'>
Stuff goes here
</div>
</div>
<h2 class="trigger_up">See More Search Criteria</h2>
<div class="clear"></div>
</div>
Any help would be greatly appreciated. !
Check the cookie before you show or hide the div. In this snippet, the div with id="moreButton" (not an actual button) has text saying "More" or "Less" for showing and hiding the div with id="moreOptions":
$(document).ready(function() {
if ($.cookie("show") == "show") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$("#moreOptions").show();
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
}
$("#moreButton").click(function() {
$("#moreOptions").animate({ "height": "toggle" }, { duration: 60 });
if ($("#moreButton").html() == "More »") {
$("#moreButton").html("Less «");
$("#moreButton").attr("title", "Hide the extra search parameters.");
$.cookie("show", "show", { path: '/' })
}
else {
$("#moreButton").html("More »");
$("#moreButton").attr("title", "See more search options.");
$.cookie("show", "", { path: '/' })
};
});
}
);
Have you included the reference to the jQuery-cookie library?
See the documentation found here at the plugin page it looks like you are using or trying to use, https://github.com/carhartl/jquery-cookie/
By setting the cookie to expire in the future, it should persist until it hits the expiration date.
Ex: $.cookie('more_search', $(".trigger_up").attr('class'), { expires: 7 });
//Would expire in a week.
Also notice you have two classes when you get $(".trigger_up").attr('class') trigger_up and active (when the link is clicked for the first time), you might want to parse that the cookie value is set to "active"

Resources