Geek Answers Handbook

Dynamically change web page content with Firefox extension using Javascript without Greasemonkey

I want to change the contents of web pages to place an element that changes to fit the web page.

eg. I would like to display a div element with the text "You are on http://www.google.com " when the user is on the website http://www.google.com , but when the user goes to http: // www .yahoo.com , the div should change and display "You are at http://www.yahoo.com ".

What I'm looking for is a kind of example to start with (I hope this is not the first person to think of this trick).

+5
source share
5 answers

You are looking for an existing Firefox add-on called Greasemonkey (very popular among java script geeks). It allows you to dynamically change the contents of a web page using java script through userscripts .

There are many custom scripts already available at http://userscripts.org/ for your purpose. Study them and change for your use.

+1
source

XUL ( XBL binding), XUL-DOM-. HTML- HTML-. . Extensions-section , .

+1

- , URL. , .

, , , -.

  • .
  • XPI starter.zip
  • starter.zip "showUrl", .
  • Overlay.js ( showUrl/content/)

  • | ! | ! :

    XULSchoolChrome.BrowserOverlay = {
    /**
     * Says 'Hello' to the user.
     */
    sayHello : function(aEvent) {
        // code starts here.

  • "sayHello"

    sayHello : function(aEvent) {
    try
    {
        // gBrowser is a global value
        var document = gBrowser.contentDocument;


        var doc_bodies = document.getElementsByTagName('body');
    var doc_body = doc_bodies[0];

    var first_element = doc_body.firstChild;

    var url_div = gBrowser.contentDocument.createElement('div');
    url_div.id = 'added-by-firefox-extension';
    url_div.innerHTML = document.URL;

    // add the url at the top of the document body
    doc_body.insertBefore( url_div, first_element );
    // add the url at the end of the document body
    doc_body.appendChild( url_div );
}
catch(e)
{
    alert(e);
}

  • showUrl

  • zip xpi
  • xpi firefox
  • -
  • | ! | , !

For me, the main cause of the pain was figuring out how to use gBrowser to access a web page.

+1
source

You can do something like this:

Start with two hidden divs: the first one will have a js condition (for example, onChange), which will be written with the site URL (after loading js). Then js changes innerHTML (or just the class if you use css to make visible label), which will contain the value of the first div.

It is quite simple :)

0
source

More articles:


All Articles