message: time slider is now working both way
diff: @@ -3,6 +3,7 @@ import Slider from 'rc-slider';
  import Tooltip from 'rc-tooltip';
  import {useAppSelector, useAppDispatch} from '../state-management/hooks';
  import {setRenderIndex} from '../state-management/slices/SnapshotSlice';
  +import {selectFilterState} from '../state-management/slices/FilterSlice';
  const {Handle} = Slider;
  @@ -47,8 +48,29 @@ function MainSlider() {
  const snapshotHistory = useAppSelector(
  state => state.snapshot.snapshotHistory,
  );
  + const filterData = useAppSelector(selectFilterState);
  console.log('this is renderIndex ', renderIndex);
  console.log('this is snapshotHistory length ', snapshotHistory.length);
  +
  + //indexDiff is used to ensure the index of filter matches the index of the snapshots array in the backend
  + let indexDiff: number = 0;
  + if (filterData[0] && filterData[0].indexDiff) {
  + indexDiff = filterData[0].indexDiff;
  + }
  +
  + const timeTravelFunc = (index: number) => {
  + // variable to store/reference connection
  + const backgroundConnection = chrome.runtime.connect();
  + //const test = chrome.extension.getBackgroundPage();
  + // post the message with index in payload to the connection
  + backgroundConnection.postMessage({
  + action: 'snapshotTimeTravel',
  + tabId: chrome.devtools.inspectedWindow.tabId,
  + payload: {
  + snapshotIndex: index + indexDiff,
  + },
  + });
  + };
  return (
  <div>
  <Slider
  @@ -57,6 +79,7 @@ function MainSlider() {
  value={renderIndex}
  onChange={(index: number) => {
  dispatch(setRenderIndex(index));
  + timeTravelFunc(index);
  }}
  handle={handle}
  />
  