+ ) => {
+ setHighlightedStyles(e.target.value);
+ };
+
return (
@@ -49,6 +63,21 @@ const Popup = () => {
onChange={handleKeywordsChange}
/>
+
+
+
+
+
+
+
diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
index e53cbc1..897e1d1 100644
--- a/src/pages/popup/index.css
+++ b/src/pages/popup/index.css
@@ -1,6 +1,6 @@
body {
width: 400px;
- height: 300px;
+ height: 440px;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
diff --git a/src/services/constants.tsx b/src/services/constants.tsx
index 4f7f72c..103c353 100644
--- a/src/services/constants.tsx
+++ b/src/services/constants.tsx
@@ -1,3 +1,6 @@
export const SETTINGS_DEBUG = "settings.debug";
export const SETTINGS_KEYWORDS = "settings.keywords";
+export const SETTINGS_HIGHLIGHTED_STYLES = "settings.highlighted-styles";
+export const SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE =
+ "background-color: yellow;";
export const OBSERVABLE_DEBOUNCE_TIME_MS = 500;