├── README.md ├── background.js ├── bookmarks.html ├── bookmarks.js ├── devtools.html ├── devtools.js ├── history.html ├── history.js ├── images ├── bookmarks.png ├── folder-open.png ├── folder.png ├── history.png ├── icon128.png ├── icon16.png ├── icon48.png ├── large-preview.jpg ├── small-preview.jpg └── website.png ├── manifest.json ├── style.css ├── website.html └── website.js /README.md: -------------------------------------------------------------------------------- 1 | Bookmarks, History, Website DevTools Sidebar Panel 2 | ================================================== 3 | 4 | This Google Chrome extension shows Bookmarks, History, any Website or Google Search as Chrome Developer Tools Panels. It can be docked to the right, making a real sidebar. 5 | 6 | [![Available in the Chrome Web Store](https://developer.chrome.com/webstore/images/ChromeWebStore_BadgeWBorder_v2_340x96.png)](https://chrome.google.com/webstore/detail/bookmarks-history-website/ghcobbkjdobahlopkoohegcbgmnikpaa) 7 | 8 | To open it, right click anywhere on a web page and choose _Inspect Element_ or click _Ctrl-Shift-I_ to open Chrome DevTools, then click the **⋮** button to show the popup and choose the right _Dock side_ button. Finally go to the _Bookmarks_, _History_ or _Website_ panel on top: 9 | 10 | ![How to open Bookmarks, History, Website DevTools Sidebar Panel](http://i.imgur.com/jehSlib.gif) 11 | 12 | Screenshot 13 | ---------- 14 | 15 | Here are all three panels combined: 16 | 17 | ![Screenshot of Bookmarks, History, Website DevTools Sidebar Panel](https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/master/images/large-preview.jpg) 18 | 19 | Authors & License 20 | ----------------- 21 | 22 | © 2015 Jerzy Głowacki under GNU GPL 3 License. 23 | 24 | Small-n-flat icons by Paomedia in Public Domain. 25 | -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | var ports = []; 2 | 3 | chrome.runtime.onConnect.addListener(function(port) { 4 | if (port.name !== "bookmarks" && port.name !== "history") 5 | return; 6 | ports.push(port); 7 | var extensionListener = function(message, sender, sendResponse) { 8 | if (message.name === "getBookmarks") { 9 | chrome.bookmarks.getTree(function(tree) { 10 | ports.forEach(function(port) { 11 | if(port.name === "bookmarks") 12 | port.postMessage(tree); 13 | }); 14 | }); 15 | } else if (message.name === "getHistory") { 16 | chrome.history.search({text: '', /*startTime: (new Date()).getTime() - 604800000, maxResults: 1000*/}, function(tree) { 17 | ports.forEach(function(port) { 18 | if(port.name === "history") 19 | port.postMessage(tree); 20 | }); 21 | }); 22 | } 23 | }; 24 | port.onMessage.addListener(extensionListener); 25 | port.onDisconnect.addListener(function(port) { 26 | var i = ports.indexOf(port); 27 | if(i !== -1) 28 | ports.splice(i, 1); 29 | port.onMessage.removeListener(extensionListener); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /bookmarks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /bookmarks.js: -------------------------------------------------------------------------------- 1 | function update(tree) { 2 | var ul = document.getElementById('bookmarks'); 3 | ul.innerHTML = render(tree[0].children); 4 | ul.addEventListener('click', function(e) { 5 | if(e.target.classList.contains('folder')) { 6 | e.target.classList.toggle('open'); 7 | return false; 8 | } 9 | }); 10 | } 11 | 12 | function render(tree) { 13 | var html = ''; 14 | tree.forEach(function(i) { 15 | html += '

' : '#" class="folder">') + 17 | i.title.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"') + '' + 18 | (i.children && i.children.length ? '

' + render(i.children) + '' : '') + '

'; 19 | }); 20 | return html; 21 | } 22 | -------------------------------------------------------------------------------- /devtools.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /devtools.js: -------------------------------------------------------------------------------- 1 | 2 | chrome.devtools.panels.create("Bookmarks", "images/bookmarks.png", "bookmarks.html", function(panel) { 3 | var win, tree; 4 | var port = chrome.runtime.connect({ 5 | name: 'bookmarks' 6 | }); 7 | port.onMessage.addListener(function(message) { 8 | tree = message; 9 | if(win && tree) { 10 | win.update(tree); 11 | tree = null; 12 | } 13 | }); 14 | port.postMessage({ 15 | name: 'getBookmarks' 16 | }); 17 | panel.onShown.addListener(function(panelWin) { 18 | win = panelWin; 19 | if(tree) { 20 | win.update(tree); 21 | tree = null; 22 | } 23 | }); 24 | }); 25 | 26 | chrome.devtools.panels.create("History", "images/history.png", "history.html", function(panel) { 27 | var win, tree; 28 | var port = chrome.runtime.connect({ 29 | name: 'history' 30 | }); 31 | port.onMessage.addListener(function(message) { 32 | tree = message; 33 | if(win && tree) { 34 | win.update(tree); 35 | tree = null; 36 | } 37 | }); 38 | port.postMessage({ 39 | name: 'getHistory' 40 | }); 41 | panel.onShown.addListener(function(panelWin) { 42 | win = panelWin; 43 | if(tree) { 44 | win.update(tree); 45 | tree = null; 46 | } 47 | }); 48 | }); 49 | 50 | chrome.devtools.panels.create("Website", "images/website.png", "website.html", function(panel) { 51 | }); 52 | -------------------------------------------------------------------------------- /history.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /history.js: -------------------------------------------------------------------------------- 1 | function update(tree) { 2 | var ul = document.getElementById('history'); 3 | ul.innerHTML = render(tree); 4 | } 5 | 6 | function render(tree) { 7 | var html = ''; 8 | tree.forEach(function(i) { 9 | html += '

' + (i.title ? i.title.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"') : i.url) + '

