diff --git a/src/app/content/ankiWeb/helpers/fillForm.tsx b/src/app/content/ankiWeb/helpers/fillForm.tsx
new file mode 100644
index 0000000..d601985
--- /dev/null
+++ b/src/app/content/ankiWeb/helpers/fillForm.tsx
@@ -0,0 +1,53 @@
+import { INote } from '@entities/note'
+
+export function fillForm(note: INote) {
+  const ankiFaceElement = document.querySelector<HTMLDivElement>(
+    'body > div > main > form > div:nth-child(1) > div > div',
+  )
+  const ankiBackElement = document.querySelector<HTMLDivElement>(
+    'body > div > main > form > div:nth-child(2) > div > div',
+  )
+
+  if (ankiFaceElement) {
+    ankiFaceElement.innerText = getFrontText(ankiFaceElement.innerText, note)
+    ankiFaceElement.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+
+  if (ankiBackElement) {
+    ankiBackElement.innerText = getBackText(ankiBackElement.innerText, note)
+    ankiBackElement.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+
+function getFrontText(initialText: string, note: INote) {
+  return (
+    initialText +
+    ' ' +
+    note.text +
+    (note.transcription ? '\n' + note.transcription : '') +
+    (note.context ? '\n' + note.context : '')
+  )
+}
+
+function getBackText(initialText: string, note: INote) {
+  const blankedHintText = getBlankedHintText(note.text)
+  return (
+    initialText +
+    ' ' +
+    (note.translation ? note.translation : '') +
+    (blankedHintText ? '\n' + blankedHintText : '')
+  )
+}
+
+function getBlankedHintText(text: string) {
+  return text
+    .split(' ')
+    .map(
+      (word) =>
+        word[0] +
+        Array(word.length - 1)
+          .fill(' _')
+          .join(''),
+    )
+    .join(' ')
+}
diff --git a/src/app/content/ankiWeb/index.ts b/src/app/content/ankiWeb/index.ts
index 7adb628..ba84c6e 100644
--- a/src/app/content/ankiWeb/index.ts
+++ b/src/app/content/ankiWeb/index.ts
@@ -1 +1,10 @@
+import { autoFillFormHandler } from '@features/note/FillFlashcardForm'
+
+import { browser } from '@shared/browser'
+
+import { fillForm } from './helpers/fillForm'
+
 console.log('anki web content code')
+browser.runtime.onConnect.addListener(function (port) {
+  autoFillFormHandler(port, fillForm)
+})
diff --git a/src/entities/tab/index.ts b/src/entities/tab/index.ts
new file mode 100644
index 0000000..ef30951
--- /dev/null
+++ b/src/entities/tab/index.ts
@@ -0,0 +1,18 @@
+import { atom, onMount, task } from 'nanostores'
+
+import { ITab, browser } from '@shared/browser'
+import { addToast, getErrorToast } from '@shared/ui/Toast'
+
+export const $activeTab = atom<ITab | null>(null)
+
+onMount($activeTab, () => {
+  task(async () => {
+    const getResult = await browser.tabs.getActiveTab()
+
+    if (getResult.data) {
+      $activeTab.set(getResult.data)
+    } else {
+      addToast(getErrorToast(getResult.error))
+    }
+  })
+})
diff --git a/src/features/note/FillFlashcardForm/api/index.ts b/src/features/note/FillFlashcardForm/api/index.ts
new file mode 100644
index 0000000..9e6bec2
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/api/index.ts
@@ -0,0 +1,44 @@
+import { INote } from '@entities/note'
+
+import { PortEmitter, PortReceiver } from '@shared/browser'
+
+interface Request {
+  message: 'FILL_FORM'
+  data: INote
+}
+
+interface Response {
+  message: 'FILL_FORM_RESULT'
+  data: INote
+}
+
+export const autoFillForm = (port: PortEmitter, note: INote) => {
+  port.postMessage<Request>({ message: 'FILL_FORM', data: note })
+}
+
+export const autoFillFormHandler = (
+  port: PortReceiver,
+  callback: (note: INote) => void,
+) => {
+  port.onMessage<Request>((request) => {
+    if (request.message === 'FILL_FORM') {
+      callback(request.data)
+
+      port.postMessage<Response>({
+        message: 'FILL_FORM_RESULT',
+        data: request.data,
+      })
+    }
+  })
+}
+
+export const autoFillFormResult = (
+  port: PortEmitter,
+  callback: (response: Response['data']) => void,
+) => {
+  port.onMessage<Response>((response) => {
+    if (response.message === 'FILL_FORM_RESULT') {
+      callback(response.data)
+    }
+  })
+}
diff --git a/src/features/note/FillFlashcardForm/index.ts b/src/features/note/FillFlashcardForm/index.ts
new file mode 100644
index 0000000..fa050ac
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/index.ts
@@ -0,0 +1,3 @@
+export * from './api'
+export * from './ui'
+export * from './model'
diff --git a/src/features/note/FillFlashcardForm/model/index.ts b/src/features/note/FillFlashcardForm/model/index.ts
new file mode 100644
index 0000000..ab069fa
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/model/index.ts
@@ -0,0 +1 @@
+export { $ankiPort } from './store'
diff --git a/src/features/note/FillFlashcardForm/model/store.ts b/src/features/note/FillFlashcardForm/model/store.ts
new file mode 100644
index 0000000..896802c
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/model/store.ts
@@ -0,0 +1,25 @@
+import { computed } from 'nanostores'
+
+import { $activeTab } from '@entities/tab'
+
+import { PortEmitter } from '@shared/browser'
+
+export const $ankiPort = computed(
+  $activeTab,
+  (activeTab): PortEmitter | null => {
+    if (!activeTab?.id) return null
+    const isAnkiTab = activeTab
+      ? activeTab.url === 'https://ankiuser.net/add'
+      : false
+
+    if (isAnkiTab) {
+      const port = new PortEmitter({
+        tabId: activeTab.id,
+        connectInfo: { name: 'anki' },
+      })
+
+      return port
+    }
+    return null
+  },
+)
diff --git a/src/features/note/FillFlashcardForm/ui/FillFlashcardForm.tsx b/src/features/note/FillFlashcardForm/ui/FillFlashcardForm.tsx
new file mode 100644
index 0000000..7f570fa
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/ui/FillFlashcardForm.tsx
@@ -0,0 +1,53 @@
+import { useStore } from '@nanostores/preact'
+import { useEffect, useState } from 'preact/hooks'
+
+import { INote } from '@entities/note'
+
+import { browser } from '@shared/browser'
+import { useResetAfterDelay } from '@shared/libs/useResetAfterDelay'
+import { Button } from '@shared/ui/Button'
+import { AddCardIcon } from '@shared/ui/icons/AddCardIcon'
+import { DoneIcon } from '@shared/ui/icons/DoneIcon'
+
+import { autoFillForm, autoFillFormResult } from '../api'
+import { $ankiPort } from '../model/store'
+
+interface Props {
+  note: INote
+}
+
+export const FillFlashcardForm = ({ note }: Props) => {
+  const ankiPort = useStore($ankiPort)
+  const [isFormFilled, setIsFormFilled] = useState(false)
+  const resetAfterDelay = useResetAfterDelay({
+    reset: () => setIsFormFilled(false),
+  })
+
+  useEffect(() => {
+    ankiPort &&
+      autoFillFormResult(ankiPort, (data) => {
+        if (data.id === note.id) {
+          setIsFormFilled(true)
+          resetAfterDelay()
+        }
+      })
+  }, [ankiPort])
+
+  const fillAnkiForm = () => {
+    ankiPort && autoFillForm(ankiPort, note)
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      startIcon={isFormFilled ? <DoneIcon /> : <AddCardIcon />}
+      aria-label={
+        isFormFilled
+          ? 'Form filled'
+          : browser.i18n.getMessage('FILL_ANKI_BUTTON', note.text)
+      }
+      onClick={fillAnkiForm}
+      disabled={!ankiPort}
+    />
+  )
+}
diff --git a/src/features/note/FillFlashcardForm/ui/FillFlashcardFormNotAvailable.tsx b/src/features/note/FillFlashcardForm/ui/FillFlashcardFormNotAvailable.tsx
new file mode 100644
index 0000000..d4c4180
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/ui/FillFlashcardFormNotAvailable.tsx
@@ -0,0 +1,3 @@
+export const FillFlashcardFormNotAvailable = () => (
+  <span>Filling anki available only on anki page</span>
+)
diff --git a/src/features/note/FillFlashcardForm/ui/index.ts b/src/features/note/FillFlashcardForm/ui/index.ts
new file mode 100644
index 0000000..890bdaa
--- /dev/null
+++ b/src/features/note/FillFlashcardForm/ui/index.ts
@@ -0,0 +1,2 @@
+export { FillFlashcardForm } from './FillFlashcardForm'
+export { FillFlashcardFormNotAvailable } from './FillFlashcardFormNotAvailable'
diff --git a/src/shared/browser/chrome.ts b/src/shared/browser/chrome.ts
index 0729856..3ddacb7 100644
--- a/src/shared/browser/chrome.ts
+++ b/src/shared/browser/chrome.ts
@@ -1,5 +1,6 @@
 import { Result } from '@shared/libs/operationResult'
 
+import { PortReceiver } from './port'
 import { IBrowser } from './types'
 
 export const chromeBrowser: IBrowser = {
@@ -87,4 +88,37 @@ export const chromeBrowser: IBrowser = {
       return chrome.i18n.getMessage(key, substitutions)
     },
   },
+
+  runtime: {
+    onConnect: {
+      addListener: (callback) => {
+        chrome.runtime.onConnect.addListener((port) => {
+          callback(new PortReceiver(port))
+        })
+      },
+    },
+  },
+
+  tabs: {
+    getActiveTab: () => {
+      return new Promise((resolve) => {
+        chrome.tabs.query(
+          { active: true, currentWindow: true },
+          function (tabs) {
+            const tab = tabs[0]
+            if (tab?.id && tab?.url) {
+              resolve(Result.Success({ id: tab.id, url: tab.url }))
+            } else {
+              resolve(
+                Result.Error({
+                  type: 'ERROR_CAN_NOT_GET_ACTIVE_TAB',
+                  error: null,
+                }),
+              )
+            }
+          },
+        )
+      })
+    },
+  },
 }
diff --git a/src/shared/browser/index.ts b/src/shared/browser/index.ts
index af4a5aa..dd8dfd9 100644
--- a/src/shared/browser/index.ts
+++ b/src/shared/browser/index.ts
@@ -2,3 +2,5 @@ import { chromeBrowser } from './chrome'
 import { IBrowser } from './types'
 
 export const browser: IBrowser = chromeBrowser
+export type { ITab } from './types'
+export * from './port'
diff --git a/src/shared/browser/port/chromePort.ts b/src/shared/browser/port/chromePort.ts
new file mode 100644
index 0000000..788e4a5
--- /dev/null
+++ b/src/shared/browser/port/chromePort.ts
@@ -0,0 +1,79 @@
+import { IConnectionProps, IPort } from './types'
+
+export class ChromePortEmitter implements IPort {
+  name: string
+
+  private browserPort: chrome.runtime.Port | null
+
+  constructor(readonly connectionProps: IConnectionProps) {
+    this.browserPort = this.connect()
+    this.name = this.browserPort?.name ?? ''
+  }
+
+  private connect() {
+    const browserPort = chrome.tabs.connect(
+      this.connectionProps.tabId,
+      this.connectionProps.connectInfo,
+    )
+
+    browserPort.onDisconnect.addListener(() => {
+      this.browserPort = null
+    })
+
+    return browserPort
+  }
+
+  postMessage<T>(msg: T) {
+    if (!this.browserPort) {
+      this.browserPort = this.connect()
+    }
+
+    this.browserPort.postMessage(msg)
+  }
+
+  onMessage<T>(callback: (msg: T) => void) {
+    if (!this.browserPort) {
+      this.browserPort = this.connect()
+    }
+
+    this.browserPort.onMessage.addListener((msg) => {
+      callback(msg)
+    })
+  }
+
+  onDisconnect(callback: () => void) {
+    this.browserPort?.onDisconnect.addListener(() => {
+      callback()
+    })
+  }
+}
+
+export class ChromePortReceiver implements IPort {
+  name: string
+  private browserPort: chrome.runtime.Port | null
+
+  constructor(receiver: chrome.runtime.Port) {
+    this.name = receiver.name
+    this.browserPort = receiver
+
+    this.browserPort.onDisconnect.addListener(() => {
+      this.browserPort = null
+    })
+  }
+
+  postMessage<T>(msg: T) {
+    this.browserPort?.postMessage(msg)
+  }
+
+  onMessage<T>(callback: (msg: T) => void) {
+    this.browserPort?.onMessage.addListener((msg) => {
+      callback(msg)
+    })
+  }
+
+  onDisconnect(callback: () => void) {
+    this.browserPort?.onDisconnect.addListener(() => {
+      callback()
+    })
+  }
+}
diff --git a/src/shared/browser/port/index.ts b/src/shared/browser/port/index.ts
new file mode 100644
index 0000000..dacb071
--- /dev/null
+++ b/src/shared/browser/port/index.ts
@@ -0,0 +1,4 @@
+export {
+  ChromePortEmitter as PortEmitter,
+  ChromePortReceiver as PortReceiver,
+} from './chromePort'
diff --git a/src/shared/browser/port/types.ts b/src/shared/browser/port/types.ts
new file mode 100644
index 0000000..9d5c4f0
--- /dev/null
+++ b/src/shared/browser/port/types.ts
@@ -0,0 +1,11 @@
+export interface IConnectionProps {
+  tabId: number
+  connectInfo: { name: string }
+}
+
+export interface IPort {
+  name: string
+  onMessage: <T>(callback: (msg: T) => void) => void
+  postMessage: <T>(_msg: T) => void
+  onDisconnect: (callback: () => void) => void
+}
diff --git a/src/shared/browser/types.ts b/src/shared/browser/types.ts
index 077a44a..be56c9a 100644
--- a/src/shared/browser/types.ts
+++ b/src/shared/browser/types.ts
@@ -1,5 +1,7 @@
 import type { TResult } from '@shared/libs/operationResult'
 
+import { PortReceiver } from '.'
+
 export interface IBrowser {
   storage: {
     local: {
@@ -23,4 +25,17 @@ export interface IBrowser {
   i18n: {
     getMessage: (key: string, substitutions?: string | string[]) => string
   }
+
+  runtime: {
+    onConnect: {
+      addListener: (callback: (port: PortReceiver) => void) => void
+    }
+  }
+
+  tabs: {
+    getActiveTab: () => Promise<TResult<ITab>>
+  }
 }
+
+export type ITab = { id: number; url: string }
+export type IActiveTabInfo = { tabId: number }
diff --git a/src/shared/libs/useResetAfterDelay.ts b/src/shared/libs/useResetAfterDelay.ts
new file mode 100644
index 0000000..e907825
--- /dev/null
+++ b/src/shared/libs/useResetAfterDelay.ts
@@ -0,0 +1,18 @@
+import { useRef } from 'preact/hooks'
+
+interface Props {
+  reset: () => void
+}
+
+export const useResetAfterDelay = ({ reset }: Props) => {
+  const timeout = useRef<NodeJS.Timeout>()
+
+  const resetAfterDelay = () => {
+    clearTimeout(timeout.current)
+    timeout.current = setTimeout(() => {
+      reset()
+    }, 1000)
+  }
+
+  return resetAfterDelay
+}
diff --git a/src/shared/ui/CopyButton/index.tsx b/src/shared/ui/CopyButton/index.tsx
index 784c81c..8ab290a 100644
--- a/src/shared/ui/CopyButton/index.tsx
+++ b/src/shared/ui/CopyButton/index.tsx
@@ -1,6 +1,7 @@
-import { useRef, useState } from 'preact/hooks'
+import { useState } from 'preact/hooks'
 
 import { browser } from '@shared/browser'
+import { useResetAfterDelay } from '@shared/libs/useResetAfterDelay'
 
 import { Button, Props as ButtonProps } from '../Button'
 import { CopyIcon } from '../icons/CopyIcon'
@@ -11,20 +12,15 @@ interface Props extends ButtonProps {
 }
 
 export const CopyButton = ({ text, ...rest }: Props) => {
-  const displayCopySuccessTimeout = useRef<NodeJS.Timeout>()
   const [isCopied, setIsCopied] = useState(false)
-
-  const resetIsCopiedAfterDelay = () => {
-    clearTimeout(displayCopySuccessTimeout.current)
-    displayCopySuccessTimeout.current = setTimeout(() => {
-      setIsCopied(false)
-    }, 1000)
-  }
+  const resetAfterDelay = useResetAfterDelay({
+    reset: () => setIsCopied(false),
+  })
 
   const onCopy = (text: string) => {
     navigator.clipboard.writeText(text)
     setIsCopied(true)
-    resetIsCopiedAfterDelay()
+    resetAfterDelay()
   }
 
   return (
diff --git a/src/shared/ui/icons/AddCardIcon.tsx b/src/shared/ui/icons/AddCardIcon.tsx
new file mode 100644
index 0000000..15cd662
--- /dev/null
+++ b/src/shared/ui/icons/AddCardIcon.tsx
@@ -0,0 +1,8 @@
+export const AddCardIcon = () => (
+  <svg viewBox="0 0 24 24" aria-hidden>
+    <path
+      d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9h-4v4h-2v-4H9V9h4V5h2v4h4v2z"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
diff --git a/src/widgets/note/NoteList.tsx b/src/widgets/note/NoteList.tsx
index 1f62c27..6a0bb8c 100644
--- a/src/widgets/note/NoteList.tsx
+++ b/src/widgets/note/NoteList.tsx
@@ -4,6 +4,11 @@ import { useState } from 'preact/hooks'
 import { NoSelectedLanguages } from '@features/language/SelectLanguages'
 import { DeleteNote } from '@features/note/DeleteNote'
 import { EditNote } from '@features/note/EditNote'
+import {
+  $ankiPort,
+  FillFlashcardForm,
+  FillFlashcardFormNotAvailable,
+} from '@features/note/FillFlashcardForm'
 
 import { languageStore } from '@entities/language'
 import { INote, NoNotes, NoteCard, noteStore } from '@entities/note'
@@ -15,6 +20,7 @@ import { Tab, TabPanel, Tabs, TabsList, a11yProps } from '@shared/ui/Tabs'
 import { EditIcon } from '@shared/ui/icons/EditIcon'
 
 export const NoteList = () => {
+  const ankiPort = useStore($ankiPort)
   const languages = useStore(languageStore.$languages)
   const notes = useStore(noteStore.$notes)
 
@@ -23,6 +29,7 @@ export const NoteList = () => {
 
   return (
     <>
+      {!ankiPort && <FillFlashcardFormNotAvailable />}
       {languages.length ? (
         <>
           <Tabs>
@@ -66,6 +73,7 @@ export const NoteList = () => {
                                   noteId={note.id}
                                   noteText={note.text}
                                 />
+                                <FillFlashcardForm note={note} />
                               </>
                             }
                           />