diff --git a/src/background/storage.ts b/src/background/storage.ts index 8e7bca0..55669b5 100644 --- a/src/background/storage.ts +++ b/src/background/storage.ts @@ -6,7 +6,7 @@ export function getDefaultStorage(): SearchReplacePopupStorage { replaceTerm: '', options: { matchCase: false, - inputFieldsOnly: false, + inputFieldsOnly: true, hiddenContent: false, wholeWord: false, isRegex: false, diff --git a/src/cypress/e2e/amazon.cy.ts b/src/cypress/e2e/amazon.cy.ts new file mode 100644 index 0000000..7eb224a --- /dev/null +++ b/src/cypress/e2e/amazon.cy.ts @@ -0,0 +1,94 @@ +/// + +import { ELEMENT_FILTER } from '../../constants' +import { isBlobIframe } from '../../elements' +import { searchReplace } from '../../searchreplace' + +const SEARCHTERM = 'Chris' +const REPLACETERM = 'Something else' +const BASEURL = 'http://localhost:9000' +describe('Search Replace WordPress', { baseUrl: BASEURL, responseTimeout: 120e3 }, () => { + beforeEach(() => { + cy.visit('http://localhost:9000/tests/amazon_seller/test.html') + }) + + it('counts the correct number of occurrences', () => { + cy.window().then((window) => { + console.log(window.location.host) + const iframes = Array.from( + >window.document.querySelectorAll('iframe') + ).filter((iframe) => !isBlobIframe(iframe)) + cy.wrap( + searchReplace( + 'count', + window, + SEARCHTERM, + REPLACETERM, + false, + false, + true, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result) => { + console.log(`result`, result) + expect(result.searchReplaceResult.count.original).to.equal(1) + }) + ).then(() => { + console.log('done') + }) + }) + }) + it('replaces the search term and then replaces it again', () => { + cy.window().then((window) => { + console.log(window.location.host) + const iframes = Array.from( + >window.document.querySelectorAll('iframe') + ).filter((iframe) => !isBlobIframe(iframe)) + cy.wrap( + searchReplace( + 'searchReplace', + window, + SEARCHTERM, + REPLACETERM, + false, + false, + true, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result1) => { + expect(result1.searchReplaceResult.count.replaced).to.equal(1) + searchReplace( + 'searchReplace', + window, + REPLACETERM, + SEARCHTERM, + false, + false, + true, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result2) => { + expect(result2.searchReplaceResult.count.replaced).to.equal(1) + }) + }) + ).then(() => { + console.log('done') + }) + }) + }) +}) diff --git a/src/cypress/e2e/outlook.cy.ts b/src/cypress/e2e/outlook.cy.ts new file mode 100644 index 0000000..ddda875 --- /dev/null +++ b/src/cypress/e2e/outlook.cy.ts @@ -0,0 +1,94 @@ +/// + +import { ELEMENT_FILTER } from '../../constants' +import { isBlobIframe } from '../../elements' +import { searchReplace } from '../../searchreplace' + +const SEARCHTERM = 'Something else' +const REPLACETERM = 'The replacement' +const BASEURL = 'http://localhost:9000' +describe('Search Replace WordPress', { baseUrl: BASEURL, responseTimeout: 120e3 }, () => { + beforeEach(() => { + cy.visit('http://localhost:9000/tests/outlook/test.html') + }) + + it('counts the correct number of occurrences', () => { + cy.window().then((window) => { + console.log(window.location.host) + const iframes = Array.from( + >window.document.querySelectorAll('iframe') + ).filter((iframe) => !isBlobIframe(iframe)) + cy.wrap( + searchReplace( + 'count', + window, + SEARCHTERM, + REPLACETERM, + true, + false, + false, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result) => { + console.log(`result`, result) + expect(result.searchReplaceResult.count.original).to.equal(1) + }) + ).then(() => { + console.log('done') + }) + }) + }) + it('replaces the search term and then replaces it again', () => { + cy.window().then((window) => { + console.log(window.location.host) + const iframes = Array.from( + >window.document.querySelectorAll('iframe') + ).filter((iframe) => !isBlobIframe(iframe)) + cy.wrap( + searchReplace( + 'searchReplace', + window, + SEARCHTERM, + REPLACETERM, + true, + false, + false, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result1) => { + expect(result1.searchReplaceResult.count.replaced).to.equal(1) + searchReplace( + 'searchReplace', + window, + REPLACETERM, + SEARCHTERM, + true, + false, + false, + false, + false, + false, + true, + false, + iframes, + ELEMENT_FILTER + ).then((result2) => { + expect(result2.searchReplaceResult.count.replaced).to.equal(1) + }) + }) + ).then(() => { + console.log('done') + }) + }) + }) +}) diff --git a/src/cypress/e2e/searchreplace.cy.ts b/src/cypress/e2e/searchreplace.cy.ts index 7b78663..0642e80 100644 --- a/src/cypress/e2e/searchreplace.cy.ts +++ b/src/cypress/e2e/searchreplace.cy.ts @@ -63,9 +63,6 @@ describe('Search Replace ', () => { }) }) - // TODO add visibilty test for divs contained within hidden parent divs that are multiple levels deep - // it('counts the correct number of visible occurrences for nested hidden items', () => { - it('counts the correct number of visible occurrences', () => { cy.window().then((window) => { const iframes = Array.from(>window.document.querySelectorAll('iframe')) @@ -145,7 +142,7 @@ describe('Search Replace ', () => { iframes, ELEMENT_FILTER ).then((result) => { - expect(result.searchReplaceResult.count.original).to.equal(4) + expect(result.searchReplaceResult.count.original).to.equal(5) }) ).then(() => { console.log('done') @@ -174,7 +171,7 @@ describe('Search Replace ', () => { iframes, ELEMENT_FILTER ).then((result) => { - expect(result.searchReplaceResult.count.original).to.equal(3) + expect(result.searchReplaceResult.count.original).to.equal(4) }) ).then(() => { console.log('done') diff --git a/src/elements.ts b/src/elements.ts index 5daeabe..1f1e682 100644 --- a/src/elements.ts +++ b/src/elements.ts @@ -7,7 +7,9 @@ export function getInputElements( elementFilter: Map, hiddenContent?: boolean ): (HTMLInputElement | HTMLTextAreaElement)[] { - const inputs = Array.from(>document.querySelectorAll('input,textarea')) + const inputs = Array.from( + >document.querySelectorAll('input,textarea,div[contenteditable="true"]') + ) const visibleElements = !hiddenContent ? inputs.filter((input) => elementIsVisible(input, true, false)) : inputs return visibleElements.filter((input) => !elementFilter.has(input)) } diff --git a/src/searchreplace.ts b/src/searchreplace.ts index 4985835..5c37556 100644 --- a/src/searchreplace.ts +++ b/src/searchreplace.ts @@ -59,14 +59,72 @@ function setNativeValue(element: HTMLInputElement | HTMLTextAreaElement, value: prototypeValueSetter = prototypeValueFn.set } if (valueSetter && prototypeValueSetter && valueSetter !== prototypeValueSetter) { + console.log('prototypeValueSetter.call(element, value)') prototypeValueSetter.call(element, value) } else if (valueSetter) { valueSetter.call(element, value) + console.log('valueSetter.call(element, value)') } else { element.value = value + element.setAttribute('value', value) + element.shadowRoot?.getElementById(element.id)?.setAttribute('value', value) + console.log(element) + console.log('element.value = value') + console.log(element) } } +function replaceInInputShadow( + input: HTMLInputElement | HTMLTextAreaElement, + config: SearchReplaceConfig, + newValue: string +) { + if (config.shadowRoots.length) { + config.shadowRoots.map((shadowRoot) => { + let shadowInputs = Array.from(shadowRoot.querySelectorAll(`input[id="${input['id']}"]`)) + if (!shadowInputs.length) { + shadowInputs = Array.from(shadowRoot.querySelectorAll(`input[name="${input['name']}"]`)) + } + if (!shadowInputs.length) { + shadowInputs = Array.from(shadowRoot.querySelectorAll(`input[value="${input['value']}"]`)) + } + if (!shadowInputs.length) { + // perform less exact search + shadowInputs = Array.from(shadowRoot.querySelectorAll(`*[value="${input['value']}"]`)) + } + if (shadowInputs.length) { + shadowInputs.map((shadowInput) => { + shadowInput['value'] = newValue + shadowInput.dispatchEvent(new Event('input', { bubbles: true })) + }) + shadowRoot.host.dispatchEvent(new Event('input', { bubbles: true })) + } + }) + } +} + +function getValue(node: Element | Node, config: SearchReplaceConfig): string { + const nodeElement = getElementFromNode(node) + // if it's an input or a textarea, take the value + if (nodeElement && (nodeElement.nodeName === 'INPUT' || nodeElement.nodeName === 'TEXTAREA')) { + return nodeElement['value'] + } + // if it's a contenteditable div, take the innerHTML + if (nodeElement && nodeElement.nodeName === 'DIV' && nodeElement.getAttribute('contenteditable') === 'true') { + return nodeElement['innerHTML'] + } + // if the search target is innerHTML, take the innerHTML + if (nodeElement && config.searchTarget === 'innerHTML') { + return nodeElement['innerHTML'] + } + // If it's a text node, return the nodeValue + if (node.nodeType === Node.TEXT_NODE) { + return node.nodeValue || '' + } + // Otherwise return the innerText + return node['innerText'] +} + function replaceInInput( config: SearchReplaceConfig, document: Document, @@ -75,15 +133,17 @@ function replaceInInput( elementsChecked: Map ): ReplaceFunctionReturnType { if (input.value !== undefined) { - const oldValue = input.value + const oldValue = getValue(input, config) const occurrences = oldValue.match(config.searchPattern) if (occurrences) { searchReplaceResult.count.original = Number(searchReplaceResult.count.original) + occurrences.length const newValue = input.value.replace(config.searchPattern, config.replaceTerm) if (config.replace && oldValue !== newValue) { + replaceInInputShadow(input, config, newValue) input.focus() setNativeValue(input, newValue) + const replaceCount = config.replaceAll ? occurrences.length : 1 elementsChecked = updateResults(elementsChecked, input, true, occurrences.length, replaceCount) @@ -135,43 +195,53 @@ function countOccurrences(el: HTMLElement, config: SearchReplaceConfig): number return matches.length } -function replaceInElement(node: Element, oldValue: string, config: SearchReplaceConfig) { - const occurrences = oldValue.match(config.globalSearchPattern) || [] +function replaceInContentEditableDiv( + element: Element, + oldValue: string, + occurrences: RegExpMatchArray, + config: SearchReplaceConfig +) { + const newValue = oldValue.replace(config.searchPattern, config.replaceTerm) + return replaceInNodeOrElement(element, newValue, occurrences, config, 'innerHTML') +} + +// TODO make replace function part of config instead of continuously checking innerText vs. innerHTML +function replaceInNodeOrElement( + node: Node | Element, + newValue: string, + occurrences: RegExpMatchArray, + config: SearchReplaceConfig, + replaceTarget?: 'innerText' | 'innerHTML' +) { let replacementCount = 0 - let replace = false let replaced = false - if (occurrences.length) { - const newValue = oldValue.replace(config.searchPattern, config.replaceTerm) - replace = oldValue != newValue - if (replace) { - replacementCount = config.replaceAll ? occurrences.length : 1 // adds one to replaced count if a replacement was made, adds occurrences if a global replace is made - const nodeElement = getElementFromNode(node) - - if ('value' in nodeElement) { - // TODO unify with replaceInInput, taking care not to count occurrences again - nodeElement['value'] = newValue - replaced = true - } - if (config.searchTarget === 'innerHTML') { - node[config.searchTarget] = newValue - replaced = true - } else if (node.nodeValue) { - // replace in innerText but use nodeValue only as innerText contains text of descendent elements - node.nodeValue = newValue - replaced = true - } - } + const nodeElement = getElementFromNode(node) + if (config.searchTarget === 'innerHTML' && nodeElement) { + nodeElement[config.searchTarget] = newValue + replaced = true + } else if (replaceTarget && nodeElement) { + nodeElement[replaceTarget] = newValue + replaced = true + } else { + // replace in innerText but use nodeValue only as innerText contains text of descendent elements + node.nodeValue = newValue + replaced = true + } + if (replaced) { + replacementCount = config.replaceAll ? occurrences.length : 1 // adds one to replaced count if a replacement was made, adds occurrences if a global replace is made } - return { node, occurrences: occurrences.length, replacementCount, replaced } + nodeElement?.dispatchEvent(new Event('input', { bubbles: true })) + + return { node, replacementCount, replaced } } -function getElementFromNode(node: Node): Element { +function getElementFromNode(node: Node): Element | undefined { let element = node as Element if (node.nodeType === Node.TEXT_NODE) { if (node.parentElement) { element = node.parentElement } else { - throw new Error('Text node has no parent element') + return undefined } } if (!(element && element.nodeType === Node.ELEMENT_NODE)) { @@ -182,6 +252,11 @@ function getElementFromNode(node: Node): Element { function isIgnored(ignoredElements: Set, node: Node, hiddenContent: boolean, elementFilter: RegExp): number { const toCheck = getElementFromNode(node) + // if there is no element, reject + if (!toCheck) { + return NodeFilter.FILTER_REJECT + } + // if a script or an iframe that is not a blob iframe, reject if (toCheck.tagName.match(elementFilter) && !isBlobIframe(toCheck)) { return NodeFilter.FILTER_REJECT @@ -225,34 +300,50 @@ function nodesUnder( const walked = new Set() while ((node = walk.nextNode())) { + if (!config.replace) { + break + } + console.log('Config.replace', config.replace) + if (walked.has(node)) { + console.log('Continuing as already walked') continue } walked.add(node) const nodeElement = getElementFromNode(node) + if (!nodeElement) { + console.log('Continuing as no parentElement') + continue + } + if (nodeElement.tagName === 'WINDOW') { + console.log('Continuing as element is window') + continue + } + const oldValue = getValue(node, config) + const occurrences = oldValue.match(config.globalSearchPattern) + + if (!occurrences) { + console.log('Continuing as no occurrences') continue } if (!config.hiddenContent && isHidden(nodeElement, false)) { + console.log('Continuing as isHidden nodeElement', nodeElement) continue } if (config.replace) { - let oldValue = node['innerHTML'] - if (config.searchTarget === 'innerText') { - oldValue = node.nodeValue || nodeElement['value'] - } - - if (node && oldValue) { + const newValue = oldValue.replace(config.searchPattern, config.replaceTerm) + if (node && oldValue && oldValue !== newValue) { // Do the replacement - const replaceResult = replaceInElement(node as Element, oldValue, config) + const replaceResult = replaceInNodeOrElement(node, newValue, occurrences, config) elementsChecked = updateResults( elementsChecked, node as Element, replaceResult.replaced, - replaceResult.occurrences, + occurrences.length, replaceResult.replacementCount ) searchReplaceResult.count.replaced += replaceResult.replacementCount @@ -264,8 +355,6 @@ function nodesUnder( break } } - } else { - break } } @@ -327,8 +416,9 @@ function replaceInner( // TODO - use the cloned element result to check if the number of elements found in the clone is equal to the number // found in the original element. if (!config.hiddenContent) { - inputs = inputs.filter((input) => elementIsVisible(input, true, true)) + inputs = inputs.filter((input) => elementIsVisible(input, true, false)) } + console.log('Found inputs', inputs) const inputResult = replaceInInputs(config, document, inputs, searchReplaceResult, elementsChecked) @@ -340,16 +430,44 @@ function replaceInner( function replaceInInputs( config: SearchReplaceConfig, document: Document, - inputs: (HTMLInputElement | HTMLTextAreaElement)[], + inputs: (HTMLInputElement | HTMLTextAreaElement | HTMLElement)[], searchReplaceResult: SearchReplaceResult, elementsChecked: Map ): ReplaceFunctionReturnType { for (const input of inputs) { - const inputResult = replaceInInput(config, document, input, searchReplaceResult, elementsChecked) - searchReplaceResult = inputResult.searchReplaceResult - elementsChecked = inputResult.elementsChecked - if (config.replaceNext && searchReplaceResult.replaced) { - config.replace = false + if ('value' in input) { + // input, textarea + const inputResult = replaceInInput(config, document, input, searchReplaceResult, elementsChecked) + searchReplaceResult = inputResult.searchReplaceResult + elementsChecked = inputResult.elementsChecked + if (config.replaceNext && searchReplaceResult.replaced) { + config.replace = false + } + } else { + const oldValue = getValue(input, config) + const occurrences = oldValue.match(config.globalSearchPattern) + console.log('oldValue', oldValue, 'occurrences', occurrences) + if (occurrences) { + searchReplaceResult.count.original = Number(searchReplaceResult.count.original) + occurrences.length + if (config.replace) { + // contenteditable + const elementResult = replaceInContentEditableDiv(input, oldValue, occurrences, config) + elementsChecked = updateResults( + elementsChecked, + input, + elementResult.replaced, + occurrences.length, + elementResult.replacementCount + ) + searchReplaceResult.count.replaced += elementResult.replacementCount + searchReplaceResult.replaced = elementResult.replaced + input.dispatchEvent(new Event('input', { bubbles: true })) + if (config.replaceNext && searchReplaceResult.replaced) { + config.replace = false + break + } + } + } } } return { searchReplaceResult, elementsChecked } @@ -446,11 +564,8 @@ function replaceInHTML( clonedElement = clonedElementRemoved as HTMLElement ignoredElements = new Set([...ignoredElements, ...removedSet]) - console.log( - "Ignored elements after removing hidden elements from the element's descendants", - ignoredElements - ) } + console.log('Ignored elements', ignoredElements) // replace inner texts first, dropping out if we have done a replacement and are not working globally const innerResult = replaceInner( @@ -507,6 +622,13 @@ export async function searchReplace( const globalFlags = getFlags(matchCase, true) const globalSearchPattern = getSearchPattern(searchTerm, isRegex, globalFlags, wholeWord) const searchTarget = replaceHTML ? 'innerHTML' : 'innerText' + let shadowRoots: ShadowRoot[] = [] + if (replace) { + shadowRoots = Array.from(document.querySelectorAll('*')) + .map((el) => el.shadowRoot) + .filter(notEmpty) + } + const config: SearchReplaceConfig = { action, replace, @@ -528,6 +650,7 @@ export async function searchReplace( elementFilter, usesKnockout: usesKnockout(window.document), searchTarget, + shadowRoots, } // we check other places if text was not replaced in a text editor diff --git a/src/types/types.ts b/src/types/types.ts index 4f4e1b4..db46bfa 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -168,6 +168,7 @@ export type SearchReplaceConfig = { elementFilter: RegExp usesKnockout: boolean searchTarget: 'innerHTML' | 'innerText' | 'value' + shadowRoots: ShadowRoot[] } export type ReplaceFunctionReturnType = { diff --git a/tests/amazon_seller/test.html b/tests/amazon_seller/test.html new file mode 100644 index 0000000..886178e --- /dev/null +++ b/tests/amazon_seller/test.html @@ -0,0 +1,518 @@ + Amazon + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Primary contact person information

View all saved addresses
Your Addresses
Phone
 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+ +
+
+
+ +
+
+ +
+ +
+
+ +
+
+

Settings

+
+
+ +
+
+
+ Logout +
+ +
+
+
+
+
+ + + + + + + + + +
+ +
+ + © 1996-2024, Amazon.com, Inc. + +
+
+
+ + + +
+
+ +
+
+ +
+
+ +
+ + + + + + + +
+
+

FAQ

+
+
+ + +
+ EU regulations require us to collect certain business and personal information from our sellers and to take steps to confirm their identity. +
+ +
+ +
+ EU support unified registration and as a part of it we register seller in all the marketplaces in Europe. Marketplaces in EU8 are UK, DE, IT, ES, FR, NL, SE, PL +
+ +
+ +
+ The numbers must be prefixed with the country code. Following is the correct format +1 1298279287 +
+ +
+ +
+ You can enter your landline phone number and select the Call option to receive the phone verification PIN. +
+ +
+ +
+ Check whether you have entered your phone number in the correct format. Request the PIN again. +
+ +
+ +
+ If the 'Call' option is not available in your country, select the SMS option. +
+ +
+
+
+
+ + + + + + + + + +
+
+
+
+
+ +
+
+
+
+
+ + + + + + + + +
+
+ + + + + + + + + + + + + + +
+
+ + 1 + +
+
+ Seller information +
+
+ + + +
+ +
+ + + + + + + + + + + +
+
+ + 2 + +
+
+ Billing +
+
+ + + +
+ +
+ + + + + + + + + + + +
+
+ + 3 + +
+
+ Store +
+
+ + + +
+ +
+ + + + + + + + + + + +
+
+ + 4 + +
+
+ Verification +
+
+ + + + + + + +
+
+
+ + + +
+
+ + diff --git a/tests/outlook/test.html b/tests/outlook/test.html new file mode 100644 index 0000000..ecc6314 --- /dev/null +++ b/tests/outlook/test.html @@ -0,0 +1,20 @@ + + Email - The Person - Outlook +
Outlook

Hide navigation pane
Home
View
Help
Message
Insert
Format text
Draw
Options
Font +Pick a new font for your text.
Font size +Change the size of your text.
Navigation pane
Favourites

Inbox134unread

Sent Items

Drafts3items

Add favourite
Folders

Inbox134unread

Junk Email6items

Draftsselected3items

Sent Items

Deleted Items

Notes

Archive

Conversation History

Create new folder
Groups

New group
Drafts
Remove from Favourites
Select
Today
[Draft]
Blah x
13:57
Ooi oi oi oi This is the replacement Something else
[Draft]
(No subject)
12:30
adad
Yesterday
[Draft] someone@someone.com
Test
Wed 15:47
Something else
Press Alt+Down for more options
To
Draft saved at 13:57
Ooi oi oi oi This is the replacement
Something else
Alt Windows,
Something else