MariusBongarts

{
  "compilerOptions": {
    ...
    "types": ["chrome", "@types/chrome"]
  },
}

MariusBongarts

const path = require("path");
const config = require("./webpack.config");

module.exports = {
  ...config,
  mode: "development",
  devServer: {
    static: {
      directory: path.join(__dirname, "extension"),
    },

MariusBongarts

{
  "name": "chrome-history-extension",
  ...
  "permissions": ["history"]
}

MariusBongarts

{
  "name": "chrome-history-extension",
  ...
  "scripts": {
    "start": "webpack serve --config webpack.dev.js",
    "build": "webpack",
  },
  ...
}

MariusBongarts

{
  "name": "chrome-history-extension",
  ...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
  },
  ...
}

MariusBongarts

{
  "action": {
    "default_title": "Chrome History Dashboard",
    "default_popup": "./index.html",
    "default_icon": {              
      "16": "images/icon16.png",   // optional
      "24": "images/icon24.png",   // optional
      "32": "images/icon32.png"    // optional
    },
  }

MariusBongarts

export const History: React.FC<HistoryProps> = ({ items }) => {
  return (
    <StyledList>
      {items.map((item) => (
        <HistoryItem key={item.id} item={item} />
      ))}
    </StyledList>
  );
};

MariusBongarts

const StyledList = styled.ul`
  list-style: none;
  padding: 0;
  margin: 0;
`;

MariusBongarts

import React from "react";
import { useChromeHistorySearch } from "../hooks/useChromeHistorySearch";
import { History } from "./History";

interface DashboardProps {}

const query = { text: "", maxResults: 100 };

export const Dashboard: React.FC<DashboardProps> = () => {
  const mostRecentItems = useChromeHistorySearch(query);

MariusBongarts

import React from "react";

interface HistoryItemProps {
  item: chrome.history.HistoryItem;
}

export const HistoryItem: React.FC<HistoryItemProps> = ({ item }) => {
  return (
    <li>
      <span>{new Date(item.lastVisitTime ?? 0).toLocaleTimeString()}</span>