From a916a2b363c7a315ea8cfd588b43026deb4c36a4 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 10 Jul 2021 22:45:16 +0800
Subject: [PATCH 01/12] successfully connecting to OBS

---
 addon/manifest.json  |  3 ++-
 background_script.js | 12 +++++++++++-
 package.json         |  5 +++++
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/addon/manifest.json b/addon/manifest.json
index 2b2ef94..d5f17ca 100755
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -17,5 +17,6 @@
     },
     "default_popup": "browserAction/index.html",
     "default_title": "OBScure"
-  }
+  },
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
 }
\ No newline at end of file
diff --git a/background_script.js b/background_script.js
index 77cff58..39e8c88 100755
--- a/background_script.js
+++ b/background_script.js
@@ -1 +1,11 @@
-// Put all the javascript code here, that you want to execute in background.
+const OBSWebSocket = require('obs-websocket-js');
+
+(async () => {
+  const obs = new OBSWebSocket();
+  await obs.connect({password: "12345678"});
+  const version = await obs.send("GetVersion");
+  alert(`OBSRemote version: ${version.version}`);
+  alert(`obs-websocket version: ${version['obs-websocket-version']}`);
+  alert(`OBS Studio version: ${version['obs-studio-version']}`);
+  obs.disconnect();
+})();
diff --git a/package.json b/package.json
index 1bb10b0..f96fae7 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,12 @@
   "license": "ISC",
   "devDependencies": {
     "web-ext-plugin": "^1.3.1",
+    "webextension-polyfill": "^0.8.0",
     "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2"
+  },
+  "dependencies": {
+    "buffer": "^6.0.3",
+    "obs-websocket-js": "^4.0.2"
   }
 }
-- 
Gitee


From bc2faa05b42a7d82ce2572f2793c90798a341add Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sun, 11 Jul 2021 17:17:18 +0800
Subject: [PATCH 02/12] successfully mirroing window

---
 addon/manifest.json  |  4 +-
 background_script.js | 91 +++++++++++++++++++++++++++++++++++++++++---
 package.json         |  2 +-
 3 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/addon/manifest.json b/addon/manifest.json
index d5f17ca..40e4f87 100755
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -3,6 +3,9 @@
   "name": "OBScure",
   "description": "The more intuitive and privacy-secured way to mirrors web page element to OBS.",
   "version": "0.0.1",
+  "permissions": [
+    "tabs"
+  ],
   "icons": {
     "64": "icons/icon.png"
   },
@@ -15,7 +18,6 @@
     "default_icon": {
       "64": "icons/icon.png"
     },
-    "default_popup": "browserAction/index.html",
     "default_title": "OBScure"
   },
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
diff --git a/background_script.js b/background_script.js
index 39e8c88..8a4ec6b 100755
--- a/background_script.js
+++ b/background_script.js
@@ -1,11 +1,92 @@
 const OBSWebSocket = require('obs-websocket-js');
+const { browser } = require('webextension-polyfill-ts');
+
+
+let obs;
+/**
+ * `${windowId}/${tabId}` -> OBS source identifier
+ * @type {Map<string, {scene_name: string, source_id: number}>}
+ */
+let mirroring_tabs = new Map();
 
 (async () => {
-  const obs = new OBSWebSocket();
-  await obs.connect({password: "12345678"});
-  const version = await obs.send("GetVersion");
+  obs = new OBSWebSocket();
+  await obs.connect({password: '12345678'});
+  /* NOTE: Firefox does not support this */
+  // browser.runtime.onSuspend.addListener(async () => {
+  //   obs.disconnect();
+  // });
+
+  const version = await obs.send('GetVersion');
+  alert(`OBS Studio version: ${version['obs-studio-version']}`);
   alert(`OBSRemote version: ${version.version}`);
   alert(`obs-websocket version: ${version['obs-websocket-version']}`);
-  alert(`OBS Studio version: ${version['obs-studio-version']}`);
-  obs.disconnect();
+
+  let current_scene = await obs.send('GetCurrentScene');
+  alert(`current scene: ${current_scene.name}`);
+  alert(`list souces:`);
+  for (let s of current_scene.sources)
+    alert(`${JSON.stringify(s)}`);
+
+  let items = await obs.send('GetSceneItemList', {sceneName: current_scene.name});
+  alert(`items:`);
+  for (let i of items.sceneItems) {
+    alert(JSON.stringify(i));
+  }
+
+  // try {
+  //   let window_source_id = await obs.send('CreateSource', {
+  //     sourceName: 'OBScure::test',
+  //     sourceKind: 'window_capture',
+  //     sceneName: current_scene.name,
+  //     sourceSettings: {window: 'Snip & Sketch:Windows.UI.Core.CoreWindow:SceenSketch.exe'}
+  //   });
+  // } catch (e) {
+  //   alert(JSON.stringify(e));
+  // }
+
+  const rt_info = await browser.runtime.getPlatformInfo();
+  alert(JSON.stringify(rt_info));
+
+  // const tabs = await browser.tabs.query({
+  //   active: true, currentWindow: true
+  // })
+  // alert(JSON.stringify(tabs));
+
+  // window_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
+
+  browser.browserAction.onClicked.addListener(async tab => {
+    if (!tab.url.match(/https?:\/\/.*?\.bilibili.com\/video\/.*/)) {
+      alert('not a supported page');
+      return;
+    }
+    win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
+    alert(win_title);
+    const scene = (await obs.send('GetCurrentScene')).name;
+    let source = (await obs.send('CreateSource', {
+      sourceName: 'OBScure::test',
+      sourceKind: 'window_capture',
+      sceneName: scene,
+      sourceSettings: {window: win_title}
+    })).itemId;
+    mirroring_tabs.set(
+      `${tab.windowId}/${tab.id}`,
+      {scene_name: scene, source_id: source}
+    );
+  });
+
+  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => {
+    const scene_source = mirroring_tabs.get(`${windowId}/${tabId}`);
+    if (typeof scene_source === 'undefined')
+      return;
+    const {scene_name, source_id} = scene_source;
+    await obs.send('DeleteSceneItem', {
+      scene: scene_name,
+      item: {id: source_id}
+    });
+  });
+
+
+
+  // obs.disconnect();
 })();
diff --git a/package.json b/package.json
index f96fae7..20b8358 100755
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "license": "ISC",
   "devDependencies": {
     "web-ext-plugin": "^1.3.1",
-    "webextension-polyfill": "^0.8.0",
+    "webextension-polyfill-ts": "^0.26.0",
     "webpack": "^5.44.0",
     "webpack-cli": "^4.7.2"
   },
-- 
Gitee


From d2871a78ee555a196623101829fcc4ab7ca48b85 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Thu, 15 Jul 2021 21:45:01 +0800
Subject: [PATCH 03/12] reorganizing code

---
 .vscode/tasks.json   |   2 +-
 README.md            |  24 +++++++++
 background_script.js | 124 ++++++++++++++++++++++++-------------------
 3 files changed, 93 insertions(+), 57 deletions(-)
 create mode 100755 README.md

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 9a9aa1c..b8809bb 100755
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -15,7 +15,7 @@
             "type": "shell",
             "command": "web-ext run",
             "options": {
-                "cwd": "addon"
+                "cwd": "addon",
             },
             "group": {
                 "kind": "test",
diff --git a/README.md b/README.md
new file mode 100755
index 0000000..6959549
--- /dev/null
+++ b/README.md
@@ -0,0 +1,24 @@
+OBScure
+=======
+
+Conveniently mirroring elements in web page to OBS ...
+* without having to manually moving / cropping source in OBS
+* no worries about accidentally leaking info
+
+Usage
+-----
+
+TODO:
+
+Roadmap
+-------
+
+* [x] Proof-of-Concept: mirror the corrent window to OBS
+* [ ] Crop source to the correct size
+* [ ] Align mirrored source to a predefined area in OBS
+* [ ] Option page for configuring OBS-WebSocket password, and other
+* [ ] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
+* [ ] Not just `<video>`, let user choose what to mirror
+    * [ ] choose with `querySelector()`
+    * [ ] choose with "Take screenshot"-like UI
+    * [ ] choose with right-click menu, like _AdBlock_
diff --git a/background_script.js b/background_script.js
index 8a4ec6b..0347b17 100755
--- a/background_script.js
+++ b/background_script.js
@@ -2,6 +2,7 @@ const OBSWebSocket = require('obs-websocket-js');
 const { browser } = require('webextension-polyfill-ts');
 
 
+/** @type {OBSWebSocket?} */
 let obs;
 /**
  * `${windowId}/${tabId}` -> OBS source identifier
@@ -9,14 +10,73 @@ let obs;
  */
 let mirroring_tabs = new Map();
 
+/**
+ * Initialize mirroing.
+ * @param {Tabs.tab} tab
+ */
+async function start_mirroring_tab(tab) {
+  const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
+  alert(`Adding window_capture ${win_title} to OBS.`);
+  const scene = (await obs.send('GetCurrentScene')).name;
+  let source = (await obs.send('CreateSource', {
+    sourceName: 'OBScure::test',
+    sourceKind: 'window_capture',
+    sceneName: scene,
+    sourceSettings: {window: win_title}
+  })).itemId;
+  mirroring_tabs.set(
+    `${tab.windowId}/${tab.id}`,
+    {scene_name: scene, source_id: source}
+  );
+}
+
+/**
+ * Stop mirroring and deletes source in OBS. Do nothing if not present.
+ * @param {number} tabId
+ * @param {number} windowId
+ */
+async function stop_mirroring_tab(tabId, windowId) {
+  const scene_source = mirroring_tabs.get(`${windowId}/${tabId}`);
+  if (typeof scene_source === 'undefined')
+    return;
+  const {scene_name, source_id} = scene_source;
+  await obs.send('DeleteSceneItem', {
+    scene: scene_name,
+    item: {id: source_id}
+  });
+}
+
+/**
+ * Stop all mirroring.
+ */
+async function stop_all_mirroing_tabs() {
+  for (let {scene_name, source_id} of mirroring_tabs.values()) {
+    await obs.send('DeleteSceneItem', {
+      scene: scene_name,
+      item: {id: source_id}
+    });
+  }
+  mirroring_tabs.clear();
+}
+
+
+/**
+ * Init process
+ */
 (async () => {
+  /* sys env check */
+  const rt_info = await browser.runtime.getPlatformInfo();
+  alert(JSON.stringify(rt_info));
+  if (rt_info.os !== 'win')
+    throw new Error('Currently only supports windows');
+
   obs = new OBSWebSocket();
   await obs.connect({password: '12345678'});
-  /* NOTE: Firefox does not support this */
-  // browser.runtime.onSuspend.addListener(async () => {
-  //   obs.disconnect();
-  // });
+  /* NOTE: currently Firefox does not support this */
+  if (typeof browser.runtime.onSuspend !== 'undefined')
+    browser.runtime.onSuspend.addListener(obs.disconnect);
 
+  if (false) {
   const version = await obs.send('GetVersion');
   alert(`OBS Studio version: ${version['obs-studio-version']}`);
   alert(`OBSRemote version: ${version.version}`);
@@ -33,60 +93,12 @@ let mirroring_tabs = new Map();
   for (let i of items.sceneItems) {
     alert(JSON.stringify(i));
   }
+  }
 
-  // try {
-  //   let window_source_id = await obs.send('CreateSource', {
-  //     sourceName: 'OBScure::test',
-  //     sourceKind: 'window_capture',
-  //     sceneName: current_scene.name,
-  //     sourceSettings: {window: 'Snip & Sketch:Windows.UI.Core.CoreWindow:SceenSketch.exe'}
-  //   });
-  // } catch (e) {
-  //   alert(JSON.stringify(e));
-  // }
-
-  const rt_info = await browser.runtime.getPlatformInfo();
-  alert(JSON.stringify(rt_info));
-
-  // const tabs = await browser.tabs.query({
-  //   active: true, currentWindow: true
-  // })
-  // alert(JSON.stringify(tabs));
-
-  // window_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
-
+  // TODO: specify area in content script
   browser.browserAction.onClicked.addListener(async tab => {
-    if (!tab.url.match(/https?:\/\/.*?\.bilibili.com\/video\/.*/)) {
-      alert('not a supported page');
-      return;
-    }
-    win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
-    alert(win_title);
-    const scene = (await obs.send('GetCurrentScene')).name;
-    let source = (await obs.send('CreateSource', {
-      sourceName: 'OBScure::test',
-      sourceKind: 'window_capture',
-      sceneName: scene,
-      sourceSettings: {window: win_title}
-    })).itemId;
-    mirroring_tabs.set(
-      `${tab.windowId}/${tab.id}`,
-      {scene_name: scene, source_id: source}
-    );
+    await start_mirroring_tab(tab);
   });
 
-  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => {
-    const scene_source = mirroring_tabs.get(`${windowId}/${tabId}`);
-    if (typeof scene_source === 'undefined')
-      return;
-    const {scene_name, source_id} = scene_source;
-    await obs.send('DeleteSceneItem', {
-      scene: scene_name,
-      item: {id: source_id}
-    });
-  });
-
-
-
-  // obs.disconnect();
+  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => await stop_mirroring_tab(tabId, windowId));
 })();
-- 
Gitee


From 3eb4dcab1e12ec63a99b1435bfdb38a8a06cf8cd Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Thu, 15 Jul 2021 23:16:14 +0800
Subject: [PATCH 04/12] trying to crop source to the right size

---
 README.md            |  8 ++++++--
 addon/manifest.json  |  8 ++++++++
 background_script.js | 20 ++++++++++++++++----
 content_script.js    | 31 ++++++++++++++++++++++++++++++-
 webpack.config.js    |  3 +++
 5 files changed, 63 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 6959549..c5728ae 100755
--- a/README.md
+++ b/README.md
@@ -14,11 +14,15 @@ Roadmap
 -------
 
 * [x] Proof-of-Concept: mirror the corrent window to OBS
-* [ ] Crop source to the correct size
+* [ ] Crop source (`<video>`) to the correct size
+    * [ ] Tested against DPI other than 1
 * [ ] Align mirrored source to a predefined area in OBS
 * [ ] Option page for configuring OBS-WebSocket password, and other
 * [ ] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
 * [ ] Not just `<video>`, let user choose what to mirror
     * [ ] choose with `querySelector()`
-    * [ ] choose with "Take screenshot"-like UI
     * [ ] choose with right-click menu, like _AdBlock_
+    * [ ] choose with "Take screenshot"-like UI
+
+        > NOTE: no longer supports accurate auto removal when mirroring a
+        > non-DOM attached area
diff --git a/addon/manifest.json b/addon/manifest.json
index 40e4f87..f7071e8 100755
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -14,6 +14,14 @@
       "background_script.js"
     ]
   },
