1

I want to manipulate css and elements with JavaScript via using Tauri APP.

Here some images of source code and etc:

enter image description here

index.html

<!DOCTYPE html>
<html>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
  <body>
    <h1>Loading...</h1>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

script.js

location.replace('https://web.whatsapp.com');

window.onload = () => {

    document.body.addEventListener("click", handleGroupChatNames);


    function handleGroupChatNames() {
        if (document.querySelector("._2gzeB")) {
          
          if (document.querySelectorAll("._1BUvv"))
            document.querySelectorAll("._1BUvv").forEach((element) => {
              let str = element.textContent;
              if (element.textContent.charAt(0) === "+") {
                element.textContent = str.replace(
                  /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/g,
                  "CSS/ELEMENT TEST"
                );
              }
            });
        }}

  };

Problem: The window.onload works fine at loading screen which is <h1>Loading...</h1> here. I could see the console logs when I try to. But after location.replace all the manipulates would be gone. As barely actually.

MyQuestion: So how can I manipulate elements and css after localization ?

What I've tried ?: I tried to implement webview with svelte to tauri app but I couldn't get a healthy result.



<script>
    let url="https://web.whatsapp.com"
    console.log("euheuheueheu")
</script>
<h1>
asfafsaf
</h1>

<webview 
src={url}
preload="script.js"
>

</webview>

I also tried:

fn main() {
    let webview = tauri::Builder::default()
        // ... other Tauri configuration options
        .invoke_handler(tauri::generate_handler![...])
        .run(tauri::generate_context!())
        .expect("failed to run app");

    webview
        .current_window()
        .expect("failed to get current window")
        .spawn(
            tauri::WebviewBuilder::new()
                // ... other webview configuration options
                .initialization_script(include_str!("preload.js")) // load the contents of preload.js
                .build()
                .expect("failed to build webview"),
        )
        .expect("failed to spawn webview");
}

But result was same.

Any help appricated. Thankss.

On Electron working one:


<script lang="ts">
  
window.addEventListener('load', function() { console.log("Fiered load after " + performance.now() + " ms"); }, false);



</script>

<webview
  id={`webview-${tab.id}`}
  src="https://web.whatsapp.com"
  preload="../src/preload.js"
  {partition}
  bind:this={webviewElement}
  useragent={userAgent}
  webpreferences={`spellcheck=${tab.config.spellChecker ? 1 : 0}`}
/>
Asaf Hekimoğlu
  • 11
  • 2
  • 1
    What does this have to do with Rust? I removed the Rust tag. Please don't add tags that aren't relevant to the question. – Jared Smith Apr 11 '23 at 13:36
  • Ohh, yes correct, I will add rust thing now it sliped my mind. – Asaf Hekimoğlu Apr 11 '23 at 13:41
  • No of course you can't modify a different page after reloading, this would be a massive security issue is a webpage could view and edit any other page simply by redirecting to it – mousetail Apr 11 '23 at 13:51
  • Actually it is posible with electron, I have that thing on electron but electron runs very slow and less performance than tauri. Thats why I want to switch to tauri. So lemme add how it was working on Electron with Svelte. – Asaf Hekimoğlu Apr 11 '23 at 13:52
  • Just edited have a check please. The one with Electron works, it somehow applies css and element things after loading. As barely it named preload tough. – Asaf Hekimoğlu Apr 11 '23 at 13:55

0 Answers0