I am new to Firefox add-on development and planning to write a Firefox Mobile add-on which would optimize some page content to be more suitable for viewing on mobile devices.
I have studied how to create an add-on which intercepts page load events...
https://developer.mozilla.org/en/XUL_School/Intercepting_Page_Loads
... and this is quite straightforward for this far.
However, I'd also like to interact with HTML content which is loaded / displayed outside the normal HTML load chain. This would be namely Google Reader content which Google Reader fetches using AJAX.
Does Firefox provide any hooks to post-process content injected to pages via innerHTML and such? Also, as an alternative I have been thinking about capturing click/touch events and rerun the processing after each event: when you click an article in Google Reader it will open a new view containing the article content.
How other add-ons generally do this?
The XUL School and the XUL Tutorial content on MDC will help you get an understanding of how to use XUL to build user interfaces. The MDC Code Snippets section has code samples showing some of the APIs available to add-on developers.
One thing you should note is that Firefox Mobile is a multi-process application: The UI is in the main process and the web content (the tabs) are all in a second, child process. This is different than Firefox Desktop, which is a single process application.
We have some notes on how to build multi-process add-ons [1] and I made some video tutorials [2] to help as well.
Interacting with web content in Firefox Mobile means you need to create a script that runs in the child process. The script has direct access to the webpage's DOM window and DOM document. If your add-on has UI, you will use messages to communicate between the two processes. The links [1] and [2] give details on how to do both DOM interaction and sending messages.
Listening for post-load content injection is tricky. You have no additional hooks beyond those a normal webpage would use. You could use polling (check for changes using a setInterval) or you could listen for DOM mutation events (which are bad for performance).
Firefox Mobile developers hangout on Mozilla's IRC in the #mobile channel.
[1] https://wiki.mozilla.org/Mobile/Fennec/Extensions/Electrolysis
[2] http://people.mozilla.com/~mfinkle/tutorials/
Related
I want to develop an app (for Chrome desktop) that will retrieve data from different webpages the user surf to and aggregate it, or inject some added JavaScript functionality to those pages, later on showing the user statistics about the webpages he surf to. Like how many pages the user have been having more that 3 images in them.
Now, I know Chrome Extensions can Inject JavaScript code and therefor also retrieve data, but I want my App to be a Chrome App. Can it also pull data from WebPages and / or Inject JS to those pages ?
Thanks.
A Chrome App is, by design, isolated from the browser. You can't enumerate tabs, inject content scripts, etc. at all, as you can see from an entirely different list of available APIs.
While you could embed a pseudo-browser in your app using the <webview> tag, it's going to be hard to convince the user to use your limited browser over "real" Chrome.
If you want to interact with a browser, you need an extension. If you also really need Chrome App capabilities you'll need both separately, and they can talk to each other.
I am trying to learn what could be the best ways of developing user interface for chrome extension for my application. The 2 approaches that I have come across are i)Using a browser action with default_popup html page or ii) Injecting some component into the page that is loaded in the tab. First approach is pretty straightforward but has some restricted use (like it is destroyed on tab/window switch which is useful in the context of my application). Coming to the second approach, it seems it requires every component which can be injected to be listed under web_accessible_resources. As the extension UI gets complex, this list is bound to increase. But surprisingly, Pocket extension's manifest does not seem to list any js files or html files though it does not use a popup page too. How does it work? Is there any other way of creating the user interface too?
Have you checked on the documentation regarding chrome.windows API? This API will allow you to create new windows and tabs in the browser, so you can create the html content from your extension. All you'll need is declaring the pertinent permissions on the manifest file. You can read more information here: https://developer.chrome.com/extensions/windows
I'm using
window.postMessage({message: "Hello !"}, url);
to send a message from a Chrome Extension (i don't know if this is relevant) to a specific page in a window with multiples opened pages. I noticed that sometimes i have TWO pages with the same URL.
I have a simple question:
How can i be sure to which page is postMessage sending the message ?
I want to send the message to only one tab. Can i use anything else apart from the url to identify the it?
Thanks in advance !
Considering that you said you can modify the remote website's code, and I don't see how to fix the postMessage solution, here are a couple of alternatives. I would love to know if there is a way to fix the postMessage approach, as it is the recommended one from the docs!
First off, you will need to coordinate your scripts from a central background page, which can keep track of open tabs.
Custom DOM events
This is an old recommendation from Chrome docs, that was replaced with window.postMessage example. It is described here (disregard the old chrome.extension.connect API) and consists of firing a custom event in shared DOM.
So, a sample architecture would be a background page deciding which tab to post message to, and sending that tab a message via chrome.tabs.sendMessage, to which your content script listens with chrome.runtime.onMessage. The tab's content script can then communicate with the page using the above custom event technique.
One possible approach to keeping tack of tabs: have the tabs permission to be able to enumerate all open tabs with the chrome.tabs API. Your background page can then decide which tab to message based on URL.
Another possible approach, to eliminate need for the scary tabs permission, is to have your content scripts report to the background page with chrome.runtime.connect as soon as they are initialized. The background page then can keep track of all active instances of your script and therefore decide which tab to message.
Webpage connecting to your extension
This is a "modern" way of doing communication with one exact extension.
It is described in the Chrome docs here. You can define your extension as externally connectable from your webpage, and your webpage initiates a port connection with your background script.
Then, as above, you can track live ports and use them for communication, cutting out the content script middleman.
I'm building a single-page Dart web app that will essentially consist of 1 Dart file (cross-compiled to JS) and 1 HTML file that has several "views" (screens, pages, etc.). in it. Depending on what "view" the user is currently located at, I will hide/enable different DOM elements defined inside this HTML file. This way the user can navigate between views without triggering multiple page loads.
I would still like to use each browser's native history-tracking mechanism, so that the user click can the back- and forward-buttons in the browser, and I'll have a Dart Historian object figure out what view to load (again just hiding/enabling DOM elements) depending on what URL the browser has in its history.
I've pretty much figured everything out, with one exception:
Say the user is currently "at" View #3, which has a URL of, say, http://myapp.example.com/#view3. Then they click a button that should take them to View #4 at, say, http://myapp.example.com/#view4. I need a way, in Dart, to tell the browser to:
Set http://myapp.example.com/#view4 in the browser URL bar
Add http://myapp.example.com/#view4 to the browser's history
If not already enabled, enable the browser's back button
I believe I can accomplish #1 above like so:
window.location.href = "http://myapp.example.com/#view3";
...but maybe not. Either way, how can I accomplish this (Dart code communicates with browser's history API)?
Check out the route library.
angular.dart also has it's own routing mechanism, but it's part of a much larger framework, so unless you plan on using the rest of it, I would recommend the stand-alone route library.
If you want to build your own solution, you can take a look at route's client.dart for inspiration.
There are two methods of history navigation supported:
The page fragment method that you've used. Reassign the window location to the new page fragment: window.location.assign(newPathWithPageFragment). Doing this will automatically add a new item to the browser history (which will then enable the back button).
The newer History API, which allows for regular URLs without fragments (e.g. http://myapp.example.com/view3. You can use window.history to control the history.The History API is only supported by newer browsers so that may be a concern (although given that dart2js also only supports newer browsers, there are probably not too many instances of a browser that dart2js supports that doesn't support the History API).
One issue you will have to handle if you support History API is the initial page load. When a user navigates to http://myapp.example.com/view3, the browser expects to find a resource at that location. You will have to setup your server to respond to any page request by serving your Dart application and then navigate to the correct view on the client-side. This issue will apply whether you use route, angular.dart, or build your own solution, since this is a general server-side issue and the above are all client-side libraries.
I want to build a chrome extension like rapportive.com. I'm new to Chrome extensions and Gmail Content Script. Can any one please suggest how to go about this?
Currently I'm reading Google's Gadget docs.
Here are some notes to get you started. There are more robust ways to build this, but this is the "hello world" of the functionality you are talking about:
You will need to define a content script that you add to the context of gmail. This part is pretty easy and can work with any of the content script examples available in the Google's documentation. You should read and learn about what it means to be a content script.
The content script will need to know where to look inside gmail for an email address. This address will be used to grab the social media information on the user. You message this email address from the content script to the extension's background page.
The background page will need to have social media integration that the user pre-configured. Basically, you need to plug the background page into Facebook's/Twitter's/LinkedIn's APIs and use their APIs to collect information about the email address.
The background page will then message the content script you added to gmail with the social media details for the email address
The content script then modifies gmail's user interface to contain your social media details.
The greatest long-term challenge you will face is that gmail's layout will change unexpectedly and break email discovery or the modified UI. Both issues either require some cleverness to solve, or will require you to stay up at night wondering whether Google will suddenly break your extension.
Good luck!
I don't know what google gadget is and link you provided gives 404 but I don't think you even need this.
What you need is a content script that is injected into gmail page where it adds a panel. So, start with reading about how to create a Chrome extension that is using content scripts.
There is a new SDK for modifying the DOM elements in gmail: https://www.inboxsdk.com/docs/
They have a useful API for adding buttons and other elements.