How to modify the HTML document through an extension?

Chrome Extension

The directory representing the extension should have the following content:

Yourmanifestfileshouldlooklikethis:

Archivemanifest.json

{"manifest_version": 2,

  "name": "Adiciona Botao",
  "description": "Adiciona um botao no final da pagina",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["jquery.js", "main.js"]
    }
  ]
}

In the main.js file you execute the code that adds the button:

$(document).ready(function() {
    $("body").append("<input type='button' onclick='alert(\"Botão adicionado por uma extensão!\")' value='Botão Dinâmico' />");
});

Now, to load the extension, go to the URL chrome: // extensions / , click "Load Expanded Extension ..." and select the extension folder.

Once this is done, just go to any page that contains http in the URL and the button will be added to the end of that page. Click the button to test it.

There is already a development answer for Chrome, so I'll try to explain in a simplified way how to do the same in Firefox.

Mozilla provides a SDK that includes APIs for development, execution and testing of extensions.

Development can be done in any editor of your choice, using languages such as Html, CSS and Javascript. Initialization, execution, and testing are done through jpm , which is a tool based on Node and that has replaced cfx after Firefox 38.

In the Mozilla documentation, there is a page explanation of how to install jpm , as well as the list of commands that can be used as execution parameters.

Getting Started

Having Node and the jpm module installed, create an empty directory. For a command line, navigate to the directory you created and run the command:

> jpm init

You will be asked for some information like extension name, description, author ... after inserting this information, in the directory, a "skeleton" will be created as a starting point for development.

You do not need to make any changes to package.json for now. And it will not even be necessary if the only thing you need to do is to modify the Html of a page to create a button.

The only thing you need to check is if the main attribute is pointed to the index.js file that was created in the directory, it defines what will be the first file to be executed.

Creating a button on the 'x' page

One of the modules in the SDK is the page-mod which, as the name suggests, allows you to modify pages. Taking StackOverflow as an example, to insert a button on the page, index.js might look like this:

let { PageMod } = require('sdk/page-mod');

PageMod({
   include: '*.stackoverflow.com',
   contentScript: 'document.body.insertAdjacentHTML("afterbegin", "<button>Botão criado pela extensão</button>")'
});

Only this. By running the jpm run command and navigating to the StackOverflow site, the button will be displayed at the top of the page:

In the example, the button even inherited the site's CSS rules.

As you said already have the script that controls the button, you can change contentScript to contentScriptFile to include the file completely.

In the extension directory, create a folder named date and in any extension module you can use the ./ alias to get the files in the date .

So, in minhaextensão/data/ you would have your Javascript file that controls the interaction with the button. And now your index.js would look like this:

let { PageMod } = require('sdk/page-mod');

PageMod({
   include: '*.stackoverflow.com',
   contentScriptFile: './meuscript.js'
});

If you want to import more than one script, you can also:

let { PageMod } = require('sdk/page-mod');

PageMod({
   include: '*.stackoverflow.com',
   contentScriptFile: ['./jquery.min.js', './meuscript.js', './meuoutroscript.js']
});