diff --git a/background/style-manager.js b/background/style-manager.js
index 6d804e81..52e5b080 100644
--- a/background/style-manager.js
+++ b/background/style-manager.js
@@ -61,7 +61,13 @@ const styleMan = (() => {
   let ready = init();
   let order = {};
 
-  chrome.runtime.onConnect.addListener(handleLivePreview);
+  chrome.runtime.onConnect.addListener(port => {
+    if (port.name === 'livePreview') {
+      handleLivePreview(port);
+    } else if (port.name.startsWith('draft:')) {
+      handleDraft(port);
+    }
+  });
   // function handleColorScheme() {
   colorScheme.onChange(() => {
     for (const {style: data} of dataMap.values()) {
@@ -372,10 +378,12 @@ const styleMan = (() => {
       style);
   }
 
+  function handleDraft(port) {
+    const id = port.name.split(':').pop();
+    port.onDisconnect.addListener(() => API.drafts.delete(Number(id) || id));
+  }
+
   function handleLivePreview(port) {
-    if (port.name !== 'livePreview') {
-      return;
-    }
     let id;
     port.onMessage.addListener(style => {
       if (!id) id = style.id;
diff --git a/edit/drafts.js b/edit/drafts.js
index 9c4bd335..f66e261a 100644
--- a/edit/drafts.js
+++ b/edit/drafts.js
@@ -7,23 +7,23 @@
 'use strict';
 
 (async function AutosaveDrafts() {
-  const NEW = 'new';
+  const makeId = () => editor.style.id || 'new';
   let delay;
-  let draftId = editor.style.id || NEW;
+  let port;
+  connectPort();
 
-  const draft = await API.drafts.get(draftId);
+  const draft = await API.drafts.get(makeId());
   if (draft && draft.isUsercss === editor.isUsercss) {
     const date = makeRelativeDate(draft.date);
     if (await messageBoxProxy.confirm(t('draftAction'), 'danger', t('draftTitle', date))) {
       await editor.replaceStyle(draft.style, draft);
     } else {
-      updateDraft(false);
+      API.drafts.delete(makeId());
     }
   }
 
-  editor.dirty.onDataChange(isDirty => {
-    debounce(updateDraft, isDirty ? delay : 0);
-  });
+  editor.dirty.onChange(isDirty => isDirty ? connectPort() : port.disconnect());
+  editor.dirty.onDataChange(isDirty => debounce(updateDraft, isDirty ? delay : 0));
 
   prefs.subscribe('editor.autosaveDraft', (key, val) => {
     delay = clamp(val * 1000 | 0, 1000, 2 ** 32 - 1);
@@ -31,6 +31,10 @@
     if (t != null) debounce(updateDraft, t ? delay : 0);
   }, {runNow: true});
 
+  function connectPort() {
+    port = chrome.runtime.connect({name: 'draft:' + makeId()});
+  }
+
   function makeRelativeDate(date) {
     let delta = (Date.now() - date) / 1000;
     if (delta >= 0 && Intl.RelativeTimeFormat) {
@@ -53,18 +57,13 @@
   }
 
   function updateDraft(isDirty = editor.dirty.isDirty()) {
-    const newDraftId = editor.style.id || NEW;
-    if (isDirty) {
-      API.drafts.put({
-        date: Date.now(),
-        id: newDraftId,
-        isUsercss: editor.isUsercss,
-        style: editor.getValue(true),
-        si: editor.makeScrollInfo(),
-      });
-    } else {
-      API.drafts.delete(draftId); // the old id may have been 0 when a new style is saved now
-    }
-    draftId = newDraftId;
+    if (!isDirty) return;
+    API.drafts.put({
+      date: Date.now(),
+      id: makeId(),
+      isUsercss: editor.isUsercss,
+      style: editor.getValue(true),
+      si: editor.makeScrollInfo(),
+    });
   }
 })();