How to create floating window

Aubert-Antoine commented 1 year ago


It uses the `chrome.app.window`.

Aubert-Antoine commented 1 year ago

ChatGPT-3 : You can use something like chrome.windows for most of the functionalities ofchrome.app.window but it's not exactly the same.

In manifest

{
"name": "Floating Popup Extension",
"version": "1.0",
"manifest_version": 3,
"browser_action": {
"default_popup": "popup.html"
}
}

In popup.html:

<!DOCTYPE html>
<html>
<head>
<title>Floating Popup</title>
</head>
<body>
<div>Hello, this is a floating popup!</div>
</body>
</html>

The code I provided earlier is the basic setup for creating a floating popup in a Chrome Extension using manifest version 3. The main components you need to create a floating popup are the browser_action and default_popup fields in the manifest file, and the HTML file that will be displayed in the popup.

The browser_action field in the manifest file specifies that the extension will have a browser action, which is an icon that the user can click to open the popup. The default_popup field specifies the HTML file that will be displayed in the popup when the user clicks the icon.

You can also use JavaScript and CSS to customize the appearance and behavior of the popup. You can use the chrome.browserAction API to interact with the browser action and the chrome.runtime API to interact with the extension as a whole.

For example, you can use the chrome.browserAction.onClicked event to listen for clicks on the browser action icon, and the chrome.tabs API to interact with the current tab.

Here is an example code that listens for clicks on the browser action icon and opens a new tab with the URL 'https://www.example.com/':

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.create({'url': 'https://www.example.com'});
});

Also, you can use the chrome.runtime.onMessage to listen for messages sent from your popup and perform some action on the content script, background script or on the popup page.

Please note that, you should also validate your extension with chrome developer dashboard before publishing it to Chrome Webstore.

Aubert-Antoine commented 1 year ago

Sure! Here is an example of the manifest file and scripts needed to create an overlay window with a feature to select the size of the window between three fixed and predetermined sizes:

manifest.json:

{
"name": "Overlay Extension",
"version": "1.0",
"manifest_version": 3,
"browser_action": {
"default_popup": "overlay.html"
},
"permissions": [
"activeTab"
]
}

overlay.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Overlay</title>
    <style>
      /* CSS styles for the overlay */
    </style>
  </head>
  <body>
    <div id="overlay-content">
      <p>Hello, this is an overlay!</p>
    </div>
    <div id="size-selector">
        <button id="size-small">Small</button>
        <button id="size-medium">Medium</button>
        <button id="size-large">Large</button>
    </div>
    <script src="overlay.js"></script>
  </body>
</html>

overlay.js:

const sizeSelector = document.getElementById("size-selector");
const overlayContent = document.getElementById("overlay-content");

sizeSelector.addEventListener("click", (event) => {
  if (event.target.matches("#size-small")) {
    overlayContent.style.width = "300px";
    overlayContent.style.height = "200px";
  } else if (event.target.matches("#size-medium")) {
    overlayContent.style.width = "500px";
    overlayContent.style.height = "400px";
  } else if (event.target.matches("#size-large")) {
    overlayContent.style.width = "700px";
    overlayContent.style.height = "600px";
  }
});

This example uses a browser action, which will display an icon in the Chrome toolbar. When the user clicks the icon, the "overlay.html" file will be displayed in a floating window that overlays the current web page.

The overlay window contains a div element with the ID "overlay-content" that will be resized according to the selected size button, and a div element with the ID "size-selector" that contains three buttons for selecting the size of the overlay window.

The script "overlay.js" is used to listen for clicks on the size buttons and update the size of the overlay window accordingly.

This example uses the activeTab permission to interact with the current active tab.

Please note that, you should also validate your extension with chrome developer dashboard before publishing it to Chrome Webstore.

Aubert-Antoine / loudness-visualizer

How to create floating window #5