I apologize for the oversight (in #1). You're right, Chrome does not allow content scripts to run on internal pages like 'chrome://history/' directly. However, you can create a custom history page that replicates the functionality you need and modify it according to your requirements.
Here's a new approach:
Create a manifest.json file for your extension:
{
"manifest_version": 2,
"name": "Custom History Enhancements",
"version": "1.0",
"description": "Improves the behavior of Chrome's History tab",
"permissions": ["tabs", "history"],
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": {
"48": "icon.png"
}
}
Add an appropriate icon (icon.png) to your extension's folder.
![icon](https://user-images.githubusercontent.com/8357118/233509980-92dd7955-0b6c-4f42-a45b-22289b0da9a9.png)
Create a popup.html file for the browser action popup:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Custom History</h1>
<input type="date" id="custom-date-picker">
<div id="custom-history-list"></div>
<script src="popup.js"></script>
</body>
</html>
popup.js
const datePicker = document.getElementById('custom-date-picker');
const historyList = document.getElementById('custom-history-list');
datePicker.addEventListener('change', (event) => {
const selectedDate = event.target.value;
filterHistoryEntriesByDate(selectedDate);
});
function filterHistoryEntriesByDate(selectedDate) {
chrome.history.search({
text: '',
startTime: new Date(selectedDate).getTime(),
endTime: new Date(selectedDate).getTime() + 86400000,
maxResults: 1000
}, (results) => {
historyList.innerHTML = '';
for (const entry of results) {
const entryElement = document.createElement('div');
entryElement.classList.add('entry');
const entryTitle = document.createElement('a');
entryTitle.href = entry.url;
entryTitle.target = '_blank';
entryTitle.textContent = entry.title || entry.url;
entryElement.appendChild(entryTitle);
historyList.appendChild(entryElement);
}
});
}
style.css
body {
width: 300px;
font-family: Arial, sans-serif;
}
h1 {
font-size: 20px;
margin-bottom: 10px;
}
.entry {
margin-bottom: 4px;
}