From 920bc4a48110225d9e49ff03070271b31c0d6b45 Mon Sep 17 00:00:00 2001 From: horihiro Date: Mon, 29 Apr 2024 19:52:41 +0900 Subject: [PATCH 01/15] Fix issue with blurTabTitleCore function in main.js --- content/js/main.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/js/main.js b/content/js/main.js index f009e14..e61292d 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -608,10 +608,12 @@ const blurTabTitleCore = (pattern, target) => { const title = target.textContent; let result = title.match(pattern); + let start = 0; while (result) { const mask = new Array(result[0].length).fill('*').join(''); target.textContent = target.textContent.replace(result[0], mask); - result = target.textContent.match(pattern); + start += result.index + mask.length; + result = target.textContent.slice(start).match(pattern); if (!target.getAttribute(ATTR_NAME_ORIGINAL_TITLE)) { target.setAttribute(ATTR_NAME_ORIGINAL_TITLE, title); } From 761444606e1025838158eaa3a7fe0e20c7cae8d7 Mon Sep 17 00:00:00 2001 From: horihiro Date: Mon, 29 Apr 2024 20:02:44 +0900 Subject: [PATCH 02/15] Fix issue with whitespace handling in main.js --- content/js/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/content/js/main.js b/content/js/main.js index f009e14..359afb0 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -85,6 +85,7 @@ .replace(/[\n\t]/g, ' ') // step.2&3 .replace(/ +/g, ' ') // step.4 .trim() // step.5 + .replace(/\u00a0/g, ' ') // additional : '' } From bdeab486af5300f35fea67cc261ebbfc3ba2237e Mon Sep 17 00:00:00 2001 From: horihiro Date: Mon, 29 Apr 2024 20:08:13 +0900 Subject: [PATCH 03/15] Add change logs for next release --- README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8a06075..c7670fb 100644 --- a/README.md +++ b/README.md @@ -58,10 +58,16 @@ If you can try a development version, the following steps are needed. 1. select the directory created by cloning at step 1. # Dependencies - - **[jsdiff](https://github.com/kpdecker/jsdiff)**: A JavaScript text differencing implementation (BSD 3-Clause License). + - **[jsdiff](https://github.com/kpdecker/jsdiff)**: A JavaScript text differencing implementation (BSD 3-Clause License). # Change logs +## [0.2.3](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.3) + + - Bug fixes + - Fix tab title masking ([#56](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/56) + - Fix white-space handling ([#57](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/57) + ## [0.2.2](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.2) - Bug fixes From 178896775522c18012e821d512247089ba0fa19d Mon Sep 17 00:00:00 2001 From: horihiro Date: Mon, 29 Apr 2024 20:09:34 +0900 Subject: [PATCH 04/15] Fix typo --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c7670fb..7ea457b 100644 --- a/README.md +++ b/README.md @@ -65,19 +65,19 @@ If you can try a development version, the following steps are needed. ## [0.2.3](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.3) - Bug fixes - - Fix tab title masking ([#56](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/56) - - Fix white-space handling ([#57](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/57) + - Fix tab title masking ([#56](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/56)) + - Fix white-space handling ([#57](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/57)) ## [0.2.2](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.2) - Bug fixes - - Improve performance ([#52](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/52) + - Improve performance ([#52](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/52)) - Fix adding exclusion URL patterns list ## [0.2.1](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.1) - Bug fixes - - Improve performance ([#48](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/48) + - Improve performance ([#48](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/48)) ## [0.2.0](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.0) From 9cec9ab759662f72813a5ddcb767944d8c8cf49c Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 08:58:47 +0900 Subject: [PATCH 05/15] Replace ` ` to half-width white space on storing --- background/service-worker.js | 2 +- popup/js/main.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/background/service-worker.js b/background/service-worker.js index 3d0ce27..918f826 100644 --- a/background/service-worker.js +++ b/background/service-worker.js @@ -14,7 +14,7 @@ chrome.contextMenus.onClicked.addListener(async(info, tab) => { (keywords.length === 1 && keywords[0] === '') && keywords.pop(); const addingKeyword = (await chrome.storage.local.get(['mode']))?.mode === 'regexp' ? escapeRegExp(info.selectionText) : info.selectionText; !keywords.includes(addingKeyword) && keywords.push(addingKeyword); - await chrome.storage.local.set({ 'keywords': keywords.join('\n') }); + await chrome.storage.local.set({ 'keywords': keywords.join('\n').replace(/\u00a0/g, ' ') }); chrome.runtime.sendMessage({ method: 'reload' }); } }); \ No newline at end of file diff --git a/popup/js/main.js b/popup/js/main.js index 5ea14a7..c7245ab 100644 --- a/popup/js/main.js +++ b/popup/js/main.js @@ -206,7 +206,7 @@ textarea#${e.target.id} { applyButton.addEventListener('click', async (e) => { await chrome.storage.local.set({ 'status': !statusCheckbox.checked ? 'disabled' : '', - 'keywords': patternInput.value, + 'keywords': patternInput.value.replace(/\u00a0/g, ' '), 'exclusionUrls': exclusionInput.value, 'mode': regexpCheckbox.checked ? 'regexp' : 'text', 'matchCase': caseCheckbox.checked, From 35591b917ff4c275e9001e58367c4644f881c7df Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 10:09:23 +0900 Subject: [PATCH 06/15] Add documentation for blurring text on Xterm.js --- docs/BLUR_ON_XTERMJS.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 docs/BLUR_ON_XTERMJS.md diff --git a/docs/BLUR_ON_XTERMJS.md b/docs/BLUR_ON_XTERMJS.md new file mode 100644 index 0000000..2238c27 --- /dev/null +++ b/docs/BLUR_ON_XTERMJS.md @@ -0,0 +1,28 @@ +# How to blur text on Xterm.js +[![](https://github.com/xtermjs/xterm.js/raw/master/logo-full.png)](https://xtermjs.org/) + +Xterm.js is a front-end component that lets applications bring fully-featured terminals to their users in the browser[^1] + +[^1]: https://github.com/xtermjs/xterm.js/blob/master/README.md + +Xterm.js has some types of renderer as followings. + - WebGL + - Canvas + - DOM + +From point of view of performance, WebGL renderer is most recommended. +But Text Blurrer cannot blur text rendered by WebGL renderer and Canvas renderer because they draw text on HTML Canvas. + +If you want to blur text on Xterm.js-base terminal, you should check which type of renderer is used to render text on the terminal and if the application using Xterm.js has a option to switch the renderer type of Xterm.js + +> [!NOTE] +> Switching to DOM renderer for Xterm.js might cause performance issue of the terminal rendering. + +## GitHub Codespaces +The terminal on GitHub Codespaces is based on Xterm.js and the default renderer is WebGL renderer. + +But it has a option about the terminal rendering. +By setting `terminal.integrated.gpuAcceleration` to `off`, DOM renderer can be enabled and text on the terminal can be blurred. + +## Azure Cloud Shell +It seem that there is no option to switch rendering option. \ No newline at end of file From 5a640721a33e5c3654a30c60792741237e7c6bd7 Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 10:12:30 +0900 Subject: [PATCH 07/15] Update documentation for blurring text on Xterm.js --- docs/BLUR_ON_XTERMJS.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/BLUR_ON_XTERMJS.md b/docs/BLUR_ON_XTERMJS.md index 2238c27..8360636 100644 --- a/docs/BLUR_ON_XTERMJS.md +++ b/docs/BLUR_ON_XTERMJS.md @@ -19,10 +19,11 @@ If you want to blur text on Xterm.js-base terminal, you should check which type > Switching to DOM renderer for Xterm.js might cause performance issue of the terminal rendering. ## GitHub Codespaces -The terminal on GitHub Codespaces is based on Xterm.js and the default renderer is WebGL renderer. +The terminal on GitHub Codespaces is based on Xterm.js. -But it has a option about the terminal rendering. +Though the default renderer is WebGL renderer, it has a option about the terminal rendering. By setting `terminal.integrated.gpuAcceleration` to `off`, DOM renderer can be enabled and text on the terminal can be blurred. +![image](https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/3165d94c-38ac-48e9-b4db-6bad845f153b) ## Azure Cloud Shell -It seem that there is no option to switch rendering option. \ No newline at end of file +It seem that there is no option to switch rendering option, so it's difficult to blur text on Azure Cloud Shell currently. \ No newline at end of file From 447eb53ba8aaa299f7d8f7e4889b7a5223f5b0f1 Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 10:13:54 +0900 Subject: [PATCH 08/15] Update documentation for rendering performance of Xterm.js --- docs/BLUR_ON_XTERMJS.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/BLUR_ON_XTERMJS.md b/docs/BLUR_ON_XTERMJS.md index 8360636..1b46c0b 100644 --- a/docs/BLUR_ON_XTERMJS.md +++ b/docs/BLUR_ON_XTERMJS.md @@ -10,7 +10,7 @@ Xterm.js has some types of renderer as followings. - Canvas - DOM -From point of view of performance, WebGL renderer is most recommended. +From point of view of the rendering performance, WebGL renderer is most recommended. But Text Blurrer cannot blur text rendered by WebGL renderer and Canvas renderer because they draw text on HTML Canvas. If you want to blur text on Xterm.js-base terminal, you should check which type of renderer is used to render text on the terminal and if the application using Xterm.js has a option to switch the renderer type of Xterm.js From 3175db38fdede817fd19b9077968f921866396c1 Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 13:42:13 +0900 Subject: [PATCH 09/15] Update documentation for blurring text on Xterm.js --- docs/BLUR_ON_XTERMJS.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/BLUR_ON_XTERMJS.md b/docs/BLUR_ON_XTERMJS.md index 1b46c0b..5ca4a76 100644 --- a/docs/BLUR_ON_XTERMJS.md +++ b/docs/BLUR_ON_XTERMJS.md @@ -18,6 +18,10 @@ If you want to blur text on Xterm.js-base terminal, you should check which type > [!NOTE] > Switching to DOM renderer for Xterm.js might cause performance issue of the terminal rendering. +> [!NOTE] +> DOM renderer seems to renders one line in the terminal as one `div` element. +> So when long text is splitted to two lines because of the terminal width, making complicated regular expression is needed in order to blur the text as one keyword. + ## GitHub Codespaces The terminal on GitHub Codespaces is based on Xterm.js. @@ -25,5 +29,8 @@ Though the default renderer is WebGL renderer, it has a option about the termina By setting `terminal.integrated.gpuAcceleration` to `off`, DOM renderer can be enabled and text on the terminal can be blurred. ![image](https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/3165d94c-38ac-48e9-b4db-6bad845f153b) +Example: realtime blurring output of `az account show` and `az sp create-for-rbac` +https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/06264b16-cca3-4350-9680-25c556ced988 + ## Azure Cloud Shell It seem that there is no option to switch rendering option, so it's difficult to blur text on Azure Cloud Shell currently. \ No newline at end of file From 5e980722cffc925fdadadc869554e077212f74be Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 14:07:40 +0900 Subject: [PATCH 10/15] Formatting --- docs/BLUR_ON_XTERMJS.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/BLUR_ON_XTERMJS.md b/docs/BLUR_ON_XTERMJS.md index 5ca4a76..5664b60 100644 --- a/docs/BLUR_ON_XTERMJS.md +++ b/docs/BLUR_ON_XTERMJS.md @@ -29,7 +29,8 @@ Though the default renderer is WebGL renderer, it has a option about the termina By setting `terminal.integrated.gpuAcceleration` to `off`, DOM renderer can be enabled and text on the terminal can be blurred. ![image](https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/3165d94c-38ac-48e9-b4db-6bad845f153b) -Example: realtime blurring output of `az account show` and `az sp create-for-rbac` +Example: realtime blurring output of `az account show` and `az sp create-for-rbac` + https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/06264b16-cca3-4350-9680-25c556ced988 ## Azure Cloud Shell From 712114c453cf31814626c9ddd52a857a2769b4b5 Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 18:56:29 +0900 Subject: [PATCH 11/15] Fix interoperability issue with CodeMirror editor in main.js --- content/js/main.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/content/js/main.js b/content/js/main.js index a31b7c4..efff489 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -9,6 +9,7 @@ const ATTR_NAME_ORIGINAL_TITLE = 'data-tb-original-title'; const CLASS_NAME_MASK_CONTAINER = 'tb-mask-container'; const CLASS_NAME_TEXT_LAYER = 'tb-mask-text-layer'; + const CLASS_NAME_CODEMIRROR_EDITOR = 'cm-editor'; const ID_INPUT_CLONE = 'tb-input-clone'; const ID_GLOBAL_STYLE = '__blurring-style'; const GLOBAL_STYLE = `.${CLASS_NAME_BLURRED} { @@ -46,9 +47,10 @@ } }); - const getStateOfContentEditable = (element) => { - if (element.contentEditable && element.contentEditable !== 'inherit') return element.contentEditable; - return element.parentNode ? getStateOfContentEditable(element.parentNode) : ''; + const isInCodeMirror = (element) => { + return element.nodeType == 1 + ? element.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`) ? 'true' : 'false' + : isInCodeMirror(element.parentNode); }; const inputs = []; @@ -128,11 +130,7 @@ } const isBlurred = (node) => { - do { - if (node.classList?.contains(CLASS_NAME_BLURRED)) return true; - node = node.parentNode; - } while (node); - return false; + return !!(node.nodeType == 1 ? node : node.parentNode).closest(`.${CLASS_NAME_BLURRED}`) } const getElementsToBeBlurred = (pattern, target, options) => { @@ -214,7 +212,11 @@ const removeNodes = []; if (!from.node.parentNode || !to.node.parentNode || exElmList.includes(from.node.parentNode.nodeName.toLowerCase()) || exElmList.includes(from.node.parentNode.nodeName.toLowerCase()) - || isBlurred(from.node.parentNode) || isBlurred(to.node.parentNode)) return; + || isBlurred(from.node.parentNode) || isBlurred(to.node.parentNode) ) return; + if (isInCodeMirror(from.node.parentNode) || isInCodeMirror(to.node.parentNode)) { + console.warn('CodeMirror is not supported'); + return; + } if (from.node == to.node) { const computedStyle = getComputedStyle(from.node.parentNode); From ff86e526ff7e73752c84b7eabb6d18914899397d Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 20:06:22 +0900 Subject: [PATCH 12/15] Fix CodeMirror interoperability issue in main.js --- content/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/js/main.js b/content/js/main.js index efff489..f67e4b0 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -49,7 +49,7 @@ const isInCodeMirror = (element) => { return element.nodeType == 1 - ? element.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`) ? 'true' : 'false' + ? element.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`) ? true : false : isInCodeMirror(element.parentNode); }; const inputs = []; From efaf296623eec3c5bca351f0104f7b4b5d6979f9 Mon Sep 17 00:00:00 2001 From: horihiro Date: Tue, 30 Apr 2024 20:06:50 +0900 Subject: [PATCH 13/15] Update version to 0.2.3 --- README.md | 14 ++++++++++++++ manifest.json | 4 ++-- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7ea457b..3068a1d 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,17 @@ If you can try a development version, the following steps are needed. ![image](https://github.com/horihiro/TextBlurrer-ChromeExtension/assets/4566555/44e7f896-9e82-4af1-ae1b-f864097b44c7) 1. select the directory created by cloning at step 1. +# Limitations + - These are **experimental** features + - Input Element blurring + - Tab title masking + - HTML Canvas: + This extension cannot blur text drown on HTML Canvas + - Web Terminal based on Xterm.js: + see [here](./docs/BLUR_ON_XTERMJS.md) + - Web Editor based on CodeMirror: + CodeMirror, which bases GitHub code editor, repairs its own contents automatically after blurring by this extension. Then blurring and repairing are repeated, it causes infinity loop. ([#62](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/62)) + # Dependencies - **[jsdiff](https://github.com/kpdecker/jsdiff)**: A JavaScript text differencing implementation (BSD 3-Clause License). @@ -67,6 +78,9 @@ If you can try a development version, the following steps are needed. - Bug fixes - Fix tab title masking ([#56](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/56)) - Fix white-space handling ([#57](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/57)) + - Fix hanging up on sites contain CodeMirror ([#62](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/62)) + - Chores + - Add documentation about blurring on Xterm.js ## [0.2.2](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.2.2) diff --git a/manifest.json b/manifest.json index 2ecb415..7a0584a 100644 --- a/manifest.json +++ b/manifest.json @@ -1,8 +1,8 @@ { "manifest_version": 3, "name": "Text Blurrer", - "version": "0.2.2", - "version_name": "0.2.2", + "version": "0.2.3", + "version_name": "0.2.3", "description": "Blurring sensitive specified text/keyword.", "permissions": [ "storage", From 8b84edbfbcda9dc92a53b43c98b7b4590553228d Mon Sep 17 00:00:00 2001 From: horihiro Date: Wed, 1 May 2024 08:15:36 +0900 Subject: [PATCH 14/15] Refactor --- content/js/main.js | 51 ++++++++++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/content/js/main.js b/content/js/main.js index f67e4b0..a4e1cc7 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -2,7 +2,15 @@ const src = chrome.runtime.getURL('util/common.js'); const { escapeRegExp } = await import(src); const w = window; - const exElmList = ['html', 'title', 'script', 'noscript', 'style', 'meta', 'link', 'head', 'textarea', '#comment']; + const inputs = []; + const observedNodes = []; + + const SKIP_NODE_NAMES = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'HEAD', 'META', 'LINK', 'HTML', 'TEXTAREA', 'TITLE', '#comment']; + const BLOCK_ELEMENT_NAMES = [ + 'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'CANVAS', 'DD', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', + 'FIGURE', 'FOOTER', 'FORM', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HR', 'LI', 'MAIN', 'NAV', 'NOSCRIPT', + 'OL', 'P', 'PRE', 'SCRIPT', 'SECTION', 'TABLE', 'TFOOT', 'UL', 'VIDEO' + ]; const CLASS_NAME_BLURRED = 'tb-blurred'; const CLASS_PREFIX_BLURRED_GROUP = 'tb-blurred-group-'; const CLASS_NAME_KEEP = 'tb-keep-this'; @@ -47,14 +55,24 @@ } }); - const isInCodeMirror = (element) => { - return element.nodeType == 1 - ? element.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`) ? true : false - : isInCodeMirror(element.parentNode); - }; - const inputs = []; + const shouldBeSkipped = (node) => { + if (node.nodeType !== 1) return shouldBeSkipped(node.parentNode); + + if (!!node.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`)) { + console.debug(`Skipped. Reason: CodeMirror`); + return true; + } + if (isBlurred(node)) { + console.debug(`Skipped. Reason: Already blurred`); + return true; + } + if (SKIP_NODE_NAMES.includes(node.nodeName)) { + console.debug(`Skipped. Reason: nodeName is ${node.nodeName}`); + return true; + } + return false; + } - const SKIP_NODE_NAMES = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'HEAD', 'META', 'LINK', 'HTML', '#comment']; const getNextTextNode = (e, root) => { if (!e) return null; if (e.firstChild && !SKIP_NODE_NAMES.includes(e.nodeName)) return e.firstChild.nodeName === '#text' ? e.firstChild : getNextTextNode(e.firstChild, root); @@ -91,11 +109,6 @@ : '' } - const BLOCK_ELEMENT_NAMES = [ - 'ADDRESS', 'ARTICLE', 'ASIDE', 'BLOCKQUOTE', 'CANVAS', 'DD', 'DIV', 'DL', 'DT', 'FIELDSET', 'FIGCAPTION', - 'FIGURE', 'FOOTER', 'FORM', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'HEADER', 'HR', 'LI', 'MAIN', 'NAV', 'NOSCRIPT', - 'OL', 'P', 'PRE', 'SCRIPT', 'SECTION', 'TABLE', 'TFOOT', 'UL', 'VIDEO' - ]; const blockContents = (node) => { return Array.from(node.childNodes).reduce((lines, child) => { if (SKIP_NODE_NAMES.includes(child.nodeName)) return lines; @@ -133,7 +146,7 @@ return !!(node.nodeType == 1 ? node : node.parentNode).closest(`.${CLASS_NAME_BLURRED}`) } - const getElementsToBeBlurred = (pattern, target, options) => { + const blockAndBlur = (pattern, target, options) => { let textNode = getNextTextNode(target, target), pos = 0; if (!textNode) return; let _startsFrom = 0; @@ -211,12 +224,7 @@ const insertNodes = []; const removeNodes = []; if (!from.node.parentNode || !to.node.parentNode - || exElmList.includes(from.node.parentNode.nodeName.toLowerCase()) || exElmList.includes(from.node.parentNode.nodeName.toLowerCase()) - || isBlurred(from.node.parentNode) || isBlurred(to.node.parentNode) ) return; - if (isInCodeMirror(from.node.parentNode) || isInCodeMirror(to.node.parentNode)) { - console.warn('CodeMirror is not supported'); - return; - } + || shouldBeSkipped(from.node) || shouldBeSkipped(to.node)) return; if (from.node == to.node) { const computedStyle = getComputedStyle(from.node.parentNode); @@ -302,7 +310,7 @@ }); } } - getElementsToBeBlurred(pattern, target || document.body, options); + blockAndBlur(pattern, target || document.body, options); const blurInShadowRoot = (target) => { target.shadowRoot && blur(pattern, options, target.shadowRoot); @@ -453,7 +461,6 @@ inputObj.masks[p].forEach(m => m.style.setProperty('display', '')); } } - const observedNodes = []; const blur = (pattern, options, target) => { const observed = target || document.body; if (observedNodes.includes(observed)) return; From f0901626905614b8005b8b2ba315e1e5ea22daee Mon Sep 17 00:00:00 2001 From: horihiro Date: Wed, 1 May 2024 11:07:30 +0900 Subject: [PATCH 15/15] Update about contentEditable element --- README.md | 5 +++-- content/js/main.js | 14 +++++++++----- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 3068a1d..8b356f8 100644 --- a/README.md +++ b/README.md @@ -61,8 +61,9 @@ If you can try a development version, the following steps are needed. - These are **experimental** features - Input Element blurring - Tab title masking - - HTML Canvas: - This extension cannot blur text drown on HTML Canvas + - The following HTML elements are not supported: + - HTML Canvas + - Inside of `contentEditable` element - Web Terminal based on Xterm.js: see [here](./docs/BLUR_ON_XTERMJS.md) - Web Editor based on CodeMirror: diff --git a/content/js/main.js b/content/js/main.js index a4e1cc7..d25b54e 100644 --- a/content/js/main.js +++ b/content/js/main.js @@ -58,16 +58,20 @@ const shouldBeSkipped = (node) => { if (node.nodeType !== 1) return shouldBeSkipped(node.parentNode); - if (!!node.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`)) { - console.debug(`Skipped. Reason: CodeMirror`); - return true; - } if (isBlurred(node)) { console.debug(`Skipped. Reason: Already blurred`); return true; } if (SKIP_NODE_NAMES.includes(node.nodeName)) { - console.debug(`Skipped. Reason: nodeName is ${node.nodeName}`); + console.debug(`Skipped. Reason: The nodeName is ${node.nodeName}`); + return true; + } + if (!!node.closest(`.${CLASS_NAME_CODEMIRROR_EDITOR}`)) { + console.debug(`Skipped. Reason: CodeMirror`); + return true; + } + if (node.isContentEditable) { + console.debug(`Skipped. Reason: The node is contentEditable`); return true; } return false;