🧩 Plasmo Developers•2y ago

As a browser extension developer using

As a browser extension developer using Plasmo, you can change the display page in popup.tsx on clicking a button by utilizing the window.open() method. This method allows you to open a new browser window or tab with a specified URL. In your popup.tsx file, you can define a button element with an onClick event handler. Inside the event handler, you can use the window.open() method to open a new window or tab with the desired URL. Here's an example of how you can implement this functionality:

import React from 'react';

const Popup = () => {
  const handleButtonClick = () => {
    // Open a new window or tab with the desired URL
    window.open('https://example.com', '_blank');
  };

  return (
    <div>
      <h1>Popup Page</h1>
      <button onClick={handleButtonClick}>Change Display Page</button>
    </div>
  );
};

export default Popup;

import React from 'react';

const Popup = () => {
  const handleButtonClick = () => {
    // Open a new window or tab with the desired URL
    window.open('https://example.com', '_blank');
  };

  return (
    <div>
      <h1>Popup Page</h1>
      <button onClick={handleButtonClick}>Change Display Page</button>
    </div>
  );
};

export default Popup;

In this example, when the button is clicked, the handleButtonClick function is called. Inside this function, window.open() is used to open a new window or tab with the URL 'https://example.com'. The second argument '_blank' specifies that the URL should be opened in a new tab. You can replace 'https://example.com' with the desired URL of the page you want to display. Additionally, you can customize the behavior of the new window or tab by specifying different options in the window.open() method. Remember to export the Popup component as the default export so that it can be used in other parts of your extension. By implementing this approach, you can change the display page in popup.tsx when the button is clicked, allowing you to navigate to different pages or external websites within your extension.

14 Replies

AB7zz•2y ago

!question I want to change the display of the poopup.tsx. For example I want to render another component inside popup.tsx when user clicks a button

Arcane•2y ago

@ab7zz has reached level 1. GG!

PallasOP•2y ago

To change the display of the popup.tsx and render another component when the user clicks a button, you can follow these steps: 1. Inside your popup.tsx file, define a state variable to keep track of whether the button has been clicked or not. You can use the useState hook from React for this:

tsx filename="popup.tsx"
import React, { useState } from 'react';

export default function Popup() {
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  // Render different components based on the button click
  const renderContent = () => {
    if (isButtonClicked) {
      return <AnotherComponent />;
    } else {
      return <DefaultComponent />;
    }
  };

  return (
    <div>
      <button onClick={() => setIsButtonClicked(true)}>Click me</button>
      {renderContent()}
    </div>
  );
}

tsx filename="popup.tsx"
import React, { useState } from 'react';

export default function Popup() {
  const [isButtonClicked, setIsButtonClicked] = useState(false);

  // Render different components based on the button click
  const renderContent = () => {
    if (isButtonClicked) {
      return <AnotherComponent />;
    } else {
      return <DefaultComponent />;
    }
  };

  return (
    <div>
      <button onClick={() => setIsButtonClicked(true)}>Click me</button>
      {renderContent()}
    </div>
  );
}

2. In the above code, we have a state variable isButtonClicked initialized to false. When the button is clicked, we update the state to true using the setIsButtonClicked function. 3. We define a renderContent function that returns different components based on the value of isButtonClicked. If isButtonClicked is true, we render the AnotherComponent, otherwise, we render the DefaultComponent. 4. Inside the return statement of the Popup component, we have a button that triggers the state update when clicked. We also call the renderContent function to render the appropriate component based on the state. By following these steps, you can change the display of the popup.tsx and render another component when the user clicks a button.

AB7zz•2y ago

!question is there no navigation method in popup.tsx? like /items, /toys, etc.? So that I could use the react-router-dom package

PallasOP•2y ago

Something went wrong.

AB7zz•2y ago

!question is there no navigation method in popup.tsx? like /items, /toys, etc.? So that I could use the react-router-dom package

PallasOP•2y ago

Something went wrong.

AB7zz•2y ago

how do I define a context file and define some useStates and use it in a popup.tsx? !question how do I define a context file and define some useStates and use it in a popup.tsx?

PallasOP•2y ago

Something went wrong.

Joshua Perk•2y ago

@ab7zz let me know if you figure this out. I haven't seen any method for something like this and have assumed I just have to do a bunch of if-statement component rendering. ie (in vue)

<LoginPage v-if="!isLoggedIn></LoginPage>
<div v-else>
  <SomePage v-if="currentPage === 'foo'"></SomePage>
  <SomeOtherPage v-if="currentPage === 'bar'"></SomeOtherPage>
</div>

<LoginPage v-if="!isLoggedIn></LoginPage>
<div v-else>
  <SomePage v-if="currentPage === 'foo'"></SomePage>
  <SomeOtherPage v-if="currentPage === 'bar'"></SomeOtherPage>
</div>

AB7zz•2y ago

@Joshua Perk Wow, I'm currently doing something similar. If-loops to render a specific page. I'll make sure to ping you if I find a solution

const renderContent = () => {
    if(page == '/'){
        return <Table data={data} />
    }else if(page == '/similiar'){
        return <Similiar />
    }
  }
  return (
    <>
      {renderContent()}
      {page == "/" ? 
        <div className="flex py-5">
          <button onClick={() => setPage('/similiar')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>View similiar products</button>
        </div>
      : page == "/similiar" ?
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Go back</button>
        </div>
      :
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Home</button>
        </div>

      }
    </>
  )

const renderContent = () => {
    if(page == '/'){
        return <Table data={data} />
    }else if(page == '/similiar'){
        return <Similiar />
    }
  }
  return (
    <>
      {renderContent()}
      {page == "/" ? 
        <div className="flex py-5">
          <button onClick={() => setPage('/similiar')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>View similiar products</button>
        </div>
      : page == "/similiar" ?
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Go back</button>
        </div>
      :
        <div className="flex py-5">
          <button onClick={() => setPage('/')} className='m-auto bg-sky-500 text-white px-5 py-2 rounded'>Home</button>
        </div>

      }
    </>
  )

This is a sample of what my code looks like.

Joshua Perk•2y ago

Such a bummer this is how it has to be done today 😢 Hopefully the Plasmo team will consider adding some of the routing functionality in other frameworks like Next/Nuxt - etc. Would make it really powerful. I'll ping you if I stumble on a better way.

Arcane•2y ago

@Joshua Perk has reached level 2. GG!

umar•15mo ago

you can use https://github.com/kelsonpw/react-chrome-extension-router

GitHub

GitHub - kelsonpw/react-chrome-extension-router: A dead simple rout...

A dead simple routing solution for browser extensions written in typescript with React Hooks. Context free. - GitHub - kelsonpw/react-chrome-extension-router: A dead simple routing solution for br...

Gaming

Programming

As a browser extension developer using