Skip to content

Instantly share code, notes, and snippets.

@rev087
Created May 1, 2015 01:33
Show Gist options
  • Save rev087/8b077e55e5a33dccb3e6 to your computer and use it in GitHub Desktop.
Save rev087/8b077e55e5a33dccb3e6 to your computer and use it in GitHub Desktop.
Safari extension to display viewport width as a toolbar
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>Author</key>
<string>Bruno Daniel</string>
<key>Builder Version</key>
<string>10600.5.17</string>
<key>CFBundleDisplayName</key>
<string>Viewport Width</string>
<key>CFBundleIdentifier</key>
<string>com.yourcompany.page-data</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1</string>
<key>Chrome</key>
<dict>
<key>Bars</key>
<array>
<dict>
<key>Filename</key>
<string>toolbar.html</string>
<key>Identifier</key>
<string>page-data-toolbar</string>
<key>Label</key>
<string>Viewport Width</string>
</dict>
</array>
</dict>
<key>Content</key>
<dict>
<key>Scripts</key>
<dict/>
</dict>
<key>DeveloperIdentifier</key>
<string></string>
<key>ExtensionInfoDictionaryVersion</key>
<string>1.0</string>
<key>Permissions</key>
<dict>
<key>Website Access</key>
<dict/>
</dict>
</dict>
</plist>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page data Toolbar</title>
<style>
.vpLabel {
text-align: center;
}
</style>
</head>
<body>
<div class="vpLabel">
Viewport Width:
<span id="wLabel"></span>
<!-- x
<span id="hLabel"></span> -->
</div>
<script>
var wLabel = document.getElementById('wLabel');
// var hLabel = document.getElementById('hLabel');
function update() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
// var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
wLabel.innerText = w;
// hLabel.innerText = h;
}
window.addEventListener('resize', update);
update();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment