feat: 增强 PayPal 标签页检测逻辑，支持自动接管已打开的 PayPal 页面，并优化登录流程的元素查找
This commit is contained in:
QLHazyCoder
@@ -9,13 +9,21 @@ function loadModule() {
|
||||
return new Function('self', `${source}; return self.MultiPageBackgroundPayPalApprove;`)(self);
|
||||
}
|
||||
|
||||
function createExecutor({ pageStates, submitResults, tabUrls = [] }) {
|
||||
function createExecutor({
|
||||
pageStates,
|
||||
submitResults,
|
||||
tabUrls = [],
|
||||
getTabId = async (source) => (source === 'paypal-flow' ? 1 : null),
|
||||
isTabAlive = async () => true,
|
||||
queryTabs = [],
|
||||
}) {
|
||||
const api = loadModule();
|
||||
const events = {
|
||||
completed: [],
|
||||
logs: [],
|
||||
messages: [],
|
||||
submittedPayloads: [],
|
||||
updatedTabs: [],
|
||||
};
|
||||
const stateQueue = [...pageStates];
|
||||
const submitQueue = [...submitResults];
|
||||
@@ -28,24 +36,29 @@ function createExecutor({ pageStates, submitResults, tabUrls = [] }) {
|
||||
},
|
||||
chrome: {
|
||||
tabs: {
|
||||
get: async () => {
|
||||
get: async (tabId = 1) => {
|
||||
if (urlQueue.length) {
|
||||
lastUrl = urlQueue.shift();
|
||||
}
|
||||
return {
|
||||
id: 1,
|
||||
id: tabId,
|
||||
status: 'complete',
|
||||
url: lastUrl,
|
||||
};
|
||||
},
|
||||
query: async () => queryTabs,
|
||||
update: async (tabId, updateInfo) => {
|
||||
events.updatedTabs.push({ tabId, updateInfo });
|
||||
return {};
|
||||
},
|
||||
},
|
||||
},
|
||||
completeStepFromBackground: async (step, payload) => {
|
||||
events.completed.push({ step, payload });
|
||||
},
|
||||
ensureContentScriptReadyOnTabUntilStopped: async () => {},
|
||||
getTabId: async (source) => (source === 'paypal-flow' ? 1 : null),
|
||||
isTabAlive: async () => true,
|
||||
getTabId,
|
||||
isTabAlive,
|
||||
sendTabMessageUntilStopped: async (_tabId, _source, message) => {
|
||||
events.messages.push(message.type);
|
||||
if (message.type === 'PAYPAL_GET_STATE') {
|
||||
@@ -94,6 +107,38 @@ test('PayPal approve keeps original combined email and password login path', asy
|
||||
assert.equal(events.messages.includes('PAYPAL_CLICK_APPROVE'), true);
|
||||
});
|
||||
|
||||
test('PayPal approve discovers an already open unregistered PayPal tab', async () => {
|
||||
const { executor, events } = createExecutor({
|
||||
pageStates: [
|
||||
{ needsLogin: false, approveReady: true },
|
||||
],
|
||||
submitResults: [],
|
||||
getTabId: async () => null,
|
||||
isTabAlive: async () => false,
|
||||
queryTabs: [
|
||||
{
|
||||
id: 7,
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
url: 'https://www.paypal.com/pay/?token=BA-demo',
|
||||
},
|
||||
],
|
||||
tabUrls: [
|
||||
'https://www.paypal.com/pay/?token=BA-demo',
|
||||
],
|
||||
});
|
||||
|
||||
await executor.executePayPalApprove({
|
||||
paypalEmail: 'user@example.com',
|
||||
paypalPassword: 'secret',
|
||||
});
|
||||
|
||||
assert.deepEqual(events.updatedTabs, [{ tabId: 7, updateInfo: { active: true } }]);
|
||||
assert.equal(events.logs.some(({ message }) => /发现 PayPal 页面/.test(message)), true);
|
||||
assert.deepEqual(events.completed.map((item) => item.step), [8]);
|
||||
assert.equal(events.messages.includes('PAYPAL_CLICK_APPROVE'), true);
|
||||
});
|
||||
|
||||
test('PayPal approve auto-detects split email then password pages', async () => {
|
||||
const { executor, events } = createExecutor({
|
||||
pageStates: [
|
||||
|
||||
@@ -0,0 +1,205 @@
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
|
||||
const source = fs.readFileSync('content/paypal-flow.js', 'utf8');
|
||||
|
||||
function extractFunction(name) {
|
||||
const markers = [`async function ${name}(`, `function ${name}(`];
|
||||
const start = markers
|
||||
.map((marker) => source.indexOf(marker))
|
||||
.find((index) => index >= 0);
|
||||
if (start < 0) {
|
||||
throw new Error(`missing function ${name}`);
|
||||
}
|
||||
|
||||
let parenDepth = 0;
|
||||
let signatureEnded = false;
|
||||
let braceStart = -1;
|
||||
for (let index = start; index < source.length; index += 1) {
|
||||
const char = source[index];
|
||||
if (char === '(') {
|
||||
parenDepth += 1;
|
||||
} else if (char === ')') {
|
||||
parenDepth -= 1;
|
||||
if (parenDepth === 0) {
|
||||
signatureEnded = true;
|
||||
}
|
||||
} else if (char === '{' && signatureEnded) {
|
||||
braceStart = index;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (braceStart < 0) {
|
||||
throw new Error(`missing body for function ${name}`);
|
||||
}
|
||||
|
||||
let depth = 0;
|
||||
let end = braceStart;
|
||||
for (; end < source.length; end += 1) {
|
||||
const char = source[end];
|
||||
if (char === '{') depth += 1;
|
||||
if (char === '}') {
|
||||
depth -= 1;
|
||||
if (depth === 0) {
|
||||
end += 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return source.slice(start, end);
|
||||
}
|
||||
|
||||
function createElement({
|
||||
tag = 'div',
|
||||
type = '',
|
||||
id = '',
|
||||
name = '',
|
||||
text = '',
|
||||
value = '',
|
||||
placeholder = '',
|
||||
attrs = {},
|
||||
style = {},
|
||||
rect = { width: 160, height: 40 },
|
||||
parentElement = null,
|
||||
} = {}) {
|
||||
return {
|
||||
nodeType: 1,
|
||||
tag,
|
||||
type,
|
||||
id,
|
||||
name,
|
||||
textContent: text,
|
||||
value,
|
||||
placeholder,
|
||||
disabled: false,
|
||||
hidden: Boolean(attrs.hidden),
|
||||
style: {
|
||||
display: 'block',
|
||||
visibility: 'visible',
|
||||
opacity: '1',
|
||||
...style,
|
||||
},
|
||||
parentElement,
|
||||
getAttribute(key) {
|
||||
if (key === 'type') return type;
|
||||
if (key === 'id') return id;
|
||||
if (key === 'name') return name;
|
||||
if (key === 'placeholder') return placeholder;
|
||||
if (key === 'value') return value;
|
||||
return Object.prototype.hasOwnProperty.call(attrs, key) ? attrs[key] : null;
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return rect;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function loadApi(elements) {
|
||||
const document = {
|
||||
documentElement: {},
|
||||
querySelectorAll(selector) {
|
||||
if (selector === 'input') {
|
||||
return elements.filter((el) => el.tag === 'input');
|
||||
}
|
||||
if (selector === 'input[type="email"]') {
|
||||
return elements.filter((el) => el.tag === 'input' && el.type === 'email');
|
||||
}
|
||||
if (selector === 'input[type="password"]') {
|
||||
return elements.filter((el) => el.tag === 'input' && el.type === 'password');
|
||||
}
|
||||
if (selector.includes('button') || selector.includes('[role="button"]')) {
|
||||
return elements.filter((el) => el.tag === 'button' || el.attrs?.role === 'button');
|
||||
}
|
||||
return [];
|
||||
},
|
||||
};
|
||||
const window = {
|
||||
getComputedStyle(el) {
|
||||
return el?.style || { display: 'block', visibility: 'visible', opacity: '1' };
|
||||
},
|
||||
};
|
||||
|
||||
return new Function('document', 'window', `
|
||||
${extractFunction('isVisibleElement')}
|
||||
${extractFunction('normalizeText')}
|
||||
${extractFunction('getActionText')}
|
||||
${extractFunction('getVisibleControls')}
|
||||
${extractFunction('isEnabledControl')}
|
||||
${extractFunction('findClickableByText')}
|
||||
${extractFunction('findInputByPatterns')}
|
||||
${extractFunction('findEmailInput')}
|
||||
${extractFunction('findPasswordInput')}
|
||||
${extractFunction('findLoginNextButton')}
|
||||
${extractFunction('findEmailNextButton')}
|
||||
${extractFunction('findPasswordLoginButton')}
|
||||
${extractFunction('getPayPalLoginPhase')}
|
||||
return {
|
||||
findEmailInput,
|
||||
findPasswordInput,
|
||||
findEmailNextButton,
|
||||
findPasswordLoginButton,
|
||||
getPayPalLoginPhase,
|
||||
};
|
||||
`)(document, window);
|
||||
}
|
||||
|
||||
test('PayPal email page ignores hidden pre-rendered password input', () => {
|
||||
const hiddenPanel = createElement({ attrs: { 'aria-hidden': 'true' } });
|
||||
const emailInput = createElement({
|
||||
tag: 'input',
|
||||
type: 'text',
|
||||
id: 'login_email',
|
||||
name: 'login_email',
|
||||
value: 'user@example.com',
|
||||
placeholder: 'Email',
|
||||
});
|
||||
const hiddenPasswordInput = createElement({
|
||||
tag: 'input',
|
||||
type: 'password',
|
||||
id: 'login_password',
|
||||
name: 'login_password',
|
||||
parentElement: hiddenPanel,
|
||||
});
|
||||
const nextButton = createElement({
|
||||
tag: 'button',
|
||||
id: 'btnNext',
|
||||
text: 'Next',
|
||||
});
|
||||
|
||||
const api = loadApi([emailInput, hiddenPasswordInput, nextButton]);
|
||||
|
||||
assert.equal(api.findEmailInput(), emailInput);
|
||||
assert.equal(api.findPasswordInput(), null);
|
||||
assert.equal(api.findEmailNextButton(), nextButton);
|
||||
assert.equal(api.findPasswordLoginButton(), null);
|
||||
assert.equal(api.getPayPalLoginPhase(emailInput, api.findPasswordInput()), 'email');
|
||||
});
|
||||
|
||||
test('PayPal combined login page still sees visible password input', () => {
|
||||
const emailInput = createElement({
|
||||
tag: 'input',
|
||||
type: 'text',
|
||||
id: 'login_email',
|
||||
name: 'login_email',
|
||||
});
|
||||
const passwordInput = createElement({
|
||||
tag: 'input',
|
||||
type: 'password',
|
||||
id: 'login_password',
|
||||
name: 'login_password',
|
||||
});
|
||||
const loginButton = createElement({
|
||||
tag: 'button',
|
||||
id: 'btnLogin',
|
||||
text: 'Log In',
|
||||
});
|
||||
|
||||
const api = loadApi([emailInput, passwordInput, loginButton]);
|
||||
|
||||
assert.equal(api.findEmailInput(), emailInput);
|
||||
assert.equal(api.findPasswordInput(), passwordInput);
|
||||
assert.equal(api.findPasswordLoginButton(), loginButton);
|
||||
assert.equal(api.getPayPalLoginPhase(emailInput, passwordInput), 'login_combined');
|
||||
});
|
||||
Reference in New Issue
Block a user