How to modify the HTML document via an extension?

Question

I would like to make a button appear on the site I developed, but only for those who have the extension.

I have the CSS, HTML and Javascript codes to generate the button. The functionality of the button is ready, I just need to do the extension.

Can you help me?

Answer 1

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

Mozilla provides a SDK which includes Apis for the development, execution and testing of extensions.

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

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

Initiating

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

> jpm init

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

There is no need to make any modifications to the package json. for now. And it won’t even be necessary if the only thing you need to do is modify the html of a page to create a button.

The only thing you need to check is if the attribute main is aimed at the file index.js which was created in the directory, it defines which will be the first file to run.

Creating a button on page 'x'

One of the modules in the SDK is the page-mod which, as the name suggests, allows you to modify pages. Taking the example of Stackoverflow, to insert a button on the page, the index.js could turn out 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>")'
});

Just this. Running the command jpm run 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 CSS rules from the site.

As you said already have the script that controls the button, you can change the contentScript for contentScriptFile to include the entire archive.

In the extension directory, create a folder called date and in any extension module it is possible to use the alias ./ to get the files in the folder date.

So in minhaextensão/data/ you would have your Javascript file that controls the interaction with the button. And now 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, it is also possible:

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

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

Answer 2

Chrome extension

1. Create an empty directory which will contain the extension files.
2. Create the manifest.json file in this directory.
3. Add to the directory a Javascript file containing the code that will insert the button at the bottom of the page.
4. Add the jQuery script file to the archive, which will be used by the extension.

The directory representing the extension should be left with the following content:

Your manifest file should look like this:

Filing cabinet manifest.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 archive main.js 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://Xtensions/, click "Load Expanded Extension..." and select the extension folder.

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