+  "content_scripts": [
+    {
+      "matches": [ "https://*/*", "http://*/*" ],
+      "js": [
+        "content_script.js"
+      ]
+    }
+  ],
   "browser_action": {
     "default_icon": {
       "64": "icons/icon.png"
diff --git a/background_script.js b/background_script.js
index 0347b17..ceda42e 100755
--- a/background_script.js
+++ b/background_script.js
@@ -68,7 +68,7 @@ async function stop_all_mirroing_tabs() {
   const rt_info = await browser.runtime.getPlatformInfo();
   alert(JSON.stringify(rt_info));
   if (rt_info.os !== 'win')
-    throw new Error('Currently only supports windows');
+    throw new Error('currently only supports windows');
 
   obs = new OBSWebSocket();
   await obs.connect({password: '12345678'});
@@ -95,9 +95,21 @@ async function stop_all_mirroing_tabs() {
   }
   }
 
-  // TODO: specify area in content script
-  browser.browserAction.onClicked.addListener(async tab => {
-    await start_mirroring_tab(tab);
+  browser.browserAction.onClicked.addListener(tab => {
+    browser.tabs.sendMessage(tab.id, {op: 'TriggerStartMirroringTab'});
+  });
+
+  browser.runtime.onMessage.addListener(async (msg, sndr) => {
+    alert(`received message: ${JSON.stringify(msg)}`);
+    if (msg.op === 'noop')
+      return;
+
+    if (msg.op === 'StartMirroringTab') {
+      await start_mirroring_tab(sndr.tab);
+      return;
+    }
+
+    throw new Error(`unknown message op ${msg.op}`);
   });
 
   browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => await stop_mirroring_tab(tabId, windowId));
diff --git a/content_script.js b/content_script.js
index 5b3e7e0..27c1b73 100755
--- a/content_script.js
+++ b/content_script.js
@@ -1 +1,30 @@
-// Put all the javascript code here, that you want to execute after page load.
+const { browser } = require('webextension-polyfill-ts');
+
+
+/**
+ * Init process
+ */
+(async () => {
+  await browser.runtime.sendMessage({op: 'noop'});
+
+  browser.runtime.onMessage.addListener(async (msg, sndr) => {
+    console.debug(`received message: ${JSON.stringify(msg)}`);
+    if (msg.op === 'noop')
+      return;
+
+    if (msg.op === 'TriggerStartMirroringTab') {
+      // TODO: get geo metrics
+      const el = document.querySelector('video');
+      console.debug(el.getBoundingClientRect());
+      await browser.runtime.sendMessage({
+        op: 'StartMirroringTab',
+        viewport: undefined,
+        el_rect: el.getBoundingClientRect()
+      });
+      return;
+    }
+
+    throw new Error(`unknown message op ${msg.op}`);
+  });
+
+})();
diff --git a/webpack.config.js b/webpack.config.js
index 55601ff..58dc262 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,6 +8,7 @@ module.exports = {
   mode: "development",
   entry: {
     background_script: "./background_script.js",
+    content_script: "./content_script.js",
     browser_action_script: "./browserAction/script.js"
   },
   plugins: [
@@ -19,6 +20,8 @@ module.exports = {
       const name = pd.chunk.name;
       if (name === "background_script")
         return "background_script.js";
+      if (name === "content_script")
+        return "content_script.js";
       if (name === "browser_action_script")
         return "browserAction/script.js";
       throw new Error(`unknown webpack entry ${name}`);
-- 
Gitee


From 299a4136155b6087620ab3cd221565c35da63507 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 00:02:13 +0800
Subject: [PATCH 05/12] getting pixel perfect crop

---
 README.md            |  7 +++++
 background_script.js | 75 ++++++++++++++++++++++++++++++++++++++++++--
 content_script.js    | 41 +++++++++++++++++++++---
 3 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index c5728ae..011b860 100755
--- a/README.md
+++ b/README.md
@@ -5,6 +5,12 @@ Conveniently mirroring elements in web page to OBS ...
 * without having to manually moving / cropping source in OBS
 * no worries about accidentally leaking info
 
+<span style="background-color:red;">Limitations</span>
+------------------------------------------------------
+
+* Due to lack of API support, the crop is shifted if sidebar (Firefox) or DevTool
+    is opened
+
 Usage
 -----
 
@@ -16,6 +22,7 @@ Roadmap
 * [x] Proof-of-Concept: mirror the corrent window to OBS
 * [ ] Crop source (`<video>`) to the correct size
     * [ ] Tested against DPI other than 1
+    * [ ] Tested against non-native OBS output / canvas resolution
 * [ ] Align mirrored source to a predefined area in OBS
 * [ ] Option page for configuring OBS-WebSocket password, and other
 * [ ] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
diff --git a/background_script.js b/background_script.js
index ceda42e..45f485a 100755
--- a/background_script.js
+++ b/background_script.js
@@ -13,8 +13,44 @@ let mirroring_tabs = new Map();
 /**
  * Initialize mirroing.
  * @param {Tabs.tab} tab
+ * @param {{height: number, width: number}} outer
+ * @param {{height: number, width: number}} inner
+ * @param {{height: number, width: number}} doc
+ * @param {{x: number, y: number, width: number, height: number,
+ *          top: number, bottom: number, left: number, right: number}} el
  */
-async function start_mirroring_tab(tab) {
+async function start_mirroring_tab(tab, outer, inner, doc, el) {
+  /* get crop metrics */
+  /* get the naiive crop */
+  const raw_crop = {
+    top: (outer.height - doc.height) + el.top,
+    bottom: doc.height - el.bottom,
+    left: el.left,
+    right: outer.width - el.left - el.width
+  };
+  /** adjust the crop, pixel-perfect
+   *
+   * NOTE: For Windows 10, you may notice that windows have a 1px decoration
+   * border, however, if you use the "winrt" capture engine (a.k.a. the
+   * "compatibility mode"), it is already cut out. So you may need to adapt to it
+   * for a pixel-perfect crop.
+   */
+  const browser_crop = {
+    top: raw_crop.top - 7,
+    bottom: raw_crop.bottom - 1,
+    left: raw_crop.left,
+    right: raw_crop.right - (outer.width - inner.width) - 1
+  };
+  if (browser_crop.top < 0 || browser_crop.bottom < 0 || browser_crop.left < 0 || browser_crop.right < 0) {
+    throw new Error('element not in window');
+  }
+  // TODO: sanity checks
+  /** create scene item
+   *
+   * NOTE: For there is no obvious browser API to get actual window size __in
+   * physical pixels__ , here we use the one returned by a default construction
+   * of capture source.
+   */
   const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
   alert(`Adding window_capture ${win_title} to OBS.`);
   const scene = (await obs.send('GetCurrentScene')).name;
@@ -22,8 +58,41 @@ async function start_mirroring_tab(tab) {
     sourceName: 'OBScure::test',
     sourceKind: 'window_capture',
     sceneName: scene,
-    sourceSettings: {window: win_title}
+    sourceSettings: {window: win_title},
+    setVisible: true
   })).itemId;
+  /* spin-lock for source metrics */
+  let orig_prop;
+  for (let t = 0; t < 20; t++) {
+    orig_prop = await obs.send('GetSceneItemProperties', {
+      "scene-name": scene,
+      item: {id: source}
+    });
+    if (orig_prop.sourceWidth !== 0)
+      break;
+    await new Promise(r => setTimeout(r, 200));
+  }
+  /* clear scene item (hopefully) if it took too long */
+  if (orig_prop.sourceWidth === 0) {
+    obs.send('DeleteSceneItem', {
+      scene: scene, item: {id: source}
+    });
+    throw new Error('the created source took too long to be ready');
+  }
+  alert(JSON.stringify(orig_prop));
+  const scale = orig_prop.sourceWidth / inner.width;
+  /* scale the crop to match screen DPI */
+  const crop = {
+    top: Math.ceil(browser_crop.top * scale),
+    bottom: Math.ceil(browser_crop.bottom * scale),
+    left: Math.ceil(browser_crop.left * scale),
+    right: Math.ceil(browser_crop.right * scale)
+  };
+  await obs.send('SetSceneItemProperties', {
+    "scene-name": scene, item: {id: source},
+    crop: crop, visible: true
+  });
+  /* extension data structures */
   mirroring_tabs.set(
     `${tab.windowId}/${tab.id}`,
     {scene_name: scene, source_id: source}
@@ -105,7 +174,7 @@ async function stop_all_mirroing_tabs() {
       return;
 
     if (msg.op === 'StartMirroringTab') {
-      await start_mirroring_tab(sndr.tab);
+      await start_mirroring_tab(sndr.tab, msg.outer_metrics, msg.inner_metrics, msg.doc_metrics, msg.el_metrics);
       return;
     }
 
diff --git a/content_script.js b/content_script.js
index 27c1b73..996f75d 100755
--- a/content_script.js
+++ b/content_script.js
@@ -13,13 +13,46 @@ const { browser } = require('webextension-polyfill-ts');
       return;
 
     if (msg.op === 'TriggerStartMirroringTab') {
-      // TODO: get geo metrics
       const el = document.querySelector('video');
-      console.debug(el.getBoundingClientRect());
+      /* check if element is valid */
+      if (el === null) {
+        // TODO: user friendly alert
+        throw new Error('no <video> element found on this page');
+      }
+      /* check if element size fit in capturable area */
+      const doc_metrics = {
+        height: document.documentElement.clientHeight,
+        width: document.documentElement.clientWidth
+      };
+      const el_metrics = el.getBoundingClientRect();
+      if (el_metrics.width >= doc_metrics.width
+            || el_metrics.height >= doc_metrics.height) {
+        // TODO: user friendly alert
+        throw new Error('the screen cannot accomodate the element');
+      }
+      /* make element visible if not already */
+      if (el_metrics.x < 0 || el_metrics.y < 0
+          || el_metrics.right > doc_metrics.width || el_metrics.bottom > doc_metrics.height)
+        el.scrollIntoView();
+      /* create the mirror */
       await browser.runtime.sendMessage({
         op: 'StartMirroringTab',
-        viewport: undefined,
-        el_rect: el.getBoundingClientRect()
+        /* raw window metrics */
+        outer_metrics: {
+          height: window.outerHeight,
+          width: window.outerWidth
+        },
+        /* actual window display metrics */
+        inner_metrics: {
+          height: window.innerHeight,
+          width: window.innerWidth
+        },
+        /* scrollbar/sidebar/DevTool-free metrics */
+        doc_metrics: {
+          height: document.documentElement.clientHeight,
+          width: document.documentElement.clientWidth
+        },
+        el_metrics: el.getBoundingClientRect()
       });
       return;
     }
-- 
Gitee


From cd2f947df6e017a6c88e8587e0426ef723814661 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 14:32:55 +0800
Subject: [PATCH 06/12] position mirror correctly

---
 README.md            | 11 +++---
 background_script.js | 83 ++++++++++++++++++++++++++++++--------------
 2 files changed, 63 insertions(+), 31 deletions(-)

diff --git a/README.md b/README.md
index 011b860..713c618 100755
--- a/README.md
+++ b/README.md
@@ -10,6 +10,8 @@ Conveniently mirroring elements in web page to OBS ...
 
 * Due to lack of API support, the crop is shifted if sidebar (Firefox) or DevTool
     is opened
+* The source might be uncropped for 1 or 2 frames, for in order to get the source
+    actual size in physical pixels, the source must be activated and rendering
 
 Usage
 -----
@@ -20,10 +22,11 @@ Roadmap
 -------
 
 * [x] Proof-of-Concept: mirror the corrent window to OBS
-* [ ] Crop source (`<video>`) to the correct size
-    * [ ] Tested against DPI other than 1
-    * [ ] Tested against non-native OBS output / canvas resolution
-* [ ] Align mirrored source to a predefined area in OBS
+* [x] Crop source (`<video>`) to the correct size
+    * [x] Tested against DPI other than 1
+    * [x] Tested against non-native OBS output / canvas resolution
+    * [x] Tested against web page zoomming
+* [x] Align mirrored source to a predefined area in OBS
 * [ ] Option page for configuring OBS-WebSocket password, and other
 * [ ] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
 * [ ] Not just `<video>`, let user choose what to mirror
diff --git a/background_script.js b/background_script.js
index 45f485a..ae40c31 100755
--- a/background_script.js
+++ b/background_script.js
@@ -44,7 +44,6 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
   if (browser_crop.top < 0 || browser_crop.bottom < 0 || browser_crop.left < 0 || browser_crop.right < 0) {
     throw new Error('element not in window');
   }
-  // TODO: sanity checks
   /** create scene item
    *
    * NOTE: For there is no obvious browser API to get actual window size __in
@@ -53,49 +52,80 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
    */
   const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
   alert(`Adding window_capture ${win_title} to OBS.`);
-  const scene = (await obs.send('GetCurrentScene')).name;
+  const scene = await obs.send('GetCurrentScene');
+  const scene_name = scene.name;
+  /* block visual before source ready */
+  // TODO:
   let source = (await obs.send('CreateSource', {
     sourceName: 'OBScure::test',
     sourceKind: 'window_capture',
-    sceneName: scene,
-    sourceSettings: {window: win_title},
-    setVisible: true
+    sceneName: scene_name,
+    sourceSettings: {window: win_title}
   })).itemId;
-  /* spin-lock for source metrics */
+  /* spin-lock for source metrics ready */
   let orig_prop;
-  for (let t = 0; t < 20; t++) {
+  for (let t = 0; t < 30; t++) {
     orig_prop = await obs.send('GetSceneItemProperties', {
-      "scene-name": scene,
+      "scene-name": scene_name,
       item: {id: source}
     });
-    if (orig_prop.sourceWidth !== 0)
+    if (orig_prop.sourceWidth !== 0) {
+      await obs.send('SetSceneItemProperties', {
+        "scene-name": scene, item: {id: source},
+        visible: false
+      })
       break;
-    await new Promise(r => setTimeout(r, 200));
+    }
+    await new Promise(r => setTimeout(r, 100));
   }
   /* clear scene item (hopefully) if it took too long */
   if (orig_prop.sourceWidth === 0) {
     obs.send('DeleteSceneItem', {
-      scene: scene, item: {id: source}
+      scene: scene_name, item: {id: source}
     });
     throw new Error('the created source took too long to be ready');
   }
-  alert(JSON.stringify(orig_prop));
-  const scale = orig_prop.sourceWidth / inner.width;
+  // alert(JSON.stringify(orig_prop));
   /* scale the crop to match screen DPI */
+  const browser_to_source_scale = orig_prop.sourceWidth / inner.width;
   const crop = {
-    top: Math.ceil(browser_crop.top * scale),
-    bottom: Math.ceil(browser_crop.bottom * scale),
-    left: Math.ceil(browser_crop.left * scale),
-    right: Math.ceil(browser_crop.right * scale)
+    top: Math.ceil(browser_crop.top * browser_to_source_scale),
+    bottom: Math.ceil(browser_crop.bottom * browser_to_source_scale),
+    left: Math.ceil(browser_crop.left * browser_to_source_scale),
+    right: Math.ceil(browser_crop.right * browser_to_source_scale)
   };
+  /* move and scale to the correct position */
+  const dest_trans_prop = await obs.send('GetSceneItemProperties', {
+    "scene-name": scene_name, item: {name: 'OBScure::top'}
+  });
+  // alert(JSON.stringify(dest_trans_prop));
+  const [dest_pos, dest_rect] = [
+    dest_trans_prop.position,
+    {height: dest_trans_prop.height, width: dest_trans_prop.width}
+  ];
+  const position = dest_pos;
+  let scale;
+  if (dest_rect.width / dest_rect.height >= el.width / el.height) {
+    /* dest wider than el, scale on height */
+    scale = dest_rect.height / (el.height * browser_to_source_scale);
+  }
+  else {
+    /* dest taller than el, scale on width */
+    scale = dest_rect.width / (el.width * browser_to_source_scale);
+  }
+  // TODO:
+  /* move to the correct rank */
+  // TODO:
+  /* set as visible */
   await obs.send('SetSceneItemProperties', {
-    "scene-name": scene, item: {id: source},
-    crop: crop, visible: true
+    "scene-name": scene_name, item: {id: source},
+    crop: crop, position: position, scale: {x: scale, y: scale},
+    visible: true
   });
   /* extension data structures */
   mirroring_tabs.set(
     `${tab.windowId}/${tab.id}`,
-    {scene_name: scene, source_id: source}
+    {scene_name: scene_name, source_id: source}
   );
 }
 
@@ -145,7 +175,7 @@ async function stop_all_mirroing_tabs() {
   if (typeof browser.runtime.onSuspend !== 'undefined')
     browser.runtime.onSuspend.addListener(obs.disconnect);
 
-  if (false) {
+  if (true) {
   const version = await obs.send('GetVersion');
   alert(`OBS Studio version: ${version['obs-studio-version']}`);
   alert(`OBSRemote version: ${version.version}`);
@@ -154,13 +184,12 @@ async function stop_all_mirroing_tabs() {
   let current_scene = await obs.send('GetCurrentScene');
   alert(`current scene: ${current_scene.name}`);
   alert(`list souces:`);
-  for (let s of current_scene.sources)
-    alert(`${JSON.stringify(s)}`);
-
-  let items = await obs.send('GetSceneItemList', {sceneName: current_scene.name});
-  alert(`items:`);
-  for (let i of items.sceneItems) {
+  for (let i of current_scene.sources) {
     alert(JSON.stringify(i));
+    alert(JSON.stringify(await obs.send('GetSourceSettings', {sourceName: i.name})));
+    alert(JSON.stringify(await obs.send('GetSceneItemProperties', {
+      "scene-name": current_scene.name, item: {id: i.id}
+    })));
   }
   }
 
-- 
Gitee


From b0ef73e49c3267416dd50c1676f50f6821c06e37 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 14:53:43 +0800
Subject: [PATCH 07/12] reorders correctly

---
 background_script.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/background_script.js b/background_script.js
index ae40c31..51a6753 100755
--- a/background_script.js
+++ b/background_script.js
@@ -20,6 +20,8 @@ let mirroring_tabs = new Map();
  *          top: number, bottom: number, left: number, right: number}} el
  */
 async function start_mirroring_tab(tab, outer, inner, doc, el) {
+  const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
+  alert(`Adding window_capture ${win_title} to OBS.`);
   /* get crop metrics */
   /* get the naiive crop */
   const raw_crop = {
@@ -50,8 +52,6 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
    * physical pixels__ , here we use the one returned by a default construction
    * of capture source.
    */
-  const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
-  alert(`Adding window_capture ${win_title} to OBS.`);
   const scene = await obs.send('GetCurrentScene');
   const scene_name = scene.name;
   /* block visual before source ready */
@@ -113,9 +113,18 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
     /* dest taller than el, scale on width */
     scale = dest_rect.width / (el.width * browser_to_source_scale);
   }
-  // TODO:
   /* move to the correct rank */
-  // TODO:
+  let items = new Array();
+  for (let i of scene.sources) {
+    if (i.id === source)
+      continue;
+    items.push({id: i.id});
+    if (i.name === 'OBScure::top')
+      items.push({id: source});
+  }
+  await obs.send('ReorderSceneItems', {
+    scene: scene_name, items: items
+  });
   /* set as visible */
   await obs.send('SetSceneItemProperties', {
     "scene-name": scene_name, item: {id: source},
-- 
Gitee


From 387c6e3b20e705bba0246fc69b816d4b29add852 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 16:00:13 +0800
Subject: [PATCH 08/12] cancel mirror on shifted

---
 README.md            |  7 ++++++-
 background_script.js | 19 ++++++++++++------
 content_script.js    | 46 +++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 713c618..0d77c1e 100755
--- a/README.md
+++ b/README.md
@@ -27,8 +27,13 @@ Roadmap
     * [x] Tested against non-native OBS output / canvas resolution
     * [x] Tested against web page zoomming
 * [x] Align mirrored source to a predefined area in OBS
+* [ ] Lazily connect to OBS
 * [ ] Option page for configuring OBS-WebSocket password, and other
-* [ ] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
+* [x] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
+
+    > __PERF:__ currently this is done by comparing for difference in rect every 500ms.
+
+    * [ ] On shifted but still in viewport, adapt
 * [ ] Not just `<video>`, let user choose what to mirror
     * [ ] choose with `querySelector()`
     * [ ] choose with right-click menu, like _AdBlock_
diff --git a/background_script.js b/background_script.js
index 51a6753..4235801 100755
--- a/background_script.js
+++ b/background_script.js
@@ -143,8 +143,9 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
  * @param {number} tabId
  * @param {number} windowId
  */
-async function stop_mirroring_tab(tabId, windowId) {
-  const scene_source = mirroring_tabs.get(`${windowId}/${tabId}`);
+async function stop_mirroring_tab(windowId, tabId) {
+  const key = `${windowId}/${tabId}`;
+  const scene_source = mirroring_tabs.get(key);
   if (typeof scene_source === 'undefined')
     return;
   const {scene_name, source_id} = scene_source;
@@ -152,6 +153,7 @@ async function stop_mirroring_tab(tabId, windowId) {
     scene: scene_name,
     item: {id: source_id}
   });
+  mirroring_tabs.delete(key);
 }
 
 /**
@@ -202,8 +204,8 @@ async function stop_all_mirroing_tabs() {
   }
   }
 
-  browser.browserAction.onClicked.addListener(tab => {
-    browser.tabs.sendMessage(tab.id, {op: 'TriggerStartMirroringTab'});
+  browser.browserAction.onClicked.addListener(async tab => {
+    await browser.tabs.sendMessage(tab.id, {op: 'ToggleMirroringElement'});
   });
 
   browser.runtime.onMessage.addListener(async (msg, sndr) => {
@@ -211,13 +213,18 @@ async function stop_all_mirroing_tabs() {
     if (msg.op === 'noop')
       return;
 
-    if (msg.op === 'StartMirroringTab') {
+    if (msg.op === 'StartMirroringElement') {
       await start_mirroring_tab(sndr.tab, msg.outer_metrics, msg.inner_metrics, msg.doc_metrics, msg.el_metrics);
       return;
     }
 
+    if (msg.op === 'StopMirroringTab') {
+      await stop_mirroring_tab(sndr.tab.windowId, sndr.tab.id);
+      return;
+    }
+
     throw new Error(`unknown message op ${msg.op}`);
   });
 
-  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => await stop_mirroring_tab(tabId, windowId));
+  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => await stop_mirroring_tab(windowId, tabId));
 })();
diff --git a/content_script.js b/content_script.js
index 996f75d..0274bff 100755
--- a/content_script.js
+++ b/content_script.js
@@ -1,6 +1,32 @@
 const { browser } = require('webextension-polyfill-ts');
 
 
+/**
+ * el -> original rect
+ * @type {Map<HTMLElement, {observer: NodeJS.Timer, orig_rect: DOMRect}>}
+ */
+let mirroring_els = new Map();
+
+/**
+ * @param {HTMLElement} el
+ */
+async function stop_mirroring_element(el) {
+  if (!mirroring_els.has(el))
+    return;
+  /**
+   * NOTE: currently one tab can only mirror one element
+   */
+  stop_all_mirroring_elements();
+}
+
+async function stop_all_mirroring_elements() {
+  await browser.runtime.sendMessage({op: 'StopMirroringTab'});
+  for (let {observer, _} of mirroring_els.values())
+    clearInterval(observer);
+  mirroring_els.clear();
+}
+
+
 /**
  * Init process
  */
@@ -12,7 +38,11 @@ const { browser } = require('webextension-polyfill-ts');
     if (msg.op === 'noop')
       return;
 
-    if (msg.op === 'TriggerStartMirroringTab') {
+    if (msg.op === 'ToggleMirroringElement') {
+      if (mirroring_els.size) {
+        stop_all_mirroring_elements();
+        return;
+      }
       const el = document.querySelector('video');
       /* check if element is valid */
       if (el === null) {
@@ -35,8 +65,9 @@ const { browser } = require('webextension-polyfill-ts');
           || el_metrics.right > doc_metrics.width || el_metrics.bottom > doc_metrics.height)
         el.scrollIntoView();
       /* create the mirror */
+      const orig_rect = el.getBoundingClientRect();
       await browser.runtime.sendMessage({
-        op: 'StartMirroringTab',
+        op: 'StartMirroringElement',
         /* raw window metrics */
         outer_metrics: {
           height: window.outerHeight,
@@ -52,7 +83,16 @@ const { browser } = require('webextension-polyfill-ts');
           height: document.documentElement.clientHeight,
           width: document.documentElement.clientWidth
         },
-        el_metrics: el.getBoundingClientRect()
+        el_metrics: orig_rect
+      });
+      mirroring_els.set(el, {
+        orig_rect: orig_rect,
+        observer: setInterval(async () => {
+          if (JSON.stringify(el.getBoundingClientRect()) !== JSON.stringify(orig_rect)) {
+            console.debug('stopping mirror for rect changed');
+            await stop_mirroring_element(el);
+          }
+        }, 500)
       });
       return;
     }
-- 
Gitee


From 275719ba53b83fb7cc7287dbd2c0a009e170d54d Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 18:13:38 +0800
Subject: [PATCH 09/12] option page

---
 README.md                       |  5 +-
 addon/manifest.json             |  7 ++-
 addon/options_page/options.html | 22 +++++++++
 background_script.js            | 87 +++++++++++++++++++++++++--------
 options_page/script.js          | 23 +++++++++
 webpack.config.js               |  5 +-
 6 files changed, 123 insertions(+), 26 deletions(-)
 create mode 100755 addon/options_page/options.html
 create mode 100755 options_page/script.js

diff --git a/README.md b/README.md
index 0d77c1e..4d0927c 100755
--- a/README.md
+++ b/README.md
@@ -27,13 +27,14 @@ Roadmap
     * [x] Tested against non-native OBS output / canvas resolution
     * [x] Tested against web page zoomming
 * [x] Align mirrored source to a predefined area in OBS
-* [ ] Lazily connect to OBS
-* [ ] Option page for configuring OBS-WebSocket password, and other
+* [x] Lazily connect to OBS
+* [x] Option page for configuring OBS-WebSocket password, and other
 * [x] On mirroring area shifted (e.g. resize, scroll, DOM change), cancel the mirror
 
     > __PERF:__ currently this is done by comparing for difference in rect every 500ms.
 
     * [ ] On shifted but still in viewport, adapt
+* [ ] On tab switched / window minimized, disable output
 * [ ] Not just `<video>`, let user choose what to mirror
     * [ ] choose with `querySelector()`
     * [ ] choose with right-click menu, like _AdBlock_
diff --git a/addon/manifest.json b/addon/manifest.json
index f7071e8..81fc22a 100755
--- a/addon/manifest.json
+++ b/addon/manifest.json
@@ -4,7 +4,7 @@
   "description": "The more intuitive and privacy-secured way to mirrors web page element to OBS.",
   "version": "0.0.1",
   "permissions": [
-    "tabs"
+    "tabs", "notifications", "storage"
   ],
   "icons": {
     "64": "icons/icon.png"
@@ -28,5 +28,8 @@
     },
     "default_title": "OBScure"
   },
+  "options_ui": {
+    "page": "options_page/options.html"
+  },
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';"
-}
\ No newline at end of file
+}
diff --git a/addon/options_page/options.html b/addon/options_page/options.html
new file mode 100755
index 0000000..108cf36
--- /dev/null
+++ b/addon/options_page/options.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset="utf-8">
+  </head>
+
+  <body>
+    <h1>OBScure</h1>
+    <br>
+    <div class="section">
+      <h2>OBSWebSocket Settings</h2>
+      <div class="option">
+        <label for="passwd">Password</label>
+        <input type="password" id="passwd">
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+
+</html>
diff --git a/background_script.js b/background_script.js
index 4235801..7cdabcd 100755
--- a/background_script.js
+++ b/background_script.js
@@ -10,6 +10,37 @@ let obs;
  */
 let mirroring_tabs = new Map();
 
+
+/**
+ * re-initialize the obs instance, if necessary
+ */
+async function obsws_factory() {
+  /* if already connected, test for availability */
+  if (typeof obs !== 'undefined') {
+    try {
+      await obs.send('GetVersion');
+      return obs;
+    } catch (e) {
+      obs = undefined;
+    }
+  }
+  /* connect if not already */
+  obs = new OBSWebSocket();
+  const config = await browser.storage.local.get(['obswebsocket-passwd']);
+  if (typeof config['obswebsocket-passwd'] === 'undefined') {
+    browser.notifications.create('OBScure', {
+      title: 'OBScure Error', type: 'basic',
+      message: 'OBScure is not configured with OBSWebSocket password!'
+    });
+    throw new Error('no OBSWebSocker password configured');
+  }
+  await obs.connect({password: config['obswebsocket-passwd']});
+  /* NOTE: currently Firefox does not support this */
+  if (typeof browser.runtime.onSuspend !== 'undefined')
+    browser.runtime.onSuspend.addListener(obs.disconnect);
+  return obs;
+}
+
 /**
  * Initialize mirroing.
  * @param {Tabs.tab} tab
@@ -20,6 +51,7 @@ let mirroring_tabs = new Map();
  *          top: number, bottom: number, left: number, right: number}} el
  */
 async function start_mirroring_tab(tab, outer, inner, doc, el) {
+  await obsws_factory();
   const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
   alert(`Adding window_capture ${win_title} to OBS.`);
   /* get crop metrics */
@@ -180,28 +212,41 @@ async function stop_all_mirroing_tabs() {
   if (rt_info.os !== 'win')
     throw new Error('currently only supports windows');
 
-  obs = new OBSWebSocket();
-  await obs.connect({password: '12345678'});
-  /* NOTE: currently Firefox does not support this */
-  if (typeof browser.runtime.onSuspend !== 'undefined')
-    browser.runtime.onSuspend.addListener(obs.disconnect);
-
-  if (true) {
-  const version = await obs.send('GetVersion');
-  alert(`OBS Studio version: ${version['obs-studio-version']}`);
-  alert(`OBSRemote version: ${version.version}`);
-  alert(`obs-websocket version: ${version['obs-websocket-version']}`);
-
-  let current_scene = await obs.send('GetCurrentScene');
-  alert(`current scene: ${current_scene.name}`);
-  alert(`list souces:`);
-  for (let i of current_scene.sources) {
-    alert(JSON.stringify(i));
-    alert(JSON.stringify(await obs.send('GetSourceSettings', {sourceName: i.name})));
-    alert(JSON.stringify(await obs.send('GetSceneItemProperties', {
-      "scene-name": current_scene.name, item: {id: i.id}
-    })));
+  /* check settings, and set defaults, easier for debugging */
+  const config = await browser.storage.local.get(['obswebsocket-passwd']);
+  let has_invalid_settings = false;
+  if (typeof config['obswebsocket-passwd'] === 'undefined') {
+    has_invalid_settings = true;
+    await browser.storage.local.set({
+      'obswebsocket-passwd': '12345678'
+    });
   }
+  /* if first visit, show way to option page */
+  if (has_invalid_settings)
+    browser.runtime.openOptionsPage();
+
+  try {
+    await obsws_factory();
+
+    if (true) {
+    const version = await obs.send('GetVersion');
+    alert(`OBS Studio version: ${version['obs-studio-version']}`);
+    alert(`OBSRemote version: ${version.version}`);
+    alert(`obs-websocket version: ${version['obs-websocket-version']}`);
+
+    let current_scene = await obs.send('GetCurrentScene');
+    alert(`current scene: ${current_scene.name}`);
+    alert(`list souces:`);
+    for (let i of current_scene.sources) {
+      alert(JSON.stringify(i));
+      alert(JSON.stringify(await obs.send('GetSourceSettings', {sourceName: i.name})));
+      alert(JSON.stringify(await obs.send('GetSceneItemProperties', {
+        "scene-name": current_scene.name, item: {id: i.id}
+      })));
+    }
+    }
+  } catch (e) {
+    // pass
   }
 
   browser.browserAction.onClicked.addListener(async tab => {
diff --git a/options_page/script.js b/options_page/script.js
new file mode 100755
index 0000000..99742f7
--- /dev/null
+++ b/options_page/script.js
@@ -0,0 +1,23 @@
+const { browser } = require('webextension-polyfill-ts');
+
+
+/** {@link https://codetonics.com/javascript/detect-document-ready/#:~:text=%20Detect%20if%20document%20is%20ready%20in%20pure,JavaScript%20is...%203%20Using%20JavaScript%20Timer%20More%20} */
+function document_ready(cb) {
+  if (document.readyState !== 'loading')
+    cb(event);
+  else
+    document.addEventListener('DOMContentLoaded', cb);
+}
+
+document_ready(async ev => {
+  const config = await browser.storage.local.get(['obswebsocket-passwd']);
+
+  const passwd_input = document.querySelector('input#passwd');
+  passwd_input.setRangeText(config['obswebsocket-passwd'] ?? '');
+  passwd_input.addEventListener('change', async ev => {
+    await browser.storage.local.set({
+      'obswebsocket-passwd': ev.target.value
+    });
+  });
+
+});
diff --git a/webpack.config.js b/webpack.config.js
index 58dc262..0bf0761 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,6 +9,7 @@ module.exports = {
   entry: {
     background_script: "./background_script.js",
     content_script: "./content_script.js",
+    options_page_script: "./options_page/script.js",
     browser_action_script: "./browserAction/script.js"
   },
   plugins: [
@@ -22,9 +23,11 @@ module.exports = {
         return "background_script.js";
       if (name === "content_script")
         return "content_script.js";
+      if (name === "options_page_script")
+        return "options_page/script.js";
       if (name === "browser_action_script")
         return "browserAction/script.js";
       throw new Error(`unknown webpack entry ${name}`);
     }
   }
-};
\ No newline at end of file
+};
-- 
Gitee


From f8d96c3122d212a3c048f099f1c3661e36b6d8fa Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 19:47:07 +0800
Subject: [PATCH 10/12] disable output on tab switched

---
 README.md            |  2 +-
 background_script.js | 32 ++++++++++++++++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4d0927c..36b5810 100755
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ Roadmap
     > __PERF:__ currently this is done by comparing for difference in rect every 500ms.
 
     * [ ] On shifted but still in viewport, adapt
-* [ ] On tab switched / window minimized, disable output
+* [x] On tab switched, disable output
 * [ ] Not just `<video>`, let user choose what to mirror
     * [ ] choose with `querySelector()`
     * [ ] choose with right-click menu, like _AdBlock_
diff --git a/background_script.js b/background_script.js
index 7cdabcd..1fb0933 100755
--- a/background_script.js
+++ b/background_script.js
@@ -41,6 +41,23 @@ async function obsws_factory() {
   return obs;
 }
 
+
+/**
+ * Show specified mirroring source
+ * may provide an invalid (or untracked) parameter to hide all mirror
+ * @param {number} windowId
+ * @param {number} tabId
+ */
+async function show_mirror(windowId, tabId) {
+  const key = `${windowId}/${tabId}`;
+  for (let [k, {scene_name, source_id}] of mirroring_tabs) {
+    await obs.send('SetSceneItemProperties', {
+      "scene-name": scene_name, item: {id: source_id},
+      visible: key === k
+    });
+  }
+}
+
 /**
  * Initialize mirroing.
  * @param {Tabs.tab} tab
@@ -157,17 +174,17 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
   await obs.send('ReorderSceneItems', {
     scene: scene_name, items: items
   });
-  /* set as visible */
+  /* aplly transform */
   await obs.send('SetSceneItemProperties', {
     "scene-name": scene_name, item: {id: source},
-    crop: crop, position: position, scale: {x: scale, y: scale},
-    visible: true
+    crop: crop, position: position, scale: {x: scale, y: scale}
   });
   /* extension data structures */
   mirroring_tabs.set(
     `${tab.windowId}/${tab.id}`,
     {scene_name: scene_name, source_id: source}
   );
+  show_mirror(tab.windowId, tab.id);
 }
 
 /**
@@ -271,5 +288,12 @@ async function stop_all_mirroing_tabs() {
     throw new Error(`unknown message op ${msg.op}`);
   });
 
-  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => await stop_mirroring_tab(windowId, tabId));
+  browser.tabs.onRemoved.addListener(async (tabId, {windowId}) => {
+    await stop_mirroring_tab(windowId, tabId)
+  });
+
+  browser.tabs.onActivated.addListener(async ({tabId, windowId}) => {
+    await show_mirror(windowId, tabId);
+  });
+
 })();
-- 
Gitee


From e3e080104cb1824561ab073ee9cd190ef8ec74b2 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 20:24:04 +0800
Subject: [PATCH 11/12] fixed flicker on creation

---
 background_script.js | 54 ++++++++++++++++----------------------------
 content_script.js    |  1 +
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/background_script.js b/background_script.js
index 1fb0933..9e3f7f3 100755
--- a/background_script.js
+++ b/background_script.js
@@ -64,10 +64,11 @@ async function show_mirror(windowId, tabId) {
  * @param {{height: number, width: number}} outer
  * @param {{height: number, width: number}} inner
  * @param {{height: number, width: number}} doc
+ * @param {number} dpi
  * @param {{x: number, y: number, width: number, height: number,
  *          top: number, bottom: number, left: number, right: number}} el
  */
-async function start_mirroring_tab(tab, outer, inner, doc, el) {
+async function start_mirroring_tab(tab, outer, inner, doc, dpi, el) {
   await obsws_factory();
   const win_title = `${tab.title} — Mozilla Firefox:MozillaWindowClass:firefox.exe`;
   alert(`Adding window_capture ${win_title} to OBS.`);
@@ -106,42 +107,18 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
   /* block visual before source ready */
   // TODO:
   let source = (await obs.send('CreateSource', {
-    sourceName: 'OBScure::test',
+    sourceName: `OBScure::${win_title}::${tab.windowId}/${tab.id}`,
     sourceKind: 'window_capture',
     sceneName: scene_name,
-    sourceSettings: {window: win_title}
+    sourceSettings: {window: win_title},
+    setVisible: false
   })).itemId;
-  /* spin-lock for source metrics ready */
-  let orig_prop;
-  for (let t = 0; t < 30; t++) {
-    orig_prop = await obs.send('GetSceneItemProperties', {
-      "scene-name": scene_name,
-      item: {id: source}
-    });
-    if (orig_prop.sourceWidth !== 0) {
-      await obs.send('SetSceneItemProperties', {
-        "scene-name": scene, item: {id: source},
-        visible: false
-      })
-      break;
-    }
-    await new Promise(r => setTimeout(r, 100));
-  }
-  /* clear scene item (hopefully) if it took too long */
-  if (orig_prop.sourceWidth === 0) {
-    obs.send('DeleteSceneItem', {
-      scene: scene_name, item: {id: source}
-    });
-    throw new Error('the created source took too long to be ready');
-  }
-  // alert(JSON.stringify(orig_prop));
   /* scale the crop to match screen DPI */
-  const browser_to_source_scale = orig_prop.sourceWidth / inner.width;
   const crop = {
-    top: Math.ceil(browser_crop.top * browser_to_source_scale),
-    bottom: Math.ceil(browser_crop.bottom * browser_to_source_scale),
-    left: Math.ceil(browser_crop.left * browser_to_source_scale),
-    right: Math.ceil(browser_crop.right * browser_to_source_scale)
+    top: Math.ceil(browser_crop.top * dpi),
+    bottom: Math.ceil(browser_crop.bottom * dpi),
+    left: Math.ceil(browser_crop.left * dpi),
+    right: Math.ceil(browser_crop.right * dpi)
   };
   /* move and scale to the correct position */
   const dest_trans_prop = await obs.send('GetSceneItemProperties', {
@@ -156,11 +133,11 @@ async function start_mirroring_tab(tab, outer, inner, doc, el) {
   let scale;
   if (dest_rect.width / dest_rect.height >= el.width / el.height) {
     /* dest wider than el, scale on height */
-    scale = dest_rect.height / (el.height * browser_to_source_scale);
+    scale = dest_rect.height / (el.height * dpi);
   }
   else {
     /* dest taller than el, scale on width */
-    scale = dest_rect.width / (el.width * browser_to_source_scale);
+    scale = dest_rect.width / (el.width * dpi);
   }
   /* move to the correct rank */
   let items = new Array();
@@ -276,7 +253,14 @@ async function stop_all_mirroing_tabs() {
       return;
 
     if (msg.op === 'StartMirroringElement') {
-      await start_mirroring_tab(sndr.tab, msg.outer_metrics, msg.inner_metrics, msg.doc_metrics, msg.el_metrics);
+      await start_mirroring_tab(
+        sndr.tab,
+        msg.outer_metrics,
+        msg.inner_metrics,
+        msg.doc_metrics,
+        msg.dpi,
+        msg.el_metrics
+      );
       return;
     }
 
diff --git a/content_script.js b/content_script.js
index 0274bff..821f924 100755
--- a/content_script.js
+++ b/content_script.js
@@ -83,6 +83,7 @@ async function stop_all_mirroring_elements() {
           height: document.documentElement.clientHeight,
           width: document.documentElement.clientWidth
         },
+        dpi: window.devicePixelRatio,
         el_metrics: orig_rect
       });
       mirroring_els.set(el, {
-- 
Gitee


From 2ab599bb839b62aab0d1a59681e48245ed01e738 Mon Sep 17 00:00:00 2001
From: smdsbz <694066681@qq.com>
Date: Sat, 17 Jul 2021 20:36:34 +0800
Subject: [PATCH 12/12] update README

---
 README.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 36b5810..73a1067 100755
--- a/README.md
+++ b/README.md
@@ -1,22 +1,65 @@
 OBScure
 =======
 
+![obscure.gif](https://i.loli.net/2021/07/17/KloC1HwYJbDevNL.gif)
+
 Conveniently mirroring elements in web page to OBS ...
 * without having to manually moving / cropping source in OBS
-* no worries about accidentally leaking info
+* no immediate worries about accidentally letting your audience see other parts
+    of the web page (whether for cleanliness or for privacy)
 
 <span style="background-color:red;">Limitations</span>
 ------------------------------------------------------
 
 * Due to lack of API support, the crop is shifted if sidebar (Firefox) or DevTool
     is opened
-* The source might be uncropped for 1 or 2 frames, for in order to get the source
-    actual size in physical pixels, the source must be activated and rendering
+
+    > AFIK, there's no way you know which side the sidebar / DevTool is opened on.
+    >
+    > But I'm new to web development, please file an issue if you know how to fix this!
+
+* At the time of writing, OBScure only supports __one `<video>` per tab__,
+    no more, no less, and no other.
 
 Usage
 -----
 
-TODO:
+### On the OBS side ...
+
+1. Install the [OBSWebSocket](https://github.com/Palakis/obs-websocket) plugin
+2. Setup OBSWebSocket, the settings can be found at _Tools > WebSockets server_
+
+    ![OBSWebSocket setting](https://i.loli.net/2021/07/17/3Z8xgu4HVj76qXB.png)
+
+3. Create the dummy source, it is used as insert location for later mirrors
+
+    ![dummy source](https://i.loli.net/2021/07/17/BgWz7n5e2PYpsCN.png)
+
+    * The source's name must be `OBScure::top`
+    * The source must be __center aligned__
+
+    Later sources will be created __just below__ the dummy source.
+
+### On the browser side ...
+
+1. Install the extension (should be available in the release page)
+2. Fireup a web page with a video element
+
+    At the time of writing, the page may contain __one and only one__ `<video>`
+    element, like [this one](https://www.bilibili.com/video/BV1mh411S7gx).
+
+3. Click on the extension's icon to start mirror
+4. Click on the icon again to stop, or simply close the tab
+
+### The mirror will be _hid away_ automatically when ...
+
+* Switched to another tab (of the same browser profile)
+
+### The mirror will be _cancelled_ automatically when ...
+
+* The tab is closed
+* The `<video>`'s position (w.r.t. browser window) / size changed
+    * `getBoundingClientRect()` changed, to be more precise
 
 Roadmap
 -------
-- 
Gitee