Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

New "Popup" Version #2

Closed
TheMapSmith opened this issue Apr 20, 2023 · 1 comment
Closed

New "Popup" Version #2

TheMapSmith opened this issue Apr 20, 2023 · 1 comment

Comments

@TheMapSmith
Copy link
Owner

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

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;
}
@TheMapSmith TheMapSmith mentioned this issue Apr 20, 2023
Closed
@TheMapSmith
Copy link
Owner Author

Popup view 1

image

Date Picker

image

Listing

image

TheMapSmith added a commit that referenced this issue Apr 20, 2023
@TheMapSmith
updates #2
4cbd866
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TheMapSmith