Skip to content

GitLab

T
tangled
Commit 86cfd061 authored by CrystalFaith's avatar CrystalFaith Committed by Commit Bot
Browse files
Options

[Extensions Docs] Sample extension that demonstrates History Override 

History page override example that uses the History API with
vanilla JavaScript and CSS.
Still has basic history page functions, but now organizes history in Google
colored blocks.
Can search through previous week history by key words and delete single entry
or delete in bulk.

Bug: 41212
Change-Id: Ib2e7c9e7465c08be856991899abeeaef77eceb22
Reviewed-on: https://chromium-review.googlesource.com/731660Reviewed-by: default avatarDevlin <rdevlin.cronin@chromium.org>
Commit-Queue: Crystal Lambert <crystallambert@chromium.org>
Cr-Commit-Position: refs/heads/master@{#516367}
parent 47d58b9c
Hide whitespace changes
Inline Side-by-side
Showing with 270 additions and 0 deletions
chrome/common/extensions/docs/examples/api/history/historyOverride/history.html 0 → 100644
View file @ 86cfd061
<html>
<head>
<title>History</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="searchBar">
<h1>History<sup>2</sup></h1>
<input id="searchInput" type="text" name="search"
placeholder="Search History">
<input type="submit" id="searchSubmit" value="Submit">
<br>
<br>
<input type="submit" id="deleteSelected" value="Delete Selected">
<br>
<br>
<input type="submit" id="removeAll" value="Remove All">
<br>
<br>
<input type="submit" id="seeAll" value="See All">
</div>
<div id="historyDiv">
</div>
<template id="historyTemplate">
<div class="history">
<div class="imageDiv">
<a class="titleLink"></a>
</div>
<div class="urlDiv">
<p class="pageName"></p>
</div>
<div class="removeDiv">
<a>
<button class="removeButton">Delete</button>
<input type="checkbox" class="removeCheck"/>
</a>
</div>
</div>
</template>
<script src="logic.js"></script>
</body>
</html>
chrome/common/extensions/docs/examples/api/history/historyOverride/logic.js 0 → 100644
View file @ 86cfd061
// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
const kMillisecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
const kOneWeekAgo = (new Date).getTime() - kMillisecondsPerWeek;
let historyDiv = document.getElementById('historyDiv');
const kColors = ['#4688F1', '#E8453C', '#F9BB2D', '#3AA757'];
let $ = document.getElementById.bind(document);
function constructHistory(historyItems) {
let template = $('historyTemplate');
for (let item of historyItems) {
let displayDiv = template.content.querySelector("#history, div");
let randomColor = kColors[Math.floor(Math.random() * kColors.length)];
displayDiv.style.backgroundColor = randomColor;
let titleLink = template.content.querySelector('.titleLink, a');
let pageName = template.content.querySelector('.pageName, p');
let removeButton = template.content.querySelector('.removeButton, button');
let checkbox = template.content.querySelector('.removeCheck, input');
checkbox.setAttribute('value', item.url);
let favicon = document.createElement('img');
let host = new URL(item.url).host;
titleLink.href = item.url;
favicon.src = 'chrome://favicon/' + item.url;
titleLink.textContent = host;
titleLink.appendChild(favicon);
pageName.innerText = item.title;
if (item.title === '') {
pageName.innerText = host;
}
var clone = document.importNode(template.content, true);
clone.querySelector('.removeButton, button')
.addEventListener('click', function() {
chrome.history.deleteUrl({url: item.url}, function() {
location.reload();
});
});
historyDiv.appendChild(clone);
}
}
chrome.history.search({
text: '',
startTime: kOneWeekAgo,
maxResults: 99
}, constructHistory);
$('searchSubmit').onclick = function() {
historyDiv.innerHTML = " "
let searchQuery = document.getElementById('searchInput').value
chrome.history.search({
text: searchQuery,
startTime: kOneWeekAgo
}, constructHistory)
}
$('deleteSelected').onclick = function() {
let checkboxes = document.getElementsByTagName('input');
for (var i =0; i<checkboxes.length; i++) {
if (checkboxes[i].checked == true) {
chrome.history.deleteUrl({url: checkboxes[i].value})
}
}
location.reload();
}
$('removeAll').onclick = function() {
chrome.history.deleteAll(function() {
location.reload();
});
}
$('seeAll').onclick = function() {
location.reload();
}
chrome/common/extensions/docs/examples/api/history/historyOverride/manifest.json 0 → 100644
View file @ 86cfd061
{
"manifest_version": 2,
"name": "History Override",
"description": "Overrides the History Page",
"version": "1.0",
"chrome_url_overrides" : {
"history": "history.html"
},
"browser_action": {
"default_title": "History"
},
"permissions": [
"history",
"chrome://favicon/"
],
"icons": {
"16": "history16.png",
"32": "history32.png",
"48": "history48.png",
"128": "history128.png"
}
}
chrome/common/extensions/docs/examples/api/history/historyOverride/style.css 0 → 100644
View file @ 86cfd061
/* Copyright 2017 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.*/
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* make scrollbar invisible */
}
#searchBar {
float: left;
width: 250px;
height: auto;
position: absolute;
top: 10;
left: 10;
}
#historyDiv {
color: white;
font-size: 16px;
max-width: 1020px;
min-width: 320px;
max-height: 98vh;
min-height: 500px;
position: absolute;
top: 10;
left: 260;
overflow: scroll;
overflow-x: hidden;
}
.history {
float: left;
margin-right: 10px;
margin-bottom: 10px;
width: 300px;
height: 150px;
word-wrap: break-word;
padding: 10px;
display:inline-block;
}
.title {
color: black;
float: left;
position: relative;
left: 15;
bottom: 15;
}
img {
float: left;
position: relative;
left: 5;
top: 2;
margin-right: 8px;
}
.imageDiv {
background-color: white;
width: 310px;
height: 20px;
position: relative;
right: 0;
overflow-y: hidden;
}
.removeButton {
position: relative;
right: 0;
bottom: 0;
height: 30px;
width: 50px;
border: none;
background-color: white;
}
.urlDiv {
position: relative;
right: 0;
top: -10;
height: 90px;
width: 300px;
overflow-y: hidden;
}
.removeCheck {
position: relative;
left: 230;
bottom: -15;
height: 30px;
}
#searchSubmit {
height: 30px;
width: 50px;
border: none;
background-color: #3AA757;
}
#deleteSelected {
height: 30px;
width: 185px;
border: none;
background-color: #F9BB2D;
}
#removeAll {
height: 30px;
width: 185px;
border: none;
background-color: #E8453C;
}
#seeAll {
height: 30px;
width: 185px;
border: none;
background-color: #4688F1;
}
#searchInput {
height: 30px;
}
h1 {
font-size: 50px;
font-family: Impact, Charcoal, sans-serif;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment