Develop Reference

Firefox Addon Javascript doesnt get executed when opening a PDF file in the browser

I am trying to write a Firefox Addon which enters the Password to a protected PDF on a website automatically. The Javascript to do this is very straightforward & already works perfectly if entered in the Browser command line.
It just doesnt get executed when relying on the Addon.
I tested by replacing all the Javascript with just console.log('Works!');
If i enter any part of the site normally, the String indeed shows up in the console as expected.
But if i open the link to the PDF(the PDF is stored on the same website), it simply refuses to execute.
I dont even gey any error messages or anything.
Any hint in the right direction would be appreciated!

Your extension can execute content scripts in the context of web pages.
But PDF documents, even when hosted on web servers, are not web pages. They are displayed by the browser in a different context (the builtin pdf viewer) with elevated privileges.
Access to that context by an extension would be a security disaster.
Perhaps the documentation should reflect that (like "about:debugging" or "about:addons") every tab displaying a pdf is a privileged browser page, where an extension cannot load scripts.

Javascript - List files being dowloaded by web browser

in the context you access a website, the browser dowload all required files (static files : CSS, scripts) or via AJAX. OK. You can see the dowload process in realtime using the Network tab in your devtools browser.
My question is : is it possible to "listen" to a file being dowloaded using JavaScript as the browser does in the Network tab ?
A concrete example would be to show the user what the browser is being dowloaded in from my website.
While searching over the Internet, I'v seen it's possible to overload xhr native functions : Add a "hook" to all AJAX requests on a page
Nevertheless, I don't think images and CSS download will trigger xhr function because the browser processes in it's own way.
I'm keen to hear the community about it.
Thanks in advance !

If you are explicitly downloading resources in your JavaScript code, you can inject hooks to track the AJAX requests, as per your message above. You can alternatively use the Resource Timing API to track network timing information of your requests, which is nice.
However, it is not possible to see the Network information of resources out of your control, as it requires access to the browser engine.
It is possible to get such information using a Chrome Extension, as an API exists that opens you up to this information. See chrome.devtools.network.

Using a Chrome extension content script to embed additional content

I am working on a Chrome extension that will add content to a particular set of pages. From my research, it sounds like what I want is a content script that will execute for the appropriate pages. I can specify the "appropriate pages" using the content_script.matches manifest.json field.
However, the problem I'm running into is that content scripts run in an isolated world, separate from the rest of your extension.
How I had envisioned my extension was a set of UI pages that would be embedded on the appropriate pages by the content script. The background page would contain the code for build the content of the UI pages. The background page, and by extension, the UI pages, would need access to the various Chrome APIs (e.g., local storage), as well as being able to make cross-domain requests to retrieve their data. However, it seems this is not possible, since the content scripts run in an isolated world, and don't have access to the Chrome APIs that I need.
Message passing allows a content script to send and receive data from the background page, but doesn't allow you to take a UI page and embed it on the current webpage.
I initially thought I was making some headway on this when I was able to make a jQuery AJAX request from my content script for an UI page, but that only gets me the HTML file itself. My UI pages depend on code to programmatically build the content--it's not just a static HTML page. And that "build the page" JavaScript code depends on Chrome APIs that are not available to the content script. So, if I just tried to make all my UI pages and JavaScript resources web_accessible_resources, I could inject them into the page but they wouldn't be able to run.
Which brings me to my question: how can a content script pull down, or embed, UI pages that can invoke code in the background page?

Tldr: you need to read about sending messages between content/background. Its in the docs and many samples.

From what I've been able to find, the architecture I was hoping for (as outlined in my question) is not possible in a Chrome Extension. Chrome's security model requires a different approach. Here's what worked for me.
Make your templates, JavaScript files, and anything that's part of your UI, web_accessible_resources.
Use your content script to load these resources and display them to the user at the appropriate times/locations.
(Almost) any calls to chrome.* API need to be done through your background page or event page. In my case, the "background page" is strictly JavaScript, there's no HTML.
Your content script, and UI, can send messages to your background/event page(s).
This model is not unlike the traditional client/server architecture of a web app. The "background page" is like your server, and your content script can send "messages" (think HTTP request) to the "background page" just like it might send a request to your server.
The background page, just like the server, has access to resources that the content script does not, e.g., the background page can use more of the chrome APIs.
This mental analogy helped me to "redesign" my app in a way that (so far) is working within the Chrome Extension security model. I had originally been thinking more along the lines of a traditional desktop app, where the entire app can do things like make cross domain requests or write to the file system. Chrome Extensions and Apps don't work this way, however.

Programmatically call a firefox extension from javascript

I have seen this excellent firefox extension, Screengrab!. It takes a "picture" of the web page and copies it to the clipboard or saves it to a png file. I need to do so, but with a new web page, from an url I have in javascript. I can open the web page in a new window, but then I have to call the extension -not to press the control- and saves the page once the page is fully loaded.
Is it possible?

I am pretty certain that it is not possible to access any Firefox add-on through web page content. This could create privacy and/or security issues within the Firefox browser (as the user has never given you permission to access such content on their machine). For this reason, I believe Firefox add-ons run in an entirely different JavaScript context, thereby making this entirely impossible.
However, as Dmitriy's answer states, there are server-side workarounds that can be performed.

Does not look like ScreenGrab has any javascript API.
There is a PHP solution for Saving Web Page as Image.
If you need to do it from JavaScript (from client side) - you can:
Step 1: Create a PHP server app that does the trick (see the link), and that accepts JSONP call.
Step 2: Create a client side page (JavaScript) that will send a JSONP request to that PHP script. See my answer here, that will help you to create such request.

How does google chrome developer tools access the "text" property of the <script> tag when the content was loaded using the src attribute?

I am debugging some 3rd party app and I would like to dynamically reload/replace some of the content of the tags, however by inspection properties like innerHTML are not set and I can't see anything from the javascript developer console that would suggest a property of method to get the javascript content.
The file is dynamic so re-downloading the file it not suitable in this case.
There are some other questions on SO which address this problem with no good answer for me, for example it is suggested to pull the content again using an XMLHttpRequest or some jQuery. However this is not suitable for my purpose.
How can I get the content of the file specified as the 'src' of a <script> tag?
However I can see that google chrome can inspect the loaded source content of the script tag in the developer console, here is a screenshot;
Any idea how it is done? I am happy to use the google chrome devtools, or some platform/browser specific extension as I am just using this for debugging.
I presume it is accessing some local cache of the downloaded src, but I would also expect that cache file or value is inspect-able from google chrome somehow...?

DevTools are deeply integrated into the browser and do that with help of C++ code in WebCore. In your case DevTools just be notified when browser makes a request, receive the response, receive the data etc.
Chrome DevTools AKA Safari Web Inspector has two parts.
Backend (~26kloc of C++ code) and Frontend (55kloc of js code).
You can see the API between WebCore and DevTools bakend at InspectorInstrumentation.h.
Also there is an API between Backend part of DevTools and Frontend part of DevTools.
It is described in Inspector.json. You can use this API and write your own Frontend or implement an extension which does something with help of DevTools backend.
The docs at the project's documentation page.
The latest video about the project at Google IO 2011.

#cwallenpoole tells how to get the js code.. simply open it in browser and if it is minified simply include (copy contents of js file) it in a script tag in html doc, go to chrome dev tools, open the scripts pane and navigate to the copy pasted script source and press the curly brackets at the bottom bar of dev tools and see the magic :)

You can get the source of any JavaScript file by simply going to that URL -- this is one from StackOverflow: http://cdn.sstatic.net/js/stub.js?v=845b73ac2eff
The problem, of course, is that it is minified when viewed that way, which leads to long, annoying headaches, but it is still accessible.