Converter module

Author: chrmod

extension-manifest-v3/src/pages/settings/components/custom-filters.js

@@ -11,17 +11,9 @@
 
 import { html, store } from 'hybrids';
 import { detectFilterType } from '@cliqz/adblocker';
+import createConverter from '../dnr-converter';
 
-function onConvertedRules(host, event) {
-  if (!event.data.rules || !event.data.errors) {
-    return;
-  }
-
-  console.log("DNR converstion", event.data)
-  if (event.data.errors.length > 0) {
-    // host.conversionResult.errors.push(...event.data.errors);
-  }
-}
+const converter = createConverter();
 
 function updateCustomFilters(host) {
   store.submit(host.input);
@@ -40,7 +32,7 @@ const CustomFiltersInput = {
     },
     async set(_, { text }) {
       await chrome.storage.local.set({ 'custom-filters-input': text });
-      return { text, id: 1, };
+      return { text, id: 1 };
     },
   },
 };
@@ -50,7 +42,10 @@ export default {
   errors: { set: (_, values = []) => values },
   output: async (host) => {
     const { text } = await store.resolve(host.input);
-    const filters = text.split('\n').map(f => f.trim()).filter(Boolean);
+    const filters = text
+      .split('\n')
+      .map((f) => f.trim())
+      .filter(Boolean);
 
     const output = {
       networkFilters: [],
@@ -69,56 +64,23 @@ export default {
           output.cosmeticFilters.push(filter);
           break;
         default:
-          output.errors.push(
-            `Filter not supported: '${filter}'`,
-          );
+          output.errors.push(`Filter not supported: '${filter}'`);
       }
     }
 
-    const { convert } = await host.converter;
     for (const networkFilter of output.networkFilters) {
-      convert(networkFilter);
+      converter.convert(networkFilter);
     }
 
     return output;
   },
-  converter: {
-    async get(host) {
-      return new Promise(resolve => {
-        const iframe = host.querySelector('iframe');
-        const convert = (filter) => {
-          iframe.contentWindow.postMessage(
-            {
-              action: 'convert',
-              converter: 'adguard',
-              filters: [filter],
-            },
-            '*',
-          );
-        };
-        iframe.addEventListener('load', () => {
-          resolve({ convert });
-        });
-      })
-    },
-    connect(host) {
-      const onMessage = onConvertedRules.bind(null, host);
-
-      window.addEventListener('message', onMessage);
-
-      return () => {
-        window.removeEventListener('message', onMessage);
-      };
-    },
-  },
   content: ({ input, output }) => html`
     <template layout="column gap:3">
-      <iframe
-        layout="hidden"
-        src="https://ghostery.github.io/urlfilter2dnr/"
-      ></iframe>
-      ${store.ready(input) && html`
-        <textarea rows="10" oninput="${html.set(input, 'text')}">${input.text}</textarea>
+      ${store.ready(input) &&
+      html`
+        <textarea rows="10" oninput="${html.set(input, 'text')}">
+${input.text}</textarea
+        >
       `}
       <div layout="row gap items:center">
         <ui-button
@@ -130,22 +92,24 @@ export default {
           <button>Update</button>
         </ui-button>
         ${html.resolve(
-          output.then(({ networkFilters, cosmeticFilters, errors }) => html`
-            <section layout="row gap items:center">
-              <ul>
-                ${errors.map(
-                  (error) =>
-                    html`<li>
-                      <ui-text color="danger-500">${error}</ui-text>
-                    </li>`,
-                )}
-              </ul>
-            </section>
-            <section layout="row gap items:center">
-              Network filters: ${networkFilters.length}
-              Cosmetic filters: ${cosmeticFilters.length}
-            </section>
-          `)
+          output.then(
+            ({ networkFilters, cosmeticFilters, errors }) => html`
+              <section layout="row gap items:center">
+                <ul>
+                  ${errors.map(
+                    (error) =>
+                      html`<li>
+                        <ui-text color="danger-500">${error}</ui-text>
+                      </li>`,
+                  )}
+                </ul>
+              </section>
+              <section layout="row gap items:center">
+                Network filters: ${networkFilters.length} Cosmetic filters:
+                ${cosmeticFilters.length}
+              </section>
+            `,
+          ),
         )}
       </div>
     </template>

extension-manifest-v3/src/pages/settings/dnr-converter.js

@@ -0,0 +1,55 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+const requests = new Map();
+let requestCount = 0;
+let iframe;
+let isReadyResolver;
+let isReady = new Promise((resolve) => {
+  isReadyResolver = resolve;
+});
+
+function createConverter() {
+  if (!iframe) {
+    window.addEventListener('message', (event) => {
+      const requestId = event.data.rules.shift().condition.urlFilter;
+      requests.get(requestId)(event.data);
+      requests.delete(requestId);
+    });
+
+    iframe = document.createElement('iframe');
+    iframe.setAttribute('src', 'https://ghostery.github.io/urlfilter2dnr/');
+    iframe.setAttribute('style', 'display: none;');
+    iframe.addEventListener('load', isReadyResolver);
+
+    document.body.appendChild(iframe);
+  }
+
+  return {
+    convert: async (filter) => {
+      await isReady;
+      const requestId = `request${requestCount++}`;
+      iframe.contentWindow.postMessage(
+        {
+          action: 'convert',
+          converter: 'adguard',
+          filters: [requestId, filter],
+        },
+        '*',
+      );
+      return new Promise((resolve) => {
+        requests.set(requestId, resolve);
+      });
+    },
+  };
+}
+
+export default createConverter;