Extract chrome context

src/App/component.stories.tsx

@@ -2,7 +2,8 @@ import './component.css'
 import '../index.css'
 import type { Meta, StoryObj } from '@storybook/react'
 import App from './component'
-import { chrome } from './fixtures/chrome.mock'
+import { ChromeContext } from '../infrastructure/chrome'
+import { chrome } from '../infrastructure/chrome.mock'
 
 const meta: Meta<typeof App> = {
   component: App,
@@ -11,8 +12,10 @@ const meta: Meta<typeof App> = {
 export default meta
 type Story = StoryObj<typeof App>
 
-Object.assign(global, { chrome })
-
 export const Primary: Story = {
-  render: () => <App />,
+  render: () => (
+    <ChromeContext.Provider value={chrome}>
+      <App />
+    </ChromeContext.Provider>
+  ),
 }

src/App/component.test.tsx

@@ -16,6 +16,11 @@ test('renders App', async () => {
       ],
     },
   ])
+  vi.mocked(chrome.runtime.getManifest).mockReturnValue({
+    manifest_version: 3,
+    name: 'bntp-mock',
+    version: '0.0.0.0',
+  })
 
   render(<App />)
 

src/Bookmarks/repository.ts

@@ -1,25 +1,30 @@
 import { Bookmark, BookmarkFolder, BookmarkFolderID, FolderCollapse, Position, isBookmarkFolderIDArray } from './model'
-import { useEffect, useState } from 'react'
+import { Chrome, ChromeContext } from '../infrastructure/chrome'
+import { useContext, useEffect, useState } from 'react'
 import { useChromeStorage } from '../infrastructure/chromeStorage'
 
 export const useBookmarkFolders = () => {
   const [bookmarkFolders, setBookmarkFolders] = useState<readonly BookmarkFolder[]>([])
+  const chrome = useContext(ChromeContext)
   useEffect(() => {
-    getBookmarkFolders()
+    getBookmarkFolders(chrome)
       .then((b) => setBookmarkFolders(b))
       .catch((e) => console.error(e))
-    return subscribeBookmarks(setBookmarkFolders)
+    return subscribeBookmarks(chrome, setBookmarkFolders)
   }, [])
   return bookmarkFolders
 }
 
