In the process of integrating the Bootstrap 5 library into a Chrome extension, I have encountered an issue where the CSS and JS files conflict with the main CSS file on certain websites. To address this, I have included the Bootstrap 5 (CSS and JS) files in the manifest of the content script. However, when attempting to utilize Bootstrap on sites like Amazon, conflicts with CSS elements arise.
content_scripts":
[{
"matches": ["*://*.amazon.com/*"],
"js":["bootstrap.bundle.min.js","injection.js"],
"css":["bootstrap.min.css"]
}]
To mitigate this issue, I have resorted to a temporary solution by manually commenting out certain Bootstrap CSS codes. Despite my efforts, I have not been able to find a definitive solution to this problem. I am seeking guidance on a better approach or assistance in understanding the logic behind the conflict and potential alternative solutions.