'; 10 | }); 11 | return html; 12 | } -------------------------------------------------------------------------------- /images/bookmarks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/bookmarks.png -------------------------------------------------------------------------------- /images/folder-open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/folder-open.png -------------------------------------------------------------------------------- /images/folder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/folder.png -------------------------------------------------------------------------------- /images/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/history.png -------------------------------------------------------------------------------- /images/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/icon128.png -------------------------------------------------------------------------------- /images/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/icon16.png -------------------------------------------------------------------------------- /images/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/icon48.png -------------------------------------------------------------------------------- /images/large-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/large-preview.jpg -------------------------------------------------------------------------------- /images/small-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/small-preview.jpg -------------------------------------------------------------------------------- /images/website.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/niutech/chrome-devtools-sidebar/7a5c000cde6267faffe6b96081a5f2bec5ac542a/images/website.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Bookmarks, History, Website DevTools Sidebar Panel", 3 | "version": "0.1", 4 | "description": "Shows Bookmarks, History, any Website or Google Search in Chrome Developer Tools Sidebar Panels.", 5 | "devtools_page": "devtools.html", 6 | "icons": { 7 | "16": "images/icon16.png", 8 | "48": "images/icon48.png", 9 | "128": "images/icon128.png" 10 | }, 11 | "permissions": [ 12 | "bookmarks", 13 | "history" 14 | ], 15 | "background": { 16 | "scripts": ["background.js"] 17 | }, 18 | "manifest_version": 2 19 | } 20 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | a { 6 | color: #333; 7 | text-decoration: none; 8 | } 9 | 10 | a:hover { 11 | text-decoration: underline; 12 | } 13 | 14 | ul { 15 | list-style: none; 16 | padding-left: 20px; 17 | } 18 | 19 | li { 20 | line-height: 20px; 21 | white-space: nowrap; 22 | overflow: hidden; 23 | text-overflow: ellipsis; 24 | } 25 | 26 | .folder { 27 | padding-left: 20px; 28 | background: url(images/folder.png) no-repeat center left; 29 | } 30 | 31 | .folder.open { 32 | background-image: url(images/folder-open.png); 33 | } 34 | 35 | .folder + ul { 36 | display: none; 37 | } 38 | 39 | .folder.open + ul { 40 | display: block; 41 | } 42 | 43 | ul img { 44 | width: 16px; 45 | height: 16px; 46 | margin-right: 4px; 47 | vertical-align: text-bottom; 48 | } 49 | 50 | #website input { 51 | width: 30px; 52 | padding: 3px; 53 | } 54 | 55 | #q { 56 | width: calc(100% - 90px) !important; 57 | } 58 | 59 | iframe { 60 | border: 0; 61 | width: 100%; 62 | height: calc(100vh - 95px); 63 | } 64 | 65 | .footer { 66 | color: #aaa; 67 | font-size: 80%; 68 | text-align: center; 69 | } -------------------------------------------------------------------------------- /website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /website.js: -------------------------------------------------------------------------------- 1 | document.getElementById('website').addEventListener('submit', function() { 2 | var q = document.getElementById('q').value; 3 | if(q.indexOf('http') === 0) { 4 | this.action = q; 5 | } 6 | return true; 7 | }); 8 | document.getElementById('back').addEventListener('click', function() { 9 | history.back(); 10 | }); 11 | document.getElementById('forward').addEventListener('click', function() { 12 | history.forward(); 13 | }); 14 | --------------------------------------------------------------------------------