I have made a small Chrome extension which has a click event listener that captures the element and then it gives the xpath.
But this is not capturing anything on a view-source: page.
Is there any way by which I can capture the element from view-source: page in JavaScript?
I am trying with this code on my content page:
document.addEventListener('click', function xyz(e){
e.preventDefault();
//alert(e);
var target = e.target || event.srcElement;
var attributes = Array.prototype.slice.call(target.attributes).map(function(i) {
return [String(i.name)+": "+String(i.value)]
})
alert(attributes);
prompt("xpath1 :",getPathTo(target));
chrome.runtime.sendMessage({method:"captureElement",data:attributes});
},true)
There is nothing you can do, you can't interact with those pages.
Extensions cannot get access to view-source: protocol pages (it's not a supported scheme), so you can't inject a content script in them at all, even with "<all_urls>" filter.
Related
I have an Firefox Extension with a XUL overlay containing some Javascript with some event handlers. Among those is an EventListener for DOMContentLoaded. I have a second overlay I only want to load when visiting a certain website.
Here's some of the code I have so far:
var appcontent = document.getElementById("appcontent"); // browser
if (appcontent) appcontent.addEventListener("DOMContentLoaded", onPageLoad, true);
function onPageLoad(event) {
var doc = iEvent.originalTarget; // doc is document that triggered "onload" event
var win = doc.defaultView;
if (doc.nodeName != 'document') return; // only documents
if (win != win.top) return; //only top window.
if (win.frameElement) return; // skip iframes/frames
if(doc.location.href.search('http://somewebsite.com/') > -1) {
//Find XULDocument somehow
//var xulDoc = ??????;
xulDoc.loadOverlay('chrome://myextension/content/secondoverlay.xul', null);
}
}
How can I retrieve the XULDocument hosting the DOM, given the DOMContentLoaded event data?
Well, the XUL window is just window, aka. the global scope.
So the following two lines should both work and should be the same:
window.document.loadOverlay(...);
document.loadOverlay(...);
However, this most is not really what you want, because the XUL window is still the main browser.xul which hosts all content windows. There is no dedicated XUL window per content window!
Loading the second overlay will overlay the whole browser window, not just the "tab" (or whatever) and will stay once you close the tab (content window) or navigate away.
Now, the question is: What do you really want to achieve?
Display some UI (toolbar button, menu, whatever) only for certain pages? Then usually you'd overlay all your stuff once (on the initial load, i.e. in the "first" overlay) and just hide/show your UI according to your rules. See Tabbed Browser for some code snippets when dealing with tab switching and/or page loads.
Or you really want to apply something to the content window itself. Then you'd usually just modify the DOM of the content window directly.
I'm writing a firefox xul extension, and I must have an interaction beetween the web page and extension.
Example: If I press a link from the page I want to call a function in the xul extension.
Anyone know if there is a way?
Thanks a lot
Yes, you can do this. You'll need to access page content with the content object.
In your extension code you can select all links and then add an eventListener:
allLinks = content.document.getElementsByTagName("a"),
for (var i=0, il=allLinks.length; i<il; i++) {
elm = allLinks[i];
elm.addEventListener("click", nowclicked, false);
}
And then your event listener would look something like:
nowclicked : function () {
alert("a linked was clicked!");
}
If you need a working example, I've modified the Link Target Finder extension by Robert Nyman to add an alert when links are clicked. The modified code is in linkTargetFinder.js.
See MDN example for Sending data from unprivileged document to chrome document.
Basically, in your chrome code you have to add a listener:
// The last value is a Mozilla-specific value to indicate untrusted content is allowed to trigger the event.
document.addEventListener("MyExtensionEvent", function(e) {myExtension.myListener(e);}, false, true);
and fire the event from content script. Note that document in the following is the contentDocument not XulDocument
var evt = document.createEvent("Events");
evt.initEvent("MyExtensionEvent", true, false);
element.dispatchEvent(evt);
I'm attempting to convert a Greasemonky script to an extension for Firefox and I'm trying to make my extension automatically attach a simple script to any webpage when a new tab is opened. I'm converting the script from Greasemonkey because I'd like to take advantage of advanced preferences and menu options.
I access the tab using this:
var container = gBrowser.tabContainer;
container.addEventListener("TabOpen", tabAdded, false);
function tabAdded(event) {
var newtabwindow = event.target.____ //I don't know what goes here
//attach script to newtabwindow
}
and my goal is to append the script to the document in the new tab once it loads using this function:
function scriptrunner(targetwindow) {
var myScript = targetwindow.content.document.createElement('script');
myScript.type = 'text/javascript';
myScript.setAttribute('src','chrome://addonname/content/addonscript.js');
targetwindow.content.document.getElementsByTagName('head')[0].appendChild(myScript);
}
This function works fine to attach the script to the current page when attached to a toolbar button with oncommand="scriptrunner(window)", but I don't know how I could access the window in the newly opened tab, or if I should cut out the window from the equation and access the document another way.
You are looking for contentWindow, which is a property of the browser element.
Given a tab, call gBrowser.getBrowserForTab to acquire the browser element associated with the tab. Then access either contentDocument or contentWindow property of the browser element (these are equivalent to the document and window objects you should already be familiar with).
Also -- if I'm not mistaken -- you'll need to listen for the "load" event of the contentWindow in addition to listening to events for the tab.
In our application, we parse a web page and load it into another page in an iframe. All the elements in that loaded page have their token IDs. I need to select the elements by those token IDs. Means - I click on an element on the main page and select corresponding element in the page in the iframe. With the help of jQuery I'm doing it in the following way:
function selectElement(token) {
$('[tokenid=' + token + ']').addClass('border');
}
However with this function I can select the elements in the current page only, not in the iFrame. Could anybody tell me how can I select the elements in the loaded iFrame?
Thanks.
var iframe = $('iframe'); // or some other selector to get the iframe
$('[tokenid=' + token + ']', iframe.contents()).addClass('border');
Also note that if the src of this iframe is pointing to a different domain, due to security reasons, you will not be able to access the contents of this iframe in javascript.
Take a look at this post: http://praveenbattula.blogspot.com/2009/09/access-iframe-content-using-jquery.html
$("#iframeID").contents().find("[tokenid=" + token + "]").html();
Place your selector in the find method.
This may not be possible however if the iframe is not coming from your server. Other posts talk about permission denied errors.
jQuery/JavaScript: accessing contents of an iframe
when your document is ready that doesn't mean that your iframe is ready too,
so you should listen to the iframe load event then access your contents:
$(function() {
$("#my-iframe").bind("load",function(){
$(this).contents().find("[tokenid=" + token + "]").html();
});
});
If the case is accessing the IFrame via console, e. g. Chrome Dev Tools then you can just select the context of DOM requests via dropdown (see the picture).
here is simple JQuery to do this to make div draggable with in only container :
$("#containerdiv div").draggable( {containment: "#containerdiv ", scroll: false} );
I'm developing a firefox extension based on this tutorial which is a FF 2.0 extension (second part of the tutorial is at this url)
The main thing that is important is that it uses
<iframe id="contentview" src="http://www.ibm.com/developerworks/web" flex="2"/>
In the backend code, when clicking the GO button, this happens:
contentview.contentDocument.location.href = urlbox.value;
//Use Firefox XPath to get the raw text of the document
var doctext = contentview.contentDocument.evaluate(
"string(.)", document, null, XPathResult.STRING_TYPE, null).stringValue;
I get an error with the xpath, but that's not my question. The issue I have with FF 3.0 is that the contentDocument value refers to the old site loaded, not to the one loaded by the href-change.
So my question is: how can I create a similar window, but be notified someone when the loaded document is complete, so I can access its DOM?
Updated:
first you need to handle the load event of the window then you add an event listener to the iframe element
window.addEventListener("load",Listen,false);
function Listen()
{
var frame = document.getElementById("contentview");
frame.addEventListener("DOMContentLoaded", DomLoadedEventHandler, true);
}
function DomLoadedEventHandler() {
var frame = document.getElementById("contentview");
alert(frame.contentDocument.location.href);
}
replace "DomLoadedEventHandler" with your event handler name.
I recommend that you take a look at the official site of Mozilla to learn everything about Firefox extensions
http://developer.mozilla.com