0

I am trying to use the Bootstrap 5 library in the chrome extension. So I am adding the bootstrap 5 (CSS and js) files with a manifest to the content script but it conflicts with the main CSS file on some sites.

content_scripts": 
    [{
      "matches": ["*://*.amazon.com/*"],
      "js":["bootstrap.bundle.min.js","injection.js"],
      "css":["bootstrap.min.css"]
    }]

When I try to use bootstrap for example on amazon.com, some CSS elements conflict. I am trying to solve the problem with an artificial solution by commenting on some Bootstrap CSS codes.

I couldn't find any details about it. If there is a better solution or if the way I tried it is wrong, could someone tell me the logic of it or help me with another solution?

How it should be

Css current solution

EST11
  • 3
  • 1

1 Answers1

0

I don't think there is a way to avoid the CSS conflicts in the content script. I think you can build a namespace bootstrap version. Please check this. Separate content script css from site css?

WebEXP0528
  • 561
  • 3
  • 9