MariusBongarts

type HistoryItem = chrome.history.HistoryItem;
export const useChromeHistorySearch = (
  query: chrome.history.HistoryQuery
): HistoryItem[] => {
  const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
  useEffect(() => {
    chrome.history
      .search(query)
      .then((historyItems) => setHistoryItems(historyItems))
      .catch(() => setHistoryItems([]));

MariusBongarts

import React from "react";
import { truncateString, urlWithoutSchema } from "../services/helper";
import {
  StyledInfo,
  StyledHistoryItem,
  StyledItemLink,
  StyledTitle,
  StyledTime,
} from "./HistoryItem.styled";

MariusBongarts

export const StyledInfo = styled.div`
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  padding: 4px;
`;

export const StyledItemLink = styled.a`
  color: var(--light-grey);

MariusBongarts

import React from "react";
import { truncateString, urlWithoutSchema } from "../services/helper";
import {
  StyledInfo,
  StyledHistoryItem,
  StyledItemLink,
  StyledTitle,
  StyledTime,
} from "./HistoryItem.styled";

MariusBongarts

useEffect(() => {
  chrome.history.search({ text: "", maxResults: 10 }, (data) => {
    console.log(data);
  });
}, []);

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",
  },
  ...
}