How to manipulate the DOM through an extension?

Question

How to manipulate the DOM through an extension?

Navigation

#1 by (2 votes)

1

I'm starting to work with extensions in Google Chrome and after some time reading tutorials I have so far been unable to access anything in the DOM of the page. I need to modify the CSS of the page or execute some script inside it. Could anyone give me some example?

I'm looking for something like this:

index.html

<html>
   <head>
       <title>teste de extensão</title>
   </head>
   <body>
      <button id="btn1" onclick="fundoAzul()">fundo azul</button>
      <br>
      <button id="btn1" onclick="fundoVermelho()">fundo vermelho</button>
      <script>
          function fundoAzul(){
            document.querySelector('body').style.background = 'blue';
          };
          function fundoVermelho(){
            document.querySelector('body').style.background = 'red';
          };
      </script>
   </body>
</html>

In the tutorials I saw, one of them showed me how to do a alert (I can not remember which one now) but my alert was executed within the extension and not on the current page.

javascript

asked by anonymous 15.08.2015 / 17:22

1 answer

How do I use a mixin created in another file? Methods ActionResult Asp.net MVC

score 2 · Accepted Answer

You need to use Content Scripts . Here's a basic example:

manifest.json :

{
    "name": "Exemplo StackOverflow",
    "description": "Demonstração de como utilizar content_script",
    "version": "0.1",
    "content_scripts": [{
        "matches": ["http://pt.stackoverflow.com"],
        "js": ["script.js"],
        "run_at": "document_end"
    }],
    "manifest_version": 2
}

script.js :

document.body.style.background = 'red';