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

Update the browser tag sample to turn it into a mini browser.

Browse Source
This commit is contained in:
Mihai Parparita
2012-07-03 12:38:28 -07:00
parent 481d9a6363
commit 81170853ec
8 changed files with 110 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
browser-tag/README.md Normal file
View File

@@ -0,0 +1,3 @@
Sample that shows how to use the [browser tag](http://developer.chrome.com/trunk/apps/app_external.html#browsertag) in an app to create a mini browser.
The app's main window contains a `<browser>` that is sized to fit most of it (via the `width` and `height` attributes). The location bar is used to update its `src` attribute.

6
browser-tag/background.js
View File

@@ -1,6 +0,0 @@
chrome.experimental.app.onLaunched.addListener(function() {
chrome.appWindow.create('main.html', {
'width': 400,
'height': 500
});
});

46
browser-tag/browser.css Normal file
View File

@@ -0,0 +1,46 @@
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#controls {
padding: 3px;
border-bottom: solid 1px #ccc;
}
#controls button,
#controls input {
font-size: 14px;
}
button,
input[type="submit"] {
border: solid 1px #ccc;
background: #eee;
border-radius: 2px;
}
#location {
border: solid 1px #ccc;
padding: 2px;
width: 100%;
-webkit-box-sizing: border-box;
}
#controls {
display: -webkit-flex;
-webit-flex-direction: column;
}
#controls #location-form {
-webkit-flex: 1;
display: -webkit-flex;
-webit-flex-direction: column;
}
#controls #center-column {
-webkit-flex: 1;
margin: 0 2px;
}

18
browser-tag/browser.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="browser.css">
<script src="browser.js"></script>
<body>
<div id="controls">
<button id="new-browser">New</button><button id="home">Home</button>
<form id="location-form">
<div id="center-column">
<input id="location" type="text" value="http://www.google.com/">
</div>
<input type="submit" value="Go">
</form>
</div>
<browser src="http://www.google.com/" width="640" height="480"></browser>
</body>
</html>

34
browser-tag/browser.js Normal file
View File

@@ -0,0 +1,34 @@
onresize = doLayout;
onload = function() {
doLayout();
document.querySelector('#new-browser').onclick = function() {
chrome.appWindow.create('browser.html', {
'width': 1024,
'height': 768
});
};
document.querySelector('#home').onclick = function() {
document.querySelector('browser').src =
document.querySelector('#location').value = 'http://www.google.com/';
};
document.querySelector('#location-form').onsubmit = function(e) {
e.preventDefault();
document.querySelector('browser').src =
document.querySelector('#location').value;
}
}
function doLayout() {
var browser = document.querySelector('browser');
var controls = document.querySelector('#controls');
var controlsHeight = controls.offsetHeight;
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
browser.width = windowWidth;
browser.height = windowHeight - controlsHeight;
}

6
browser-tag/main.html
View File

@@ -1,6 +0,0 @@
<!DOCTYPE html>
<html>
<body>
<browser src="http://news.google.com/" width="640" height="480"></browser>
</body>
</html>

6
browser-tag/main.js Normal file
View File

@@ -0,0 +1,6 @@
chrome.experimental.app.onLaunched.addListener(function() {
chrome.appWindow.create('browser.html', {
'width': 1024,
'height': 768
});
});

6
browser-tag/manifest.json
View File

@@ -1,10 +1,10 @@
{
"name": "Browser Plugin",
"version": "1.0",
"manifest_version": 2,
"name": "Browser Tag",
"version": "1.0",
"app": {
"background": {
"scripts": ["background.js"]
"scripts": ["main.js"]
}
},
"permissions": [