firefox addon: Talking back to the script - javascript

I am new to extension programming but find making extensions in Chrome much more easier, but now that I am trying to port my test extensions to FF I have a few questions of how to do the same things I do in Chrome... now in FF.
For example:
In Chrome I have a page in my extensions directory called: domains.html
I link to that page from my popup and it has access to all my scripts etc but the "outside" world cannot directly access that.
Is there any such thing in FF so that I can show a page that is in my add on folder and has access to my add-on's JS and other files?
Thanks!

Take a look at some of the docs for opening URLs in new Tabs and manipulating the content of the tab:
https://developer.mozilla.org/en/Code_snippets/Tabbed_browser#Opening_a_URL_in_a_new_tab
Once you get comfortable with that, try opening an HTML page that lives in your add-on. First, you need to be aware of the 'content' package name you registered in your chrome.manifest file. Second, make sure your 'domains.html' file is in the content folder of your add-on. To open the web page in a new tab using a button or menu in Firefox use code like this:
gBrowser.addTab("chrome://mypackagename/content/domains.html");
You can should be able to load other JS and CSS files from your add-on into the web page using similar chrome:// URIs.

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.

Which code goes into which directory in a firefox add-on ? (Comparision with chrome extension files)?

I read the documentation of SDK add-on development for firefox.
I have my add-on for chrome just built.I'm not sure of the terminology in firefox development.
My files for my chrome extension:
popup.html, popup.js, popup.css, icon.png - files which deal with the pageaction popup in chrome
contenscript.js -- which injects code into a page
background.js - a background script for the extension
manifest.json
1)So, what are the counter-parts for these files in firefox ?and , it seems firefox develpoment folder has
data
doc
lib
test
readme.md
2)Do I need to use all of them ? What files go into what?
Lib: This is where you usually put your main addon code. By default, ./lib/main.js is your entry point to the addon.
Data: This is where you put content scripts. Content scripts function like running in a different environment and can communicate with your main addon code via message passing. Content scripts can be attached to a page (Page-Mod), in its own environment to perform a process or action (PageWorker), or be its own content (like a Panel).
Doc and Test are for documentation and tests; not necessary.
To translate it to chrome extensions, all of your pop-up code (js/css/html/png) would live in the ./data directory. Your main addon code would create a Panel (if I understand Chrome's "popups" correctly), and reference the code in data.
background.js IIRC is just a script that performs some process. Maybe some JS that performs some heavy-duty operation or is constantly scraping an API for updates, and runs independently of what tab is open. The SDK equivalent of that would be a PageWorker.
manifest.json is just the package.json.
Both panel and pageworkers use content scripts; for more info, guides on working with content scripts

Live reload JavaScript in Chrome

I know you can live-edit JS from within the Source panel of Chrome Developer Tools, and I know there are systems for live-reloading of CSS, but can you live-reload JS from the source location (either a URL or local disk, or leveraging Workspaces somehow, or possibly even as a Chrome Developer Tools plugin)? In particular this would be insanely useful for CoffeeScript-to-JS setups.
It's surprisingly difficult to find anyone else trying to do this, considering how powerful it would be.
I've come close to achieving automatic live reloading of JS without page refresh; here's what I do:
In the inspector's sources tab, right click and choose "Add Folder to Workspace..."
Select to the local folder containing the .js you want to sync and click [okay].
Right click on the .js file nested inside your newly-added workspace folder and choose "Map to Network Resource", then select the matching .js from the page.
Make changes to the local .js file using an external editor.
Click on the .js file in the inspector, ensuring it has focus; this will trigger a "Recompilation and update" and your changes should be injected to the page.
Step 5 is the part that needs to be automated, somehow.
If you combine this with a file-watcher that automatically bundles your app into a single .js file, you can come close to automatic reload without refreshing the page.
Yes you can do that with grunt.js, or gulp.js. Other things like Codekit can do this, as can an add-on for Chrome called LiveReload.

How do you open a file folder through a link on website in Firefox and Chrome?

I'm working on a web application that needs to have a link which opens a documents folder from a file server. The folder can be opened either in a new browser tab or new window, or using the computer's default file browser program (i.e. Windows Explorer). This javascript should do the trick:
window.open('file://///fileserver.companyname/public/Documents/','_blank);
and this html should also work:
Open Documents
but these both only work in Internet Explorer, and our users always use Firefox and Chrome. Apparently the default security settings for Firefox and Chrome don't let you open a "file://" when the request is called from an "http://" website.
I've seen several references to this page: Links to local pages do not work which describes why you can't open files from webpages using Firefox and offers a few workarounds. Unfortunately, it only offers two options: install a plug-in on each browser instance, or create a user preferences file for each browser instance. Neither of these options are acceptable because we have too many users. The company I work for is not willing to apply anything to each machine which needs to access this link. Aside from that, I tried both plug-ins and the preferences file anyway, and the only one that worked for me was the IE Tab plug-in. I think the reason LocalLinks didn't work is because I'm trying to open a folder, not a file.
This stackoverflow question described similar options for Chrome: Can Google Chrome open local links? but again, the LocalLinks plug-in didn't work for me and plug-ins aren't acceptable anyway.
I also found a website that suggested to use a command line argument top open files in Chrome (http://www.askyb.com/chrome/open-local-file-in-google-chrome/) and one that showed how to apply the argument automatically (https://askubuntu.com/questions/160245/making-google-chrome-option-allow-file-access-from-files-permanent), but if I read it correctly it still involves applying changes to every computer accessing our website.
Is there any way to open a file folder in both Firefox and Chrome entirely programmatically i.e. within my web application C# or Javascript code without installing a plug-in or adding a preferences file to individual computers? I cannot alter any of these business requirements.
Sidenote: We are using C# with MVC 4. I would prefer to open the folder using a Controller Action in C# (because I'd like to create the folder before opening it if it doesn't exist yet), but javascript or html on the client side is acceptable. For Internet Explorer, I can create that javascript in the C# code by wrapping it in the JavaScript( ... ) function built into MVC C# Controllers. When testing IE Tabs in Firefox and Chrome, I had to define it as an href link, not a function that opens a window, or IE Tabs wouldn't recognize it as a link. But neither of these were acceptable workarounds for our business needs.
The request was dropped before I could come up with a feasible solution, but in case anyone else is still struggling with this problem I will describe workaround that would not require any workstation customization.
They don't technically need to use the built-in file explorer to open a folder. Instead, a creative way to display the information the business wanted without breaking any browser security rules would be to iterate though the files without opening the file explorer and then display a list of folders/files in a browser window.
Using Directory.EnumerateDirectories(filepath) and Directory.EnumerateFiles(filepath) you can get a list of folders and files to display. When the user clicks one of the folders, call these methods again to get the next level of folders and filenames. When the user clicks a file, download/open it. These methods return the folder and file names as lists of strings, so you would just need to render the lists with custom icons in the browser. (The methods are from C#'s System.IO library.)
here is the simple html code:
<input type="file" webkitdirectory>
but the problem with this code is that it works only on google!

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.

Categories