centersl/chrome-extensions-samples
1
0
Fork 0
mirror of https://github.com/GoogleChrome/chrome-extensions-samples.git synced 2026-03-27 13:29:34 +07:00
Code Issues Packages Projects Releases Wiki Activity

Added 2 sandbox samples (#919)

Browse Source 
* Added 2 sandbox samples

* Updated readme style

* Updated readme for 2nd Sandbox sample

* Replaced windows API with Tabs to modernize

* Small update to readme

* Update api-samples/Sandbox/sandbox/mainpage.js

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/Sandbox/sandbox/main.js

Co-authored-by: Joe Medley <jmedley@google.com>

* Update main.js

* Update main.js

* Update mainpage.html

* Update mainpage.js

* Update manifest.json

* Update sandbox.html

* Update main.js

* Update main.js

* Update manifest.json

* changing folder case

* case change

* Minor cleanup

* Update sandbox.html

* Update sandbox.html

* Update sandbox.html

* Update api-samples/sandbox/sandbox/sandbox.html

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandbox/sandbox.html

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandbox/sandbox.md

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandboxed-content/sandboxed-content.md

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandboxed-content/sandboxed-content.md

Co-authored-by: Joe Medley <jmedley@google.com>

* Changed filename to service-worker.js

* Update api-samples/sandbox/sandbox/mainpage.js

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandbox/manifest.json

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandboxed-content/manifest.json

Co-authored-by: Joe Medley <jmedley@google.com>

* Update api-samples/sandbox/sandboxed-content/service-worker.js

Co-authored-by: Joe Medley <jmedley@google.com>

* Update sandbox.md

* Update sandboxed-content.md

* Update manifest.json

* Update manifest.json

---------

Co-authored-by: Joe Medley <jmedley@google.com>
This commit is contained in:
IanStanion-google
2023-06-05 12:15:45 -04:00
committed by GitHub
parent d6493a71ac
commit 56952ea28e
19 changed files with 2811 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
api-samples/sandbox/sandbox/LICENSE.handlebars Normal file
View File

@@ -0,0 +1,20 @@
Copyright (C) 2011 by Yehuda Katz
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

BIN
api-samples/sandbox/sandbox/assets/screenshot_1280_800.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

2450
api-samples/sandbox/sandbox/handlebars-1.0.0.beta.6.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
api-samples/sandbox/sandbox/icon_128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

32
api-samples/sandbox/sandbox/mainpage.html Normal file
View File

@@ -0,0 +1,32 @@
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<script src="mainpage.js"></script>
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="buttons">
<button id="sendMessage">Click me</button>
<button id="reset">Reset counter</button>
</div>
<div id="result"></div>
<iframe id="theFrame" src="sandbox.html" style="display: none"></iframe>
</body>
</html>

37
api-samples/sandbox/sandbox/mainpage.js Normal file
View File

@@ -0,0 +1,37 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
let counter = 0;
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('reset').addEventListener('click', function () {
counter = 0;
document.querySelector('#result').innerHTML = '';
});
document.getElementById('sendMessage').addEventListener('click', function () {
counter++;
let message = {
command: 'render',
templateName: 'sample-template-' + counter,
context: { counter: counter }
};
document.getElementById('theFrame').contentWindow.postMessage(message, '*');
});
// on result from sandboxed frame:
window.addEventListener('message', function () {
document.querySelector('#result').innerHTML =
event.data.result || 'invalid result';
});
});

14
api-samples/sandbox/sandbox/manifest.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "Sandboxed Frame Sample",
"version": "1.0.3",
"manifest_version": 3,
"background": {
"service_worker": "service-worker.js"
},
"icons": {
"128": "icon_128.png"
},
"sandbox": {
"pages": ["sandbox.html"]
}
}

83
api-samples/sandbox/sandbox/sandbox.html Normal file
View File

@@ -0,0 +1,83 @@
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<script src="handlebars-1.0.0.beta.6.js"></script>
</head>
<body>
<script id="sample-template-1" type="text/x-handlebars-template">
<div class='entry'>
<h1>Hello</h1>
<p>This is a Handlebar template compiled inside a hidden sandboxed
iframe.</p>
<p>The counter parameter from postMessage() (outer frame) is:
{{counter}}</p>
</div>
</script>
<script id="sample-template-2" type="text/x-handlebars-template">
<div class='entry'>
<h1>Welcome back</h1>
<p>This is another Handlebar template compiled inside a hidden sandboxed
iframe.</p>
<p>The counter parameter from postMessage() (outer frame) is:
{{counter}}</p>
</div>
</script>
<script>
const templatesElements = document.querySelectorAll(
"script[type='text/x-handlebars-template']"
);
let templates = {},
source,
name;
// precompile all templates in this page
for (let i = 0; i < templatesElements.length; i++) {
source = templatesElements[i].innerHTML;
name = templatesElements[i].id;
templates[name] = Handlebars.compile(source);
}
// Set up message event handler:
window.addEventListener('message', function (event) {
const command = event.data.command;
let template = templates[event.data.templateName],
result = 'invalid request';
// if we don't know the templateName requested, return an error message
if (!template) {
result = 'Unknown template: ' + event.data.templateName;
} else {
switch (command) {
case 'render':
result = template(event.data.context);
break;
// you could even do dynamic compilation, by accepting a command
// to compile a new template instead of using static ones, for example:
// case 'new':
// template = Handlebars.compile(event.data.templateSource);
// result = template(event.data.context);
// break;
}
}
event.source.postMessage({ result: result }, event.origin);
});
</script>
</body>
</html>

