0

There is a website called x. Upon opening website x it makes a request for a css file from website y. I am making a darkmode chrome extension for website x. I want to redirect the request website x is making to getting the css file data from my extension (website z). But I don't want to open the css file (I redirect to), instead just make the website get the data from the css file. Is it possible? How can I achieve this?

More info: chrome manifest version: 3 For the redirection: chrome.declarativeNetRequest API

I tried making a basic redirect rule with the chrome.declarativeNetRequest api. I expected the website to get the data from the file I redirected it to. But instead upon opening the website, the css file opened (as raw text).

destiny
  • 1

2 Answers2

1

You can use extensionPath to specify an override file. Note that in case the CSS is on another server, host_permissions must include it in addition to the site.

manifest.json

  "permissions": ["declarativeNetRequestWithHostAccess"],
  "host_permissions": ["*://example.com/"],
  "web_accessible_resources": [{
    "resources": ["override.css"],
    "matches": ["*://example.com/*"]
  }],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "rules",
      "enabled": true,
      "path": "rules.json"
    }]
  }

rules.json

[
  {
    "id": 1,
    "condition": {
      "urlFilter": "foo.css",
      "initiatorDomains": ["example.com"],
      "resourceTypes": ["stylesheet"]
    },
    "action": {
      "type": "redirect",
      "redirect": {
        "extensionPath": "/override.css"
      }
    }
  }
]
wOxxOm
  • 65,848
  • 11
  • 132
  • 136
0

You do not want to do a redirection. The CNCSS stands for cascading, just by adding your own rules in the page you will override the ones that they are requesting. You can just ship the CSS with your extension, and have it loaded on the page.

Patrick
  • 13,872
  • 5
  • 35
  • 53