feat: scripts update

Author: Flowko

engine.bin

@@ -3,17 +3,7 @@
     <div class="flex flex-col bg-[#FAFBFB] rounded-md shadow-lg">
       <input
         v-if="selectedType != 'multiple-imgs'"
-        class="
-          w-full
-          p-3
-          transition-all
-          ease-linear
-          delay-75
-          border-2
-          rounded-md
-          outline-none
-          focus:outline-none focus:border-primary-200 focus:border-dashed
-        "
+        class="w-full p-3 transition-all ease-linear delay-75 border-2 rounded-md outline-none focus:outline-none focus:border-primary-200 focus:border-dashed"
         @keyup.enter="generateScreenshot"
         placeholder="https://github.com/flowko..."
         type="url"
@@ -22,18 +12,7 @@
 
       <div class="flex items-center justify-center my-4 space-x-10">
         <div
-          class="
-            flex flex-col
-            items-center
-            justify-center
-            w-32
-            h-32
-            text-center
-            bg-gray-200
-            cursor-pointer
-            rounded-2xl
-            hover:bg-gray-300
-          "
+          class="flex flex-col items-center justify-center w-32 h-32 text-center bg-gray-200 cursor-pointer rounded-2xl hover:bg-gray-300"
           :class="{
             'border-primary-200 border-dashed border-2 shadow-md ':
               selectedType == type.value,
@@ -62,17 +41,7 @@
           :key="index"
         >
           <input
-            class="
-              w-full
-              p-3
-              transition-all
-              ease-linear
-              delay-75
-              border-2
-              rounded-md
-              outline-none
-              focus:outline-none focus:border-primary-200 focus:border-dashed
-            "
+            class="w-full p-3 transition-all ease-linear delay-75 border-2 rounded-md outline-none focus:outline-none focus:border-primary-200 focus:border-dashed"
             :placeholder="`URL - ${index}`"
             type="url"
             v-model="url.url"
@@ -548,7 +517,7 @@
           v-if="result && result.url"
           :src="result.url"
           width="100%"
-          style="height: 50vh;object-fit: cover;"
+          style="height: 50vh; object-fit: cover"
         />
       </div>
     </div>
@@ -597,10 +566,8 @@ export default {
           format: "resolution",
           landscape: false,
         },
-        script: `//console.log('hello world');`,
-        style: `/* .test {
-          color: #000;
-        } */`,
+        script: "",
+        style: "",
         urls: [
           {
             url: null,

pages/index.vue

@@ -344,17 +344,19 @@ const internalCaptureWebsiteCore = async (input, options, page, browser) => {
     );
   }
 
-  if (options.scripts) {
+  if (options.scripts && options.scripts.length > 0) {
     await Promise.all(
       options.scripts.map((script) =>
         page.addScriptTag({
           [getInjectKey("js", script)]: script,
         })
       )
     );
+
+    await page.waitForNavigation();
   }
 
-  if (options.styles) {
+  if (options.styles && options.styles.length > 0) {
     await Promise.all(
       options.styles.map((style) =>
         page.addStyleTag({

server-middleware/capture.js

@@ -59,11 +59,11 @@ app.post("/screenshot", async (req, res) => {
   const styles = [];
   const scripts = [];
 
-  if (params.style) {
+  if (params.style && params.style.length > 0) {
     styles.push(params.style);
   }
 
-  if (params.script) {
+  if (params.script && params.script.length > 0) {
     scripts.push(params.script);
   }