Extension Trying To Inject CSS into Web Page Instead Injects CSS Into Itself

Question

I've been teaching myself how to create extensions, with a view towards using them for CSS injection (and eventually SVG injection with CSS as the carrier, but that's a problem for another day).

Here's my current code:

manifest.json

{
  "name": "SVG Extension Attempt",
  "version": "1.0",
  "description": "SVG filter please...",
  "permissions": ["activeTab", "declarativeContent", "storage"],
  },
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
 {
    "16": "images/get_started16.png",
    "32": "images/get_started32.png",
    "48": "images/get_started48.png",
    "128": "images/get_started128.png"
  },
 
  "manifest_version": 2

}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 60px;
        outline: none;
    background-color: magenta;
      }
    </style>

  </head>
  <body>
    <button id="changeColour">Change colour</button>
 <script src="popup.js"></script>
  </body>
</html>

popup.js

let changeColour = document.getElementById('changeColour');

function addStyleString(str) {
 var node = document.createElement('style');
 node.innerHTML = str;
 node.setAttribute('id', 'inserted-style');
 document.body.appendChild(node);
}
 
changeColour.onclick = addStyleString('body {filter: blur(5px);}');

So far I've managed to get the extension to run but discovered that, rather than injecting the CSS snippet into the body of the current webpage, it instead injects it straight into the body of popup.html. See gif:

I know this has something to do with popup.js being called in popup.html, but I can't see a workaround myself at the moment - but I just know it's going to be something mind-blowingly simple.

(P.S. it's only these three files because this is basically a practice to learn how to use this injection technique)

Possible duplicate of [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) — wOxxOm, Dec 18 '18 at 07:45
@wOxxOm thank you for letting me know. I'm glad I asked seperately however as the phrasing in that version's answer would just have confused me! — Isabelle May, Dec 18 '18 at 12:13
It just retells basic facts from the [extension architecture overview](https://developer.chrome.com/extensions/overview#arch) so you might want to read the original instead. — wOxxOm, Dec 18 '18 at 12:51

score 2 · Accepted Answer · answered Dec 18 '18 at 01:06

2

You need to execute the code in tab. To do so change your popup.js like this:

let changeColour = document.getElementById('changeColour');

function addStyleString(str) {
  // preparing the code as a string
  var code = `
    var node = document.createElement('style');
    node.innerHTML = '${str}';
    node.setAttribute('id', 'inserted-style');
    document.body.appendChild(node);
  `;

  // executing the code
  chrome.tabs.executeScript(null, {code: code});
}

changeColour.onclick = addStyleString('body {filter: blur(5px);}');

answered Dec 18 '18 at 01:06

Kosh

14,657
2
15
31

1

Why not using directly [`chrome.tabs.insertCSS`](https://developer.chrome.com/extensions/tabs#method-insertCSS) ? – Iván Nokonoko Dec 18 '18 at 10:50
This worked! All I need to work out now is how to make it activate when pressing the pink button in the extension's document, rather than clicking on the extension icon itself. Thank you very much, this is working well and I understand how it comes together. – Isabelle May Dec 18 '18 at 12:14
@IsabelleMay, happy to help. – Kosh Dec 18 '18 at 14:00

Extension Trying To Inject CSS into Web Page Instead Injects CSS Into Itself

1 Answers1