Skip to content

Instantly share code, notes, and snippets.

View dotproto's full-sized avatar

Simeon Vincent dotproto

248 followers · 13 following
View GitHub Profile
@dotproto
dotproto / _README.md
Last active March 10, 2025 01:32
Host permission patterns with ports

This gist contains a WebExtension that tests how the browser that runs it handles ports host permission patterns.

Running tests

  1. (optional) Create a new browser profile to ensure that this test runs in a clean environment.
  2. Load this extension in your browser.
  3. Start a debug session for the extension's background context.
  4. (optional) Diable "debug" or "verbose" log messages
  5. Check if your browser auto-upgrades HTTP requests to HTTPS by calling testHttpUpgrades() in the console. If you see a console message that says "Your browser auto-upgraded one or more HTTP requests to HTTPS!", consult the HTTPs Upgrades section below.
@dotproto
dotproto / _README.md
Created November 14, 2024 02:14
timeout()

timeout() is a promise-based version of setTimeout() with AbortSignal support.

@dotproto
dotproto / _README.md
Created October 23, 2024 11:25
mdn/content#36097 report attempt
  1. Save the files from this gist in a local directory.
  2. Load that directory in Firefox as a temporary extension.
  3. Visit https://example.com and open developer tools.
  4. Click the "Open port" button and note the logged messages.
  5. Click the "Send message" button and note the logged messages.
  6. Wait ~30 seconds. Observe that a "Port disconnected!" message is logged.
  7. Wait another 30 seconds as described in the issue (#36097).
  8. Click "Open port" again.

Result: Could not reproduce the issue. The backgroudn starts up, recieves the connection request, and opens a port as expected.

@dotproto
dotproto / _README.md
Last active July 17, 2024 23:36
`onAuthRequired` event handler test cases

This gist contains a browser extension that tests browser support for testing how onAuthRequired event handlers handle different resoultion patterns. It created in support of reviewing https://github.com/mdn/webextensions-examples/pull/564.

Test # extraInfoSpec Description Chrome Firefox
1 blocking Synchronous object response ✅ ✅
2 blocking Synchronous Promise response with async resolution ❌ ✅
3 asyncBlocking Synchronous object response ❌ ❌
4 asyncBlocking Synchronous Promise response with async resolution ❌ ❌
5 asyncBlocking Async callback call with object ✅ ✅
@dotproto
dotproto / background.js
Last active May 27, 2024 14:05
CORS Test (Chrome, Firefox) - This extension will begin performing HTTP requests against a bespoke test server immediately after installation. To view the results, open a devtools session for the extension's background context and look through the console output.
globalThis.browser ??= globalThis.chrome;
let testCounter = 0;
let corsTest = async (
{
client: {
forcePreflight = false,
mode = undefined,
},
server: {
@dotproto
dotproto / background.js
Created April 12, 2022 20:40
Double click action in Manifest V3. Heavily based on Turn Off the Lights.
let alreadyClicked = false;
let timer;
chrome.action.onClicked.addListener(function(tab) {
let wasClicked = alreadyClicked;
// Reset state
if (wasClicked) {
clearTimeout(timer);
alreadyClicked = false;
@dotproto
dotproto / gist:8f0b3e39215f002a0908be3d3122ce88
Last active March 29, 2022 21:52
Calculate pixel height in inches/mm at a given distance
/**
* @param {number} srcPixels Number of pixels used when rendering on a standard desktop dispaly. Defaults to 1 pixel
* @param {number} distance Distance in inches at which the item is rendered. Defaults to 28 inches (distance specified in the CSS spec)
*
* https://www.w3.org/TR/css-values-4/#reference-pixel
*/
function getProjectedPixel({pixels = 1, distance = 28} = {}) {
const inToMm = (inch) => inch * 25.4;
const opposite = distance;
@dotproto
dotproto / devtools.html
Created September 8, 2021 03:33
DevTools network request monitor. Minimal demo to show how one could use `chrome.devtools.network.onRequestFinished` to monitor request traffic on a given page.
<!DOCTYPE html>
<script src="devtools.js"></script>
@dotproto
dotproto / index.html
Created September 7, 2021 17:20
Test: Spawn a WebWorker inside a service worker. This test was created to verify whether or not standard web workers can be instantiated from within a service worker.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Web Workers basic example</title>
</head>
<body>
<script src="main.js"></script>
@dotproto
dotproto / background.js
Last active May 27, 2024 14:04
Inject video on page that has a CSP restrict that would normally prevent the video from being injected. To see this demo in action, load the extension unpacked and trigger the extension's action on the desired page.
// Copyright 2021 Google LLC.
// SPDX-License-Identifier: Apache-2.0
let videos = [
{
url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
type: 'video/mp4',
}, {
url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
type: 'video/webm',