2

I intend to modify the display of existing websites.

For example, when Google returns search results, can I customize the web page displaying (such as adding some bubble visualizations onto that page's blank places) ? Could it be done using browser plug-in or extension?

Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.

DehengYe
  • 619
  • 2
  • 8
  • 22
  • Here is a working example for firefox. Download and install the xpi. It injects images and a div into bing.com https://gist.github.com/Noitidart/9287185#file-bootstrap-js-L49 if you want to modify it, just modify the hostname and add stuff in addDiv and remove stuff in removeDiv. This is kind of complicated as its pure bootstrap. You can use firefox-addon-sdk which is like a few lines of code: https://developer.mozilla.org/en-US/Add-ons/SDK – Noitidart Feb 02 '15 at 09:43
  • Thanks for your great example. I have followed the basics of packaging an add-on to a xpi file based on the link you gave. It involves a main.js. I copied the contents of bootstrap.js into main.js, which does not work. Would you help with how I can use your bootstrap.js file in more detail? – DehengYe Feb 03 '15 at 03:44
  • This code won't work from main.js as main.js is meant for SDK addons, so syntax is a bit different. – Noitidart Feb 03 '15 at 04:30
  • Thanks. I modified hostname from bing.com to google.com, compress the three files to .zip, and rename it to .xpi, and it works. – DehengYe Feb 03 '15 at 05:28
  • Btw, can Firefox extension talk to a backend server through Java Servlet? I mean, the frontend is for visualization using JavaScript, while backend is powered by Java. – DehengYe Feb 03 '15 at 08:05

1 Answers1

3

Could it be done using browser plug-in or extension?

Yes. But you don't want to write a browser plug-in. They're fairly complicated to write and users are reticent to install them (with good reason) Further, you'd have to write two, as Mozilla and Google can't agree on a format (Chrome is removing the venerable NPAPI, but Mozilla won't implement Google's PPAPI, claiming that it's a moving target with inadequate documentation).

Based on my knowledge, a browser extension, such as firefox or chrome extension, is usually for adding tiny icons to the address bar.

No. Firefox add-ins and Chrome extensions can do a lot more than that, including modifying the page once it's rendered.

So you'll probably want to write a Firefox add-in and a Chrome extension. (Sadly, yes, that's two codebases to maintain, although they use similar technologies — HTML, CSS, JavaScript — so you can share a bit between them.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Thanks for your great and quick answer. – DehengYe Feb 02 '15 at 08:21
  • Just wanted to add that the easiest way to write a Firefox extension for your particular use case, i.e. modifying web site content on the fly, is [Add-on SDK](https://developer.mozilla.org/en/Add-ons/SDK) with a [`PageMod`](https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod). You could also write non-SDK (XUL) add-ons or plain restartless add-ons, however there is a much steeper learning curve there. – nmaier Feb 02 '15 at 10:23
  • Thanks for your suggestion. Seems like Firefox extension is a better choice than Google-chrome extension. Btw, can Firefox extension talk to a backend server through Java Servlet? – DehengYe Feb 03 '15 at 05:30
  • Actually, the answer to the question "could it be done using a browser plug-in" is no. Plugins can't just arbitrarily rewrite pages. Without something (an extension) adding code to the page, the plugin wouldn't be instantiated at all. – smorgan Feb 04 '15 at 02:53