Currently, I am in the process of creating a chrome extension using various tools like React, Typescript, TailwindCSS, and a custom Webpack configuration. To enhance user experience, I have modified the default action in manifest.json so that clicking on the toolbar icon triggers a message opening a content script, which then injects an overlay onto any visited site.
However, I'm encountering an issue where my Tailwind styles are affecting every website I visit, sometimes causing unintended consequences. For example, Google search websites display smaller titles, while on Reddit, my extension results in much smaller text than desired.
My goal is to restrict the application of my extension styles solely to the overlay I've created. I attempted to use React Shadow DOM, but it didn't yield the expected outcome, indicating that I might have made an error during implementation.
Below are the key files involved:
manifest.json
{
"name": "Intro",
"description": "Intro extension",
"version": "1.0.0",
"manifest_version": 3,
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
},
"action": {
"default_title": "Intro",
"default_icon": "icon.png"
},
"permissions": ["alarms", "contextMenus", "storage"],
"options_page": "options.html",
"background": {
"service_worker": "background.js"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["contentScript.js"]
}
]
}
contentScript.tsx
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import { Messages } from '../utils/types';
import '@fontsource/roboto';
import { useDelayUnmount } from '../hooks/useDelayUnmount';
import App from '../App';
import './contentScript.css';
// Remaining code for ContentScriptOverlay component
contentScript.css
@tailwind base;
@tailwind components;
@tailwind utilities;
#intro-extension ::-webkit-scrollbar {
width: 0px;
background: transparent;
}
.overlay {
width: 376px;
z-index: 9999;
position: fixed;
border-radius: '6px 0px 0px 6px';
}
@keyframes inAnimation {
0% {
right: -376px;
}
100% {
right: 0;
}
}
@keyframes outAnimation {
0% {
right: 0;
}
100% {
right: -376px;
}
}
I would greatly appreciate any assistance or guidance provided!