🧩 Plasmo Developers�PD
🧩 Plasmo Developers•3y ago•
15 replies
Pallas

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;


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.
Was this page helpful?