Website inside firefox addon - javascript

Can we embed a website inside a firefox addon. I am currently building an addon with multiple functions and though addon is appropriate for few functions, website is better for rest of the functions.
If I intend to create an addon and also have website embeded inside it for some of the operations, is it possible. How do we do it?

Yes, you can have web-content in a Firefox addon, but be very careful or else the web page (or anything that intercepts the web page) will have access to everything Firefox itself could do!
If you use an XUL iframe (or any iframe element or runnable data inserted from untrusted content in Chrome:// context), please read this article carefully:
https://developer.mozilla.org/en-US/docs/Displaying_web_content_in_an_extension_without_security_issues

I'd advise to use iframes for this one.
Check:
http://www.w3schools.com/tags/tag_iframe.asp
and
http://webdesign.about.com/od/iframes/a/aaiframe.htm

see my addon here: https://addons.mozilla.org/en-US/firefox/addon/xpicompiler/
see about:addons-memory addon here: https://addons.mozilla.org/en-US/firefox/addon/about-addons-memory/
very simple addons, they contain a webpage. and in the manifest file we have set contentaccesible=true
in my addon if you type about:xpiler you get to that pgae
in the other addon if you type in the url bar about:addons-memory you get to his page.
if you need help i can write a demo for you in 10 minutes

Related

Can a Chrome extension act as a web app in place of a website?

I'm trying to develop a Chrome extension that is supposed to completely replace a specific website's pages with a new UI. In other words, when the user visits said website, the extension should "intercept" it seamlessly and display the new "app" (preserving the URL and without opening a new tab or window). I currently use a content script to manipulate the DOM, but it's too messy.
Chrome apps such as Google Docs achieve the same goal through URL handlers, but they're not an option since they're now deprecated.
Currently, I'm aware of two options:
Intercept the URL and redirect it to an extension URL. I want the URL to be preserved.
Use a content script to stop the page from loading at document_start (using window.stop()) and then "inject" the new app. Apparently, that works, but it sounds quite hacky and prone to unexpected glitches.
What I'd like to know:
Is the second approach good enough? What limitations and other issues will I face if I use it?
Is there any other approach that is at least as good (and preferably designed for this purpose)?
You can't open a chrome app in a tab, only in a window. I don't think they have content scripts either.
Also, chrome apps are now only available on chrome os when you publish it for the first time (existing chrome apps work for any os).
To solve your question, you could use an extension with content scripts and just open up an iframe fullscreen so the url is preserved in the omnibox and it could have the page you want in the iframe as the page that would be in the app.
Content handlers are meant for opening a special protocol url to do something like send an email, etc. Examples would be like tel://, sms://, mailto:, etc.
So you would not want this. Also they aren't that noticable when approving to handle the protocol.

How can I Extract JavaScript Source on Chrome Extension or Console-Command?

HTML :
<html> <script scr="http://someurl.com/jscript.js"></script></html>
I'm trying to extract source code of jscript.js in chrome extension.
But there is no attribute of DOM Object holding source of js.
Is there a way to extract the source code of JavaScript which is loaded on page?
(By using DOM object or some internal object, except re-downloading the script)
Because.. Some web-server returns different source code depends on the request-packet (Usually.. BAD servers do that). So If I tried to download it with different request, I can't get the same one that was loaded on the browser.
According to Is external JavaScript source available to scripting context inside HTML page?, it's not normally possible without redownloading since it's not exposed to the DOM.
An extension, however, can hook into information available to the browser.
The simplest would be to create a DevTools extension. It would only work when the DevTools are open on the page, but then you can easily access the source with chrome.devtools.inspectedWindow.getResources().
Somewhat harder, but one can use chrome.debugger API to achieve the same while DevTools are closed. It's a low-level API, but it allows doing everything DevTools can do. I don't have a ready example, but Debugger Protocol docs will help.
Neither is possible from a content script.
You can also go directly to the extension on your file system:
Where to find extensions installed folder for Google Chrome on Mac?
for example on my mac book computer:
pwd
output: ~/Library/Application\ Support/Google/Chrome/Default/Extensions/hkbhjllliedcceblibllaodamehmbfgm/1.7.1_0

Can't open .PDF or .DOC(X) in iFrame

I'm developing an iPhone app using PhoneGap, Xcode, HTML and JavaScript. I have an iFrame that should view documents (right now I am using a test document instead of allowing the user to choose - that's coming later) that have been downloaded (again, i chose the document). I tried using a .pdf file and a .docx file which are both supported by iPhone, but clicking the button I coded opens them in Safari instead of the iFrame. Here's the code to view the document (JavaScript and HTML);
function viewOnline() {
var site = "file://" + pathToRoot + "/editme.txt"
$('#myIframe').attr('src', site);
}
<button onclick="viewOnline();">View Online</button></li>
<iframe id="myIframe" style="width: 210; height: 210px;" seamless="seamless" src=""></iframe>
Is it just not possible to view .pdf etc files in iFrame or is there something wrong with my code?
** pathToRoot is coded (and tested to be correct) elsewhere in the application - so i don't need to hard-code the file path, which will change when i transfer it to the device instead of the simulator.
** if you need the code where i download the file, then i can give you it - just comment below
** I'm also fairly new to working with Xcode and PhoneGap so if i need to alter something with them if you could give as much detail as possible that would be great - Thanks so much in advance
Edit
I know about the OpenWhitelistURLsInWebView, and have enabled it and allowed the website i'm downloading from in the ExternalHosts array - but it still won't work.
It's not possible. Most of the mobile browsers doesn't come preloaded with Adobe plugins and all. It's not a desktop you see. Its a mobile. So it's not possible unless you create a own browser and include the adobe plugin(meaning you have to write pdf rendition logic because the plugin wont work in mobile).
iFrames are very rarely needed and are often employed for wrong reasons. Often you can achieve the exact same thing you are going for using normal styles and simpler markup.
Also, googling phonegap/cordova iframe gives many results that spell out trouble with iFrames. For the official implications guide on them see iFrame Usage.
In your case these are the things you need to consider:
Enabling iFrames on PhoneGap-iOS requires that you whitelist the
iframe domains and enable "OpenAllWhitelistURLsInWebView". While this
doesn't sound like a problem, many applications want to open specific
sites in MobileSafari (not a ChildBrowser), which cannot be
accomplished easily when "OpenAllWhitelistURLsInWebView" is enabled.
To change OpenAllWhitelistURLsInWebView open the Cordova.plist file in
Xcode.
To whitelist a domain. Add it to the ExternalHosts array in the
Cordova.plist file. Simply press the + next to the ExternalHosts title
and when the item0 appears bellow add your domain to the value section
(in the format example.com).

