7

I am attempting to inject CSS code into the active tab from a chrome extension, yet nothing I have looked at online so far has worked for me. I am fairly new to all of this, so apologies if my question is a bit naive and I am just missing something basic. Here is what I have come up with so far:

function inject_1(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    css = 'body { background-color = "red" !important; }';
    chrome.scripting.insertCSS(
     {
       target: {tabId: tabs[0].id},
       css: css,
     }, function() {
       if (chrome.runtime.lastError) {
         message.innerText = 'There was an error injecting css : \n' + chrome.runtime.lastError.message;
       }
     });
  });
}

Here is a secondary method I tried:

function inject_2(){
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.scripting.executeScript(
     {
       target: {tabId: tabs[0].id},
       files: ["inject.css"],
     }, function() {
       if (chrome.runtime.lastError) {
         message.innerText = 'There was an error injecting css : \n' + chrome.runtime.lastError.message;
       }
     });
  });
}

Neither function returns an error message, but they also don't change the webpage at all. I would greatly appreciate any help with this (rework of my code or something completely new to try). Thanks.

liamhp
  • 111
  • 1
  • 7
  • 1
    You probably didn't add the URL to `host_permissions` in manifest.json. – wOxxOm Apr 09 '21 at 16:08
  • My current permissions are: `"permissions": ["storage", "activeTab", "scripting", "tabs", "https://www.google.com/"]` and I added new host permissions `"host_permissions": ["activeTab", "tabs", "https://www.google.com/"]` in response to your comment. It still doesn't work. Sidenote: what is the difference between permissions and host permissions? – liamhp Apr 09 '21 at 16:41
  • You need to split permissions and host permissions, see [an example](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#host-permissions). – wOxxOm Apr 09 '21 at 16:55
  • Do you mean like this: `"permissions": ["storage", "activeTab", "scripting", "tabs"], "host_permissions": ["https://www.google.com/"]` to have the program work on google? – liamhp Apr 11 '21 at 22:24
  • Yes, see the example I've linked and read the entire migration guide, too. – wOxxOm Apr 12 '21 at 02:38
  • I am facing same issue but I am getting error "cannot access chrome:// URL" – Nizar Kadri Apr 12 '22 at 14:07

2 Answers2

12

Bit late, but I got this working for a personal project; maybe try something to the effect of:

...
    chrome.scripting.insertCSS({
        target: { tabId: tabs.id },
        files: ["inject.css"]
    });
...

You can specify files for insertCSS as you've done for executeScript in your secondary method.

Alpine
  • 533
  • 1
  • 6
  • 18
  • I think what makes things confusing is that `executeScript`'s [ScriptInjection](https://developer.chrome.com/docs/extensions/reference/scripting/#type-ScriptInjection) says that it accepts CSS files, which does not appear to be the case. – Teepeemm Mar 28 '22 at 16:16
2

I would just add a .css file to the extension.

style.css

body {
  background-color: red !important;
}

and then added it to the content_scripts in manifest.json e.g.

...
"content_scripts": [
  {
    ...,
    "css": ["style.css"]
  }

I'm also not sure if your 'body { background-color = "red" !important; }' shouldn't be 'body { background-color:red !important; }'

Vulwsztyn
  • 2,140
  • 1
  • 12
  • 20
  • I do have that (being "css":["inject.css"]) included in my manifest already and the css edit suggested above (replace "=" with ":") is correct (was a typo, my bad) but didn't end up making a difference. The CSS injection still doesn't work. – liamhp Apr 09 '21 at 16:37
  • Are you sure the extension is loading? – Vulwsztyn Apr 09 '21 at 16:40
  • Yes, it is definitely loading in, – liamhp Apr 11 '21 at 22:23