How to display popup with html in firefox bootstrapped extensions? - firefox

I developed a firefox bootstrapped extension (without add-on sdk). I need to display a popup with html content, something like panel in add-on sdk. Also, it is necessary that the extension could interact with content in the popup. Also, I need a way to display html content in separate tab and interact with this content. So what can I use to implement what I need?

You can append an iframe to that panel, and then load a page into that iframe. That's what I did in this simple addon here - https://github.com/Noitidart/AwesomeBar-Power-Tip/
Here's another gist that does something similar - https://gist.github.com/Noitidart/9445992
I think this is how the SDK does it as well.

but I can not understand how it is possible to implement the interaction between expansion and content inside the panel.
The panel or its frameLoader property should have a messageManager, which can be used to load frame scripts and pass messages to them.

Related

Opening a bar on top of the page with firefox sdk

I am making a firefox pluggin and I want to open a "topbar" on a few websites. Realy, it would be a few informations about the curent page a link back to my own website. What would be te best way to do that ?
My first idea was to use content script, but that seems to be a very bad practice. I also read about panels, here are my questions :
How can I add my pannel just under the adressbar ?
How can I only open in it on the website I need ?
thx.
Using content script is completely fine.
It is modern, simple, less-code, more compatible way
to add top-panel to some web pages.
Also, code of content script is not injected to the web page, it just uses the dom and context; page script has no access (if you do not provide it explicit) to content script.
The only possible disadvantage is that panel would not look like native part of the browser.
If I convienced you to use content script:
The module you really need in your plugin page-mod
Using Add-on Builder you make have your plugin in a day

how to enable Safari Extensions when using a web view

I am using a Web view in my application, instead of open a Safari browser instance, so I noticed that Safari extensions doesn't work. Is there a possibility to enable this feature when using a custom web view in a Cocoa Application?
The reason by which I need to use Safari extensions is to inject javascript to whatever web page is loaded at one moment, so if is there another approach to do it without using extensions, welcome any suggestions or samples.
There's no way to use Safari extensions in a web view.
If your script isn't too big, how about formatting it as a "javascript:" bookmarklet and setting the web view's location to it?
[Edit: Stuff below added in response to questioner's request for "a bit more about that technique".]
Say you want to change the background color of the page to yellow and all the text to red. The javascript to do that would be something like:
document.body.style.backgroundColor = "yellow";
document.body.style.color = "red !important";
To turn the script into a bookmarklet, you just:
Wrap it in an anonymous function,
remove all line breaks,
(optionally) remove any unnecessary spaces,
url-encode it,
and prefix the whole thing with "javascript:".
So, the example would become:
javascript:(function(){document.body.style.backgroundColor%3D%22yellow%22%3B%0Adocument.body.style.color%3D%22red%20!important%22%3B%0A}());
Then you can set the webview's window.location to that string to "run" the bookmarklet.
Here is a page with an automatic script to bookmarklet converter that seems to work.

WebBrowser content manipulation

I am using a WebBrowser control and loading a website. However, there is a button whose placement i need to change via JavaScript.I dont have any control over that website. Once that website is loaded in WebBrowser control, I need to run my custom JS so that i can change the position of button.
How do i do this ?
If you have no control over the website/contents, there is no elegant way to do this. Methods like InvokeScript work only with scripts available in the loaded document. See this
A crude and expensive way would be to get the website's content(html), and adding your script, loading it from the storage or data structure you've used and displaying the content, with access to the function via InvokeScript. I will not recommend it.

How do I let a user browse HTML/WebSite content without launching the browser (need an inline browser)?

I'm creating an app on Windows Phone 7 that lets folks read offline HTML content. Is there a way to show an inline browser or HTML viewing control?
The WebBrowser control allows you to display arbitrary HTML.
There are two methods on the WebBrowser control you can use to display HTML:
Navigate() will display the contents of a file located at the supplied URL. This file can be in IsolatedStorage or on a server.
NavigateToString() will display the html string you give it.
In your case I'm guessing you'd use a WebClient object to download the webpage to offline storage, then the Navigate method to display it.
However, the benefit of NavigateToString is that you can munge the string on the way in to do some cool (or essential) stuff like style the page so it matches perfectly with the current phone theme, or catch all link clicks and make them pop in the external browser (otherwise they load in the very same WebBrowser control).
I've documented the details of styling and link clickery here.
Yes, there's a WebBrowser control in Microsoft.Phone.Controls
If you then save your (offline) files to IsolatedStorage you can then view the file via a call like this from code:
webBrowser1.Navigate(new Uri("offline-file-name.html", UriKind.Relative));
Things to note:
You can use directories within isolated storage. Just specify the whole path in the Uri.
If navigating between offline pages, all paths must be relative.

Manipulate Html from Firefox Extension

I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.

Resources