-const getBookmarkFolders = async (): Promise<readonly BookmarkFolder[]> => {
+const getBookmarkFolders = async (chrome: Chrome): Promise<readonly BookmarkFolder[]> => {
   return traverseBookmarkTree(await chrome.bookmarks.getTree())
 }
 
-const subscribeBookmarks = (handler: (bookmarkFolders: readonly BookmarkFolder[]) => void): (() => void) => {
+const subscribeBookmarks = (
+  chrome: Chrome,
+  handler: (bookmarkFolders: readonly BookmarkFolder[]) => void,
+): (() => void) => {
   const listener = () => {
-    getBookmarkFolders()
+    getBookmarkFolders(chrome)
       .then((b) => handler(b))
       .catch((e) => console.error(e))
   }

src/Manifest/component.tsx

@@ -1,14 +1,15 @@
-import { FC, useState } from 'react'
-import { getManifest } from './repository'
+import { FC, useContext } from 'react'
+import { ChromeContext } from '../infrastructure/chrome'
 
 const ManifestComponent: FC = () => {
-  const [manifest] = useState(getManifest())
+  const chrome = useContext(ChromeContext)
+  const manifest = chrome.runtime.getManifest()
   return (
     <>
       <div>
         Thank you for using the extension. {manifest.name} {manifest.version}
       </div>
-      <a href={`https://chrome.google.com/webstore/detail/${manifest.id}`}>
+      <a href={`https://chrome.google.com/webstore/detail/${chrome.runtime.id}`}>
         <label>Review on Web Store</label>
       </a>
     </>

src/TopSites/repository.ts

@@ -1,15 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
+import { ChromeContext } from '../infrastructure/chrome'
 import { TopSite } from './model'
 
 export const useTopSites = () => {
   const [topSites, setTopSites] = useState<readonly TopSite[]>([])
+  const chrome = useContext(ChromeContext)
   useEffect(() => {
-    void getTopSites().then(setTopSites)
+    chrome.topSites
+      .get()
+      .then(setTopSites)
+      .catch((e) => console.error(e))
   }, [])
   return topSites
 }
-
-const getTopSites = async (): Promise<readonly TopSite[]> =>
-  new Promise((resolve) => {
-    chrome.topSites.get((topSites) => resolve(topSites))
-  })

src/App/fixtures/chrome.mock.ts → src/infrastructure/chrome.mock.ts

@@ -1,15 +1,16 @@
 /* eslint-disable @typescript-eslint/require-await */
 
-import { StorageAreaMock } from '../../infrastructure/chromeStorage.mock'
-import fixtureBookmarks from './bookmarks'
-import fixtureTopSites from './topSites'
+import { Bookmarks, Chrome, Runtime, Storage, TopSites } from './chrome'
+import { StorageAreaMock } from './chromeStorage.mock'
+import fixtureBookmarks from './fixtures/bookmarks'
+import fixtureTopSites from './fixtures/topSites'
 
 const nullEvent = Object.freeze({
   addListener: () => undefined,
   removeListener: () => undefined,
 })
 
-const bookmarks = Object.freeze({
+const bookmarks: Bookmarks = Object.freeze({
   getTree: async () => fixtureBookmarks,
   update: async () => undefined,
   remove: async () => undefined,
@@ -20,15 +21,15 @@ const bookmarks = Object.freeze({
   onRemoved: nullEvent,
 })
 
-const topSites = Object.freeze({
-  get: (callback: (topSites: chrome.topSites.MostVisitedURL[]) => void) => callback(fixtureTopSites),
+const topSites: TopSites = Object.freeze({
+  get: async () => fixtureTopSites,
 })
 
-const storage = Object.freeze({
+const storage: Storage = Object.freeze({
   sync: new StorageAreaMock(),
 })
 
-const runtime = Object.freeze({
+const runtime: Runtime = Object.freeze({
   id: 'dummy',
   getManifest: (): chrome.runtime.Manifest => ({
     name: 'BNTP: Bookmarks in New Tab Page',
@@ -37,7 +38,7 @@ const runtime = Object.freeze({
   }),
 })
 
-export const chrome = Object.freeze({
+export const chrome: Chrome = Object.freeze({
   bookmarks,
   topSites,
   storage,

src/infrastructure/chrome.ts

@@ -0,0 +1,33 @@
+import { createContext } from 'react'
+
+export type Bookmarks = {
+  getTree: () => Promise<chrome.bookmarks.BookmarkTreeNode[]>
+  onChanged: Pick<typeof chrome.bookmarks.onChanged, 'addListener' | 'removeListener'>
+  onChildrenReordered: Pick<typeof chrome.bookmarks.onChildrenReordered, 'addListener' | 'removeListener'>
+  onCreated: Pick<typeof chrome.bookmarks.onCreated, 'addListener' | 'removeListener'>
+  onMoved: Pick<typeof chrome.bookmarks.onMoved, 'addListener' | 'removeListener'>
+  onRemoved: Pick<typeof chrome.bookmarks.onRemoved, 'addListener' | 'removeListener'>
+}
+
+export type TopSites = {
+  get: () => Promise<chrome.topSites.MostVisitedURL[]>
+}
+
+export type Runtime = Pick<typeof chrome.runtime, 'id' | 'getManifest'>
+
+export type StorageAreaName = 'sync'
+
+export type Storage = {
+  [k in StorageAreaName]: Pick<chrome.storage.StorageArea, 'get' | 'set'> & {
+    onChanged: Pick<chrome.storage.StorageArea['onChanged'], 'addListener' | 'removeListener'>
+  }
+}
+
+export type Chrome = {
+  bookmarks: Bookmarks
+  topSites: TopSites
+  runtime: Runtime
+  storage: Storage
+}
+
+export const ChromeContext = createContext<Chrome>(chrome)

src/infrastructure/chromeStorage.ts

@@ -1,19 +1,21 @@
-import { Dispatch, useEffect, useState } from 'react'
+import { Chrome, ChromeContext, StorageAreaName } from './chrome'
+import { Dispatch, useContext, useEffect, useState } from 'react'
 import { useLocalStorageCache } from './localStorageCache'
 
 export type Spec<T> = {
-  areaName: chrome.storage.AreaName
+  areaName: StorageAreaName
   key: string
   initialValue: T
   isType: (value: unknown) => value is T
 }
 
 export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, Dispatch<T>] => {
+  const chrome = useContext(ChromeContext)
   const [storedValue, setStoredValue] = useState<T>(spec.initialValue)
   useEffect(
     () => {
-      initialLoad(spec, setStoredValue)
-      return subscribeChange(spec, setStoredValue)
+      initialLoad(chrome, spec, setStoredValue)
+      return subscribeChange(chrome, spec, setStoredValue)
     },
     // Don't set "spec" because it causes infinite loop.
     [spec.key, spec.areaName],
@@ -27,7 +29,7 @@ export const useChromeStorage = <T>(spec: Spec<T>): readonly [T, Dispatch<T>] =>
   ]
 }
 
-const initialLoad = <T>(spec: Spec<T>, setStoredValue: Dispatch<T>) => {
+const initialLoad = <T>(chrome: Chrome, spec: Spec<T>, setStoredValue: Dispatch<T>) => {
   chrome.storage[spec.areaName]
     .get(spec.key)
     .then((items) => {
@@ -48,7 +50,7 @@ const initialLoad = <T>(spec: Spec<T>, setStoredValue: Dispatch<T>) => {
     .catch((e) => console.error(e))
 }
 
-const subscribeChange = <T>(spec: Spec<T>, setStoredValue: Dispatch<T>) => {
+const subscribeChange = <T>(chrome: Chrome, spec: Spec<T>, setStoredValue: Dispatch<T>) => {
   const area = chrome.storage[spec.areaName]
   const listener = (changes: { [key: string]: chrome.storage.StorageChange }) => {
     if (!(spec.key in changes)) {