I am trying to develop a firefox extension that adds a panel allowing the user to interact with the DOM of any webpage. I'd like to reuse web components that I've already built. The web components are built using libraries like jquery, angular, d3, and a bunch of others, most of which don't play nice with XUL. To deal with that, I'm including a browser element that contains a web page with my components.
<overlay id="testOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox id="browser">
<splitter></splitter>
<vbox flex="1">
<browser
src="chrome://testApp/content/index.html"
type="content"
flex="1"/>
</vbox>
</hbox>
</overlay>
This works, and shows my index.html in a panel to the side as expected. However, I cannot figure out how to debug any scripts that are included on the index.html page. The documentation for debugging extensions seems very sparse.
So the question I have is: how can I point the firefox debugger at the browser element in the pane that I've created.
Follow the instructions here for enabling the browser (as opposed to content) debugger: https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger
Once your scripts are loaded in the browser, they should become visible in the debugger's sources pane (but not before that).
If you still can't get that to work, I would love a test case and detailed steps to reproduce, so I could try and diagnose the problem :)
Related
I have written a NPAPI plugin that implements all the logic required and now I am writing an extension that is expected to use the functionality provided in the plugin. This architecture provides me an opportunity to write the same C++ code for both Mozilla Firefox and Google Chrome.
In Chrome I instantiate the object that is defined in the plugin by writing an <embed ...> construction to the separate document that is owned by my extension (it is provided automagically to my Chrome plugin). That just works. In C++ code I perform all the works required in the constructor of my plugin object.
I can't easily adapt my solution to use it in Firefox because the extension is not backed by any separate document and my extension doesn't have permissions to write to any of already rendered documents.
My main question in the most common form is how can I use the functionality provided by the plugin many times and passing an arguments list to my native function on user clicks the button or selects my entry in the drop-down menu (i.e. the method with arguments should be invoked after the specific event, not just at arbitrary time)?
"Supplementary" questions are:
How can I instantiate a plugin in Mozilla Firefox? Where can I get a document that will be "interpreted" by FF and such that the extension will be able to write to it?
I don't know how to do that myself, but here is an open source firefox extension that does it: https://github.com/kylehuff/webpg-firefox
Your Firefox extension needs to make use of a "browser overlay". There are many types of overlays, for various parts of the browser, and they are loaded (overlay'ed) within the specified document, as defined in the chrome.manifest file.
For example, the following applies an overlay to the "browser.xul" file (which is the main browser window)
overlay chrome://browser/content/browser.xul content/firefoxOverlay.xul
Now, within that overlay file you can load your plugin object and call the methods provided by the plugin.
Here is an example XUL file which does nothing more than load the NPAPI plugin of the content-type "application/x-example-plugin", and assign the plugin object to the variable "myPlugin"
<script type="text/javascript">
myPlugin = document.getElementById("myPlugin");
</script>
<?xml version="1.0" encoding="UTF-8"?>
<overlay id="myOverlay" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="text/javascript">
myPlugin = document.getElementById("myPlugin");
alert(myPlugin.someFunction());
</scrpit>
<window id="main-window">
<vbox collapsed="true">
<html:object id="myPlugin" type="application/x-example-plugin" height="1" width="1" style="visibility:hidden;"></html:object>
</vbox>
</window>
</overlay>
Some important things to note
The "xmlns:html=..." declaration is critical, because the plugin object is being loaded in an html:object, and that declaration tells the XUL parser how to render the object.
The id of the window ("main-window") is important, because that is how the XUL parser will overlay the item (within the "main" window)
The object id ("myPlugin", in this example) is how you will reference the plugin object in via the JavaScript later.
Because we are not showing content with our plugin, merely calling public methods provided by it, it is important to make the CSS visibility has "hidden", and the size to 1x1 pixels. Without doing this, you could end up with large blank spaces rendered in the browser UI. Additionally, it is important to use the CSS "visibility" property, not the "display" property. If you set the display property to "none", you will have issues with your plugin actually being initialized within the overlay.
In your extension install.rdf file, you must specify the "unpack" property as "true", i.e.: <em:unpack>true</em:unpack>
Once your overlay is loaded within the context of the browser XUL, and your plugin initialized within the main browser window, you can reference your plugin from within the scope of the main window by the variable you have assigned it to ("myPlugin" in this example).
I will not go into depth here on how to obtain the context of the main window (see the links below), but you once you have a reference you can invoke the exposed methods from within content scripts, sidebars, toolbars, etc.
Reference links -
XUL Overlays
Install manifests (chrome.manifest)
Working with windows in chrome code
Interaction between privileged and non-privileged pages
Source files for one of my Firefox extensions using an NPAPI plugin
I see this one time, and know that it not so hard, but can't find any solutions in internet.
Let say I have plugin, as you know it written by XUL. XUL like HTML has tags, js and etc. So I want to debug it with Firebug.
But in default plugin view firebug (as all other plugins disabled). So i need to open my plugin like Web page.
I remember that it's something like
chrome://address/to/my/plugin/page.xul
Does anyone face this problem?
There is no general rule by which you can build the addresses of extension pages. You have to open the extension's XPI file (it's a regular ZIP file, rename it if necessary) and have a look at chrome.manifest inside. E.g. in Firebug's chrome.manifest it says:
content firebug content/firebug/
Which means that the files in the content/firebug/ directory of the extension are accessible under chrome://firebug/content/. You can try opening them as web pages but they won't necessarily work.
A better approach would be using tools that are actually meant for extensions. For example Chromebug or DOM Inspector.
I'm starting my first PhoneGap project and am developing using Visual Studio and Windows Phone 7, although I intend on ultimately deploying to iOS and Symbian as well.
However, I'm stuck at Step 1. I have added an image to the www/images folder, and put the following code:
<img src="images/login-btn.png" width="103" height="42" style="margin-left:90px;" />
And I get:
It works fine when I preview it in IE9, but I don't have a Mac to test it on iOS yet.
It's worth noting that the JS files and CSS have loaded fine, it's just any image (whether referenced in CSS or an <img> tag) always comes up broken.
My guess would be the Build Action of your image file is incorrect.
According to http://wiki.phonegap.com/w/page/48672055/Getting%20Started%20with%20PhoneGap%20Windows%20Phone%207#4Reviewtheprojectstructure section 4. You should be setting the Build Action of your images etc to Content which simply copies them into the output project when it is built. They are probably currently set to Resource or None.
To change the Build Action right click a file and choose properties to go to the properties window if you do not already have it open. It is probably then the first property. Just click and choose the correct one.
I'm posting this to questions that I found while trying to find my answer to the same problem. The JS framework I use adds a url query to each image when in a debugging mode (in order to force browsers to reload image, instead of using cached). So, my image "image/background.jpg" would be accessed as "image/background.jpg?d=34342233". But, when running on PhoneGAP for Windows Phone, it won't recognize the image, and thus it shows up as broken. So, I had to turn off debugging for the framework I use, and suddenly the images showed up (still, don't forget to set the Build Action to "Content" as mentioned earlier).
I'd like to use the Chrome developer console to look at variables and DOM elements in my app, but the app exists inside an iframe (since it's an OpenSocial app).
So the situation is:
<containing site>
<iframe id='foo' src='different domain'>
... my app ...
</iframe>
</containing site>
Is there any way to access things happening in that iframe from the developer console? If I try to do document.getElementById("foo").something, it doesn't work, probably because the iframe is in a different domain.
I can't open the iframe contents in a new tab, because the iframe needs to be able to talk to the containing site as well.
In the Developer Tools in Chrome, there is a bar along the top, called the Execution Context Selector (h/t felipe-sabino), just under the Elements tab, that changes depending on the context of the current tab. When in the Console tab there is a dropdown in that bar that allows you to select the frame context in which the Console will operate. Select your frame in this drop down and you will find yourself in the appropriate frame context. :D
Chrome v59
Chrome v33
Chrome v32 & lower
Currently evaluation in the console is performed in the context of the main frame in the page and it adheres to the same cross-origin policy as the main frame itself. This means that you cannot access elements in the iframe unless the main frame can. You can still set breakpoints in and debug your code using Scripts panel though.
Update: This is no longer true. See Metagrapher's answer.
When the iFrame points to your site like this:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
</head>
<body>
<iframe id="my_frame" src="/wherev"></iframe>
</body>
</html>
You can access iFrame DOM through this kind of thing.
var iframeBody = $(window.my_frame.document.getElementsByTagName("body")[0]);
iframeBody.append($("<h1/>").html("Hello world!"));
In my fairly complex scenario the accepted answer for how to do this in Chrome doesn't work for me. You may want to try the Firefox debugger instead (part of the Firefox developer tools), which shows all of the 'Sources', including those that are part of an iFrame
I've created a couple of Office plugins. The plugin shows a set of html files installed on the clients computer. The plugin uses a COM-accessible assembly which shows a WinForm with a WebBrowser on it. The plugin makes the WebBrowser navigate to a file on the clients computer. The assembly is also used in other programs to show the same information.
When showing the local html files using a 'normal' browser (e.g. double clicking a file in Windows Explorer) the browser popup a security warning about running active content. This is because we have some javascript in it. This warning is supressed by setting the 'Allow active content to run in files on My Computer' in the Internet Explorer settings. This solves the issue using a 'normal' browser.
Funny enough the 'active content' warning is not shown when getting the same file using a Word/Excel/PowerPoint plugin. It calls the same assembly, using the same WinForm and using the same content. Despite the setting 'Allow active content to run from My Computer' being false, the content is shown without a warning and the javascript is executed.
Now, the problem and the real question is that Outlook does the reverse. No matter what I use for 'Allow active content to run from My Computer' the browser warning about the active content in the html file is shown. When I confirm the message and allow the scripts to continue, the javascript runs fine. So, even when I set the 'Allow active content to run from My Computer' to true, the warning is given.
I've gone through all (sort of) relevant settings in Outlook, but nothing helps.
I assume that Outlook is using some kind of private context for a webbrowser (probably because it is using a webbrowser object internally).
The real question is: how can I make the Outlook plugin respect the IE settings?
(I understand this is a long story and maybe not clear enough. Please let me know if I have to elaborate more).
I couldn't get rid of the security warning without lowering the security setting. And that is not an option: we are talking about a project that will be installed on millions of computers.
I decided to go another route. Let's see if we can make the browser trust the html pages. So, what to do to get rid of the 'Active content' warning.
First I investigated what exactly triggers the warning. That was easy: any tag in your html file will do. And I need script, so removing that isn't an option. But, when hosted from a website, the scripts run fine and don't suffer from a warning. So, I investigated if it is possible to run my files in the Internet-context.
I found out there is a way, at least for IE (which in my case is sufficient). If you save a webpage as a complete HTML file from IE, the browser adds a comment to the html to signal its origin. Something like: . If you later open that stored html file, the file is shown in the Internet context.
So, I tried adding to the html file. And, voila, the file is opened in the Internet context. The security warning about active content is gone and the scripts are executed fine.
But, that raised another problem. We have a couple of window.open statements in the scripts and using that causes he cross domain browsing problems that in recent IE versions are blocked. Even if you use a relative path in the window.open call, if fails and you end up with a blank window.
In our case, we can (probably) decide to get rid of the window.open calls. But, if a reader ever finds a solution for using window.open in this scenario, I would be very happy if you let me know.
So, for now: case closed...
Internet explorer use Mark of web in such cases
<!-- saved from url=(0014)about:internet -->
<!doctype html>
<!-- saved from url=(0023)http://www.contoso.com/ -->
<html>
<head>
<title>A Mark of the Web Example.</title>
</head>
<body>
<p>Hello, World</p>
</body>
</html>
More info from here
https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx