fix: background-image parsing error

Author: painty

package-lock.json

@@ -1,9 +1,9 @@
 import filterRules from './util/filterRules'
 import convLinkToText from './util/convLinkToText'
-import convUrlToAbs from './util/convUrlToAbs'
 import convTextToRules from './util/convTextToRules'
 import postTideCss from './util/postTideCss'
 import generateRulesAll from './util/generateRulesAll'
+import cleanHTML from './util/cleanHTML'
 
 type cssNodeObj = Awaited<ReturnType<typeof convTextToRules>>
 
@@ -116,25 +116,7 @@ async function getC($0: HTMLElement) {
       chrome.runtime.sendMessage({
         action: 'celebrate',
         css: postTideCss(data),
-        html: $0.outerHTML
-          .replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, '')
-          .replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, '')
-          .replace(/<link[\s\S]*?>/gi, '')
-          .replace(/(<img[^>]+src=(['"]))(.*?)(\2.*?>)/g, function () {
-            var src = convUrlToAbs(doc.location.href, arguments[3])
-            return arguments[1] + src + arguments[4]
-          })
-          .replace(/(<img[^>]+srcset=(['"]))(.*?)(\2.*?>)/g, function () {
-            var srcset = arguments[3].split(/,\s*/)
-            srcset.forEach(function (ele, index) {
-              var src = ele.replace(/([^ ]*)(.*)/, function () {
-                var _src = convUrlToAbs(doc.location.href, arguments[1])
-                return _src + ' ' + arguments[2]
-              })
-              srcset[index] = src
-            })
-            return arguments[1] + srcset.join(',') + arguments[4]
-          }),
+        html: cleanHTML($0.outerHTML, doc),
       })
     })
 }

src/content.ts

@@ -0,0 +1,28 @@
+import convUrlToAbs from './convUrlToAbs'
+
+function makeTagReg(tagName:string){
+  return new RegExp('<'+tagName+'[\\s\\S]*?>[\\s\\S]*?<\/'+tagName+'>','gi')
+}
+
+export default function (dirty: string, doc: Document): string {
+  return dirty
+    .replace(makeTagReg('script'), '')
+    .replace(makeTagReg('style'), '')
+    .replace(/<link[\s\S]*?>/gi, '')
+    .replace(/ on\w+=".*?"/gi, "")
+    .replace(/(<img[^>]+src=(['"]))(.*?)(\2.*?>)/g, function () {
+      var src = convUrlToAbs(doc.location.href, arguments[3])
+      return arguments[1] + src + arguments[4]
+    })
+    .replace(/(<img[^>]+srcset=(['"]))(.*?)(\2.*?>)/g, function () {
+      var srcset = arguments[3].split(/,\s*/)
+      srcset.forEach(function (ele, index) {
+        var src = ele.replace(/([^ ]*)(.*)/, function () {
+          var _src = convUrlToAbs(doc.location.href, arguments[1])
+          return _src + ' ' + arguments[2]
+        })
+        srcset[index] = src
+      })
+      return arguments[1] + srcset.join(',') + arguments[4]
+    })
+}

src/util/cleanHTML.ts

@@ -49,7 +49,7 @@ function generateRulesAll(
             html = html.replace(
               /url\((['"]?)(.*?)\1\)/g,
               function (_a, _p1, p2) {
-                return "url(" + convUrlToAbs(doc.location.href, p2) + ")";
+                return "url(\"" + convUrlToAbs(doc.location.href, p2) + "\")";
               }
             );
             // the next operation is asynchronous

src/util/generateRulesAll.ts

@@ -8,7 +8,8 @@
   background: #38c;
   color: #fff;
   font-size: 12px;
-  opacity: 0.1;
+  opacity: 0;
+  pointer-events: none;
 }
 
 html {
@@ -80,7 +81,16 @@ body {
 .font-style {
   font-family: 'Cutive Mono',  icon-font,      Inter, Avenir,   Helvetica  , Arial, sans-serif  ;
 }
-
+.svg-bg {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.54)' d='M20.49 19l-5.73-5.73C15.53 12.2 16 10.91 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.41 0 2.7-.47 3.77-1.24L19 20.49 20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  height: 20px;
+  padding: 10px;
+  width: 20px;
+  font-size:0;
+}
 @media print {
   i {
     font-size: 10pt;

test/css/index.css

@@ -11,6 +11,18 @@
         font-family: icon-font;
       }
     </style>
+    <style>
+      .svg-bg-inpage {
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,.54)' d='M20.49 19l-5.73-5.73C15.53 12.2 16 10.91 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.41 0 2.7-.47 3.77-1.24L19 20.49 20.49 19zM5 9.5C5 7.01 7.01 5 9.5 5S14 7.01 14 9.5 11.99 14 9.5 14 5 11.99 5 9.5z'/%3E%3C/svg%3E");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 20px;
+        height: 20px;
+        padding: 10px;
+        width: 20px;
+        font-size:0;
+      }
+    </style>
   </head>
 
   <body>
@@ -25,6 +37,8 @@
     </div>
     <div class="font-style">FontFamily</div>
     <p class="S_spetxt">.S_spetxt</p>
+    <div class="svg-bg">svg-bg</div>
+    <div class="svg-bg-inpage">svg-bg-inpage</div>
     <iframe src="./iframe/index.html" frameborder="0"></iframe>
     <p>
       Compare text below with result in devtools, with &lt;html&gt; tag