10
api-samples/sandbox/sandbox/sandbox.md Normal file
View File

@@ -0,0 +1,10 @@
# Sandbox
This sample creates a tab with a sandboxed iframe (`sandbox.html`) to which the main page (`mainpage.html`)
passes a counter variable. The sandboxed page uses the
Handlebars template library to evaluate and compose a message
using the counter variable which is then passed back to the main page for rendering.
## Overview
The default Content Security Policy (CSP) settings of the extension disallows the use of `eval()` so using a sandbox is necessary to use external resources for this extension.

26
api-samples/sandbox/sandbox/service-worker.js Normal file
View File

@@ -0,0 +1,26 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* Listens for the extension launching then creates a new tab
*
* @see http://developer.chrome.com/docs/extensions/reference/runtime
* @see http://developer.chrome.com/docs/extensions/reference/tabs
*/
chrome.runtime.onInstalled.addListener(() => {
chrome.tabs.create({
url: 'mainpage.html'
});
console.log('Opened a tab with a sandboxed page!');
});

42
api-samples/sandbox/sandbox/styles/main.css Normal file
View File

@@ -0,0 +1,42 @@
html,
body {
font-family: Helvetica, Arial, sans-serif;
}
button {
width: 150px;
line-height: 26px;
font-size: 14px;
border-radius:4px;
border: 1px solid #666;
background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 99%);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
color: #555;
}
button:hover {
color: #333;
}
button:active {
color: #000;
}
#buttons {
text-align: center;
padding: 15px;
background: #fcfcfc;
border-bottom: 1px solid #f2f2f2;
}
#result {
padding: 20px;
}
#result h1 {
margin: 0 0 0.2em 0;
}
#result p {
line-height: 140%
}

BIN
api-samples/sandbox/sandboxed-content/assets/screenshot_1280_800.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
api-samples/sandbox/sandboxed-content/icon_128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

13
api-samples/sandbox/sandboxed-content/main.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sandboxed Content</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<h1>Main Window</h1>
<p>I am the main window. I am not sandboxed.</p>
<iframe src="sandboxed.html" width="380" height="140"></iframe>
</body>
</html>

14
api-samples/sandbox/sandboxed-content/manifest.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "Sandboxed Content Sample",
"version": "1.0.3",
"manifest_version": 3,
"background": {
"service_worker": "service-worker.js"
},
"icons": {
"128": "icon_128.png"
},
"sandbox": {
"pages": ["sandboxed.html"]
}
}

8
api-samples/sandbox/sandboxed-content/sandboxed-content.md Normal file
View File

@@ -0,0 +1,8 @@
# Sandboxed Content
This sample creates a tab containing a sandboxed iframe (`sandbox.html`).
The sandbox calls `eval()` to write some HTML to its own document.
## Overview
The default Content Security Policy (CSP) settings of the extension disallows the use of `eval()` so using a sandbox is necessary to use external resources for this extension.

19
api-samples/sandbox/sandboxed-content/sandboxed.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Sandboxed Content</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<h1>Sandboxed Content</h1>
<p>I am the sandboxed iframe.</p>
<div id="message"></div>
<script>
eval(
"document.getElementById('message').innerHTML = '<p>I am the " +
"output of an eval-ed inline script.</p>'"
);
</script>
</body>
</html>

25
api-samples/sandbox/sandboxed-content/service-worker.js Normal file
View File

@@ -0,0 +1,25 @@
// Copyright 2023 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// https://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* Listens for the extension launching then creates the window
*
* @see http://developer.chrome.com/docs/extensions/reference/runtime.html
* @see http://developer.chrome.com/docs/extensions/reference/tab.html
*/
chrome.runtime.onInstalled.addListener(() => {
chrome.tabs.create({
url: 'main.html'
});
});

18
api-samples/sandbox/sandboxed-content/styles/main.css Normal file
View File

@@ -0,0 +1,18 @@
html, body {
font-family: Helvetica, Arial;
color: #444;
}
h1 {
margin: 0 0 0.3em 0;
}
p {
color: #888;
margin: 0 0 1em 0;
}
iframe {
border: 1px solid #CCC;
margin-top: 20px;
}