1

I'm trying to write a Chrome extension where part of the action is changing style of elements to those provided in css file. CSS content is internal for extension and not not downloaded from anywhere. It is exactly in the same location as any other file for extension.

files are following: manifest.json

{
  "name": "Test extenstion",
  "description": "Test Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "permissions": ["storage", "activeTab", "scripting"],
  "host_permissions": ["*://*/*"],
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  }
}

background.js:

chrome.action.onClicked.addListener((tab) => {
  chrome.scripting.executeScript({
    target: {tabId: tab.id},
    files: ['detection-script.js']
  });
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
    if (changeInfo.status === 'complete') {
        chrome.scripting.insertCSS({
            target: { tabId: tabId },
            files: ['./elements-highlight.css']
        })
            .then(() => {
                console.log("INJECTED THE FOREGROUND STYLES.");
            })
            .catch(err => console.log(err));
    }
});

In detection-scrpt.js I'm just running script that updates style of each element to style defined in elements-highlight.css. This part is working, I can see styles of element on the website being updated. What I cannot get is why CSS is not injected? I figured that I had to add host_permissions to remove error:

Extension manifest must request permission to access the respective host. But beside that I'm not sure what might be missing.

EDIT based on wOxxOm's comment

Dropped only chrome.tabs.onUpdated and updated manifest.json like this

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {},
  "permissions": ["storage", "activeTab", "scripting"],
  "host_permissions": ["*://*/*"],
  "icons": {
    "16": "/images/get_started16.png",
    "32": "/images/get_started32.png",
    "48": "/images/get_started48.png",
    "128": "/images/get_started128.png"
  },
  "content_scripts": [
  {
    "matches": ["*://*/*"],
    "css": ["elements-highlight.css"]
  }]
}

I don't see any change in behavior. Still no change in CSS, beside adding new class to elements.

sebap123
  • 2,541
  • 6
  • 45
  • 81
  • Remove chrome.tabs.onUpdated entirely and simply declare `css` with that file in `content_scripts`, [example](https://stackoverflow.com/a/7568862). – wOxxOm Mar 13 '22 at 22:38
  • @wOxxOm thanks. I've tried updating it, but behavior is still the same. – sebap123 Mar 14 '22 at 00:03
  • 1
    It means 1) you didn't reload the extension on chrome://extensions page or 2) the tab you're testing is not a web page i.e. not http/https or 3) the css is incorrect or 4) its selectors are overridden by the page or 4) detection-script.js is incorrect. – wOxxOm Mar 14 '22 at 00:28
  • @wOxxOm I have been refreshing, but for some reason re-installing (re-loading) plugin worked. – sebap123 Mar 14 '22 at 00:31

0 Answers0