https://github.com/fregante/webext-sandbox

WIP
https://github.com/fregante/webext-sandbox

Last synced: 19 days ago
JSON representation

WIP

• Host: GitHub
• URL: https://github.com/fregante/webext-sandbox
• Owner: fregante
• License: mit
• Created: 2023-02-08T10:50:31.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-02-08T11:36:46.000Z (over 1 year ago)
• Last Synced: 2024-10-12T10:06:15.681Z (22 days ago)
• Language: TypeScript
• Homepage:
• Size: 193 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# webext-sandbox [![][badge-gzip]][link-bundlephobia]

[badge-gzip]: https://img.shields.io/bundlephobia/minzip/webext-sandbox.svg?label=gzipped

[link-bundlephobia]: https://bundlephobia.com/result?p=webext-sandbox

> Helper to create and communicate to a sandboxed iframe in Web Extensions

## Install

You can download the [standalone bundle](https://bundle.fregante.com/?pkg=webext-sandbox) and include it in your `manifest.json`.

```sh

npm install webext-sandbox

```

```js

import 'webext-sandbox';

```

## Usage

The sandbox receiver must live in its own HTML and JS file, so create these two files:

```sh

/

|-- manifest.json

|-- sandbox.js

|-- sandbox.html

|-- contentscript.js # or any other context that requires a sandbox

```

### Manifest.json

```json

{

	"manifest_version": 3,

	"name": "Sandboxed Runner",

	"sandbox": {

		"pages": ["sandbox.html"]

	},

	"web_accessible_resources": [

		"sandbox.html"

	],

	"content_security_policy": {

		// Set the native default CSP

		// https://developer.chrome.com/docs/extensions/mv3/manifest/sandbox/

		"sandbox":

			"sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"

	}

}

```

### sandbox.html

```html

```

### sandbox.js

```js

import { addPostMessageListener } from "webext-sandbox";

export default function registerMessenger(): void {

	// Example, to test it out

  addPostMessageListener("PING", async payload => "pong");

	// Add as many as needed

  addPostMessageListener("SOME_UNSAFE_CALL", yourOwnUnsafeComputation);

}

```

### contentscript.js

```js

import {Sandbox} from "webext-sandbox";

const sandbox = new Sandbox({

	// Optional

	url: chrome.runtime.getURL("sandbox.html")

});

// Called automatically later, but you can preload it this way

sandbox.load();

sandbox.postMessage({

	type: "PING",

}).then(response => {

	console.log({response}); // {response: 'pong'}

})

sandbox.postMessage({

	type: "SOME_UNSAFE_CALL",

	payload: {

		any: "serializable",

		content: [1, "is supported"]

	}

}).then(response => {

	console.log({response}); // {response: 'your response'}

})

```

## License

MIT © [Federico Brigante](https://fregante.com)