How to apply detach feature in browser extension using crossrider? - browser-extension

Can anyone help me regarding the detached feature , which enables the popup.html I have created to detach from the extension and appear as a popup just like in firebug .

Related

How do I run Firefox inspector within an iFrame?

I know Chrome's inspector has a selector to choose which frame to use with the console. Firebug has a similar command, cd(window.frames[number]). Is there anything similar in Firefox Devtools? I suppose frame.window.eval could work, but only if it isn't cross-domain.
I was also wondering if there is a highlighter to inspect results of Web-console commands, for example document.getElementsByClassName(...). but you can at least change style of an element programmatically to 'see' it.
DOMNode objects do highlight in the page on hover in the web console and what is called the "variables view". The "variables view" is used in the web console too when you click on an object to see its properties (it's the sidebar that appears), and is also used in the debugger when paused at a breakpoint (right sidebar that contains the various scopes variables).
So, anytime a DOMNode appears in there, if you hover over it, it will be highlighted in the page.
When it comes to iframes, the webconsole does support the cd() command, see working with iframes.
We are also actively working on a bug that will add a drop-down to the toolbox whenever there are frames/iframes in the current page and allow you to easily switch from one to the other.
You can click to inspect a node in the console and debugger starting in Firefox 29, currently on the Aurora channel.

reload after customize

i have a very simple firefox addon that essentially just displays the total number of open tabs.
So far it works beautifully, however after right clicking on the toolbar and selecting Customize… it only shows the default text until a tab is opened or closed.
i presume that i need to add an event listener for this event and call updateWidget(), however i can't find it in the API doc. So does anyone know how to do it?
Verified as bug, see : bugzilla.mozilla.org/show_bug.cgi?id=773297

About debugging chrome extension

I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through

How to handle wizard by WATIN in IE8

I am using WATIN Version(1.3.0)
I am in a situation that when i click on a node ,a Wizard appear. That wizard contain several controls(checkboxes,buttons and TextFields) and it has many screens(when next button is pressed , the next screen appear) but i am unable to handle it. I have apply the following techniques but failed
I have used ie.HtmlDialog but exception appear
I have grab the internal iframe (which is the main frame) but its HTMLDocument contains nothing. Where as i contain HTML when i look into it using IE8 Developer Tool
I have tried to use mshtml.HTMLDocuemntClass but failed
Wizard has url but unable to grab it by url
Unable to grab it by using ie.Form
Please HELP !!!
Thankx in Advance
Is the wizard held in an update panel or anything that is AJAX enabled? if this is then WatiN will not realise that the page has actually refreshed and will therefore not be able to find some of the elements it is looking for
Paul

Firefox Live DOM

Is it possible through a plugin or setting or something to allow Firefox to recognize the live DOM source code?
Basically, firebug or other similar tools can recognize elements on the page which Firefox does not.
I understand with these extensions I have the ability to see such changes made by javascript, but Firefox does not seem to fully recognize them.
I'll try to clarify.
If I load a page and view source (ctrl-U), I see what the server sent to Firefox, and what Firefox ostensibly recognizes as the source code of the page. If in that source code, there is javascript which alters the DOM, and then I hit (ctrl-U) again, the code is not updated.
I am using a testing tool (iMacros firefox plugin) to automate functionality, but it does not recognize the updated DOM because Firefox does not. Firebug and similar tools can recognize these "live" updates. Does that help?
http://www.chapter31.com/2006/12/04/viewing-ajax-generated-source-code/
You can try using the web-developer extension with a view-generated-source option.
I'm still not sure I understand your question, but I think what you're getting at is the Web Developer extension for FireFox, specifically its "View Generated Source" feature.
That will let you see the altered DOM.
Firebug gives u this ability:
for instance check the HTML tab when running a jquery ticker and see the dynamic changes live in the DOM
Usually, when I have weird issues with either the console or the DOM inspector with firebug, I find restarting the browser and validating your code is the way forward.
That said, I'm not really following your question, the document that firebug shows is the same one in the firefox window...?
It looks like the problem is not that you want firefox to show the current DOM when you hit CTRL+U, but that you want some automated testing tool to be able to test your web pages.
Perhaps you should use a testing tool that is suited to the job of testing rich web applications, Selenium, for example, can do this.

Resources