Download multiple images without asking in Chrome extension

I am currently creating a Chrome extension (which uses javascripts mainly) that allows users to scrape the images on a webpage and download them. I have finished the link scraping part, and the code will return an array like:
["http://example.com/image1.jpg","http://example.com/image2.jpg"]
But how do I download all of the links in ONE CLICK? I tried listing all photos on a new tab and let the users to Ctrl+S save the page. But this greatly affects the UI and I do not like it. I do not host webpage so server side script may not be working.. Any other solutions?
As far as I know, Chrome extensions technically can't save files to disk like Firefox.
The only way to do this is using NPAPI
Unfortunately, extensions using npapi will most likely not be accepted by the Web Store due to security problems. Of course it'll be okay if you use it for yourself or host the extension on your website.
You can install and examize the code of the following extensions, maybe you can even use the provided npapi too:
Screen Capture (by Google) https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg
Chrome Toolbox (by Google) https://chrome.google.com/webstore/detail/fjccknnhdnkbanjilpjddjhmkghmachn
Awesome Screenshot: Capture & Annotate https://chrome.google.com/webstore/detail/alelhddbbhepgpmgidjdcjakblofbmce
Download Asisstant (by Google) - got killed I guess.

Fetching all the urls opened in the browser

I know that getRequestURL will fetch me the URL of the page being opened.
I need to know how to get the URLs of all the tabs opened in the browser say firefox.
Is there anyway to achieve this?
This is not possible to do from a regular web page as it would be a serious security issue.
However, it is possible with browser extensions (for example, in Chrome there is a chrome.tabs.getAllInWindow() function available to plugins, and accessing their urls is simply a matter of looping through the tabs returned by that function and reading the .url property. See further documentation here).
From your own web page you should not be able to achieve this, as that would be a breach of the sandboxing these browsers attempt to enforce between tabs. If you launched the other windows via javascript, you may be able to control their content, but only under this circumstance.
You could feasibly write a plugin to run in the browser, but obviously the client would have to install/trust this for it to work.

Categories