How to make a firefox addon that acts as an offline website - javascript

What I want to do is that when the user clicks a button I will add to firefox (or clicks an option I will add under tools, etc), a new tab should be opened, and in the tab will essentially be an offline website that is written in HTML/CSS/JS and will be part of the addon.
How can I do this? It does not matter to me if I require a very new version of firefox to accomplish this.

Making your first firefox addon can be quite challenging, at first. But once you make one, things get much better. Here are some tools to help you get started:
https://addons.mozilla.org/en-US/developers/tools/builder
I suggest you start with this and check all the features. Once you download the skeleton, look over ff-overlay.xul in the /chrome/content folder. It should be straightforward if you know XUL/Javascript.
https://developer.mozilla.org/en/Setting_up_extension_development_environment
This link helps you set up Firefox for easy addon testing and debugging.
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
The Mozilla Developer Network is incredibly useful. For example, that link takes you to a page that explains everything about switching tabs.
https://builder.addons.mozilla.org/
Addon playground.
Remember, Google's your friend! Good luck!

Related

Does an application exist that allows a user to have multiple browsers opened and manged like chrome tabs?

For example, in chrome you can have 25 tabs plus, is their an application to treat multiple open browsers on the task bar in one single window and switch between these browsers as if the were tabs?? i am new to the world of programming and this would likely be come my first project if needed. Cheers!
As i'm not so sure to understand. But i think i may cover everything to answer. If you are talking about "group" of process from the same application that will merge or show separate on your taskbar.
If you are asking to create your own application that will be able to group many browser window on the same application interface. Maybe you can look at electronjs and get some idea from the galery.
If you are talking about being able to manage browser window/tabs with customs features/options. You can look at Browser extension (when we are talking for google) or browser Add-on (firefox) . Both company is offering tools and tutorials and workshop that will let create an easy Apps that you would be able to turn into Browser extension ( If you are using chrome, at the same area you will put keywords for search or a full url, you can put chrome://extensions/ and you'll be direct on the extensions gallery.
You can also take a look if you want to create something that will use the chrome engine. https://www.chromium.org/Home
If you got more concern about building around "user privacy respect" , you can take a first look at Mozilla Firefox Developer Your first extenzion
For both you can also just browser apps/extensions already build from other users

Record user actions in Chrome Devtools: Possible?

I'm looking for a way to record every thing I do in Chrome Devtools so I can play it back verbatim. I've seen a lot of docs on how to manipulate page content, track page performance and behavior etc from devtools extensions, but nothing yet about actually watching what I do in Chrome Devtools itself. I'd be willing to write an extension if that's what needed. The goal is a teaching tool where I can record things I'm doing in devtools and play them back. (Of course, one could use a GIF recorder but that's so 00's). Something I've looked a little bit at so far is chrome devtools protocol viewer but not sure if it could accomplish the task.
Can anybody suggest a potential way to accomplish this? Thanks in advance!
Now Chrome has an inbuilt recorder tool available in the Dev Tools. Much better than installing any 3rd party extension. Additionally, there are many more features to track the user journey.
Recorder in Chrome Dev Tools
You may try using Desktop Capture API which can be used to capture content of screen, individual windows or tabs. Here's a demo app that shows you how to use a Chrome extension to access the desktopCapture API in your web-application. Additional reference which might help: In chrome extensions, is there a way to record screen without ssl?

Is it advisable to develop Chrome sidebar extension

We want to develop a chrome sidebar extension, and I got to know that sidebar support will not be available in the chrome future versions.Please refer here.
So is it advisable to develop sidebar extension?
Well, this API is not even listed as experimental in the current documentation.
It may be already removed, might change at any time, and has no timeline for becoming released.
The reply that says it's going away is from a Google Engineer, so it's highly probable that it will never reach Stable.
Therefore, it makes no sense to try and develop for that.

How to make a form-filling google chrome extension

I was wondering if anyone could provide me with some links to some tutorials or explain (with some example code), how I would go about making a simple google chrome extension (or in any programming language or browser if that is impossible), how I would make an extension that can visit a specific site, fill a login form on that site, click some links and then do the same sort of thing on the linked to site.
Thanks
Personally, I would not use a chrome extension, but maybe a perl script. There is an extension called WWW::Mechanize that is designed exactly to do this kind of stuff.
You can find plenty of tutorials and examples, just google it.
Edit in 2021: the above recommendation has become a bit outdated since 2013. For a more up-to-date take, I'd still recommend a scriptable headless browser instead of an extension for most automation tasks, but probably not WWW:Mechanize. There are good lists of options, such as this one.

How to suppress javascript errors for sites I'm not developing?

I like to keep javascript debugging enabled in my browser so when I'm developing my own code I can instantly see when I've made an error.
Of course this means I see errors on apple.com, microsoft.com, stackoverflow.com, cnn.com, facebook.com. Its quite fun sometimes to see just how much awful code there is out there being run by major sites but sometimes it gets really annoyed.
I've wondered for YEARS how to change this but never really got around to it. Its particularly annoying today and I'd really like to know of any solutions.
The only solution I have is : use a different browser for everyday browsing.
I'm hopin theres some quick and easy plugin someone can direct me to where I can toggle it on and off based upon the domain i'm on.
Edit: I generally use IE7 for everyday browsing
Firebug lets you enable/disable debugging for different domains.
Script Debugging in IE7 is controlled by a registry key. (An addon could probably toggle it. I just don't know of any.)
So, how I handle this is to write a registry script to turn it on or off. Then, I put a link to those scripts on my windows quick-launch bar and change their icons to be more appropriate. Then, I can just click one of the links to turn on or off IE script debugging.
Turn Off:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="yes"
"DisableScriptDebuggerIE"="yes"
Turn ON:
REGEDIT4
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"Disable Script Debugger"="no"
"DisableScriptDebuggerIE"="no"
Firefox lets you use different profiles. Each profile can have separate preferences, themes and plugins. Start firefox on Windows this way: firefox.exe -ProfileManager to create or manage profiles.
I use Firefox and Webkit for web debugging and Safari for regular web browsing, however. Firefox is just better for web development, and I prefer Safari overall.
I keep those annoying popups on for Internet Explorer, and you're right. It's amazing how few developers ever bother testing their code in IE. As a web developer, it's sorta your duty, right? Seeing as how it still accounts for like 60% of traffic to most sites.
Anyway, in answer to your question, I simply switched to Chrome for everyday browsing, and only use IE for testing and developing.
You have two options.
Change and use a browser that allows you to have site specific configuration (check out Firefox with Firebug), or
Use different browsers for developing and everyday use.
CompanionJS doesn't let you toggle debugging on a domain basis, but makes the error messages less obtrusive for casual surfing, and makes script debugging in general more user friendly.
Chrome doesnt bug you unless you first open the javascript debugger window
If you want to test and debug JavaScript, Firefox and Firebug are unrivalled in terms of features and ease of use. Chrome is not as powerful as Firebug, no matter what anyone else tells you.

Categories