indent背景cssの挿入

Author: penicillin0

js/scrapboxCssScript.js

@@ -64,7 +64,7 @@ const insertIndentCSSRule = (scrapboxIndentOptions) => {
   });
 };
 
-const storageAttachment = () => {
+const makerAttachment = () => {
   chrome.storage.local.get('scrapboxIndentOption', (result) => {
     const scrapboxIndentOptions = result.scrapboxIndentOption;
     insertIndentCSSRule(scrapboxIndentOptions);
@@ -74,9 +74,35 @@ const storageAttachment = () => {
 // update
 chrome.runtime.onMessage.addListener((request) => {
   if (request === 'scrapbox_list_maker') {
-    storageAttachment();
+    makerAttachment();
   }
 });
 
 // initialize
-storageAttachment();
+makerAttachment();
+
+const indentColorCSS = [
+  `.indent-mark .char-index{
+      --scrapbox-indent-maker-opacity: 0.2;
+      --scrapbox-indent-maker-yellow:     rgba(255,255,64, var(--scrapbox-indent-maker-opacity)); 
+      --scrapbox-indent-maker-green:  rgba(127,255,127, var(--scrapbox-indent-maker-opacity));
+      --scrapbox-indent-maker-red:  rgba(255,127,255, var(--scrapbox-indent-maker-opacity));
+      --scrapbox-indent-maker-blue:   rgba(79,236,236, var(--scrapbox-indent-maker-opacity));
+  }`,
+  `.indent-mark .char-index:nth-child(4n+1) { background-color: var(--scrapbox-indent-maker-yellow) }`,
+  `.indent-mark .char-index:nth-child(4n+2) { background-color: var(--scrapbox-indent-maker-green) }`,
+  `.indent-mark .char-index:nth-child(4n+3) { background-color: var(--scrapbox-indent-maker-red) }`,
+  `.indent-mark .char-index:nth-child(4n) { background-color: var(--scrapbox-indent-maker-blue) }`,
+  `.indent-mark .char-index:nth-last-child(2) { background-color: transparent !important; }`,
+  `.indent-mark .char-index:nth-last-child(1) { background-color: transparent !important; }`,
+];
+
+const insertIndentColorCSSRule = () => {
+  // insert new rules
+  indentColorCSS.map((css) => {
+    console.log(css);
+    document.styleSheets[0].insertRule(css);
+  });
+};
+
+insertIndentColorCSSRule();