新增脚本注入功能:支持注入远程和本地JavaScript脚本,优化CSS注入逻辑

This commit is contained in:
fofolee 2025-01-23 12:18:46 +08:00
parent 7b346616d1
commit 06bd651c53
2 changed files with 114 additions and 18 deletions

View File

@ -1,4 +1,5 @@
const { executeScript } = require("./browser"); const { executeScript } = require("./browser");
const fs = require("fs");
const clickElement = async (tab, selector) => { const clickElement = async (tab, selector) => {
return await executeScript( return await executeScript(
@ -128,12 +129,54 @@ const injectCSS = async (tab, css) => {
tab, tab,
` `
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = \`${css}\`; style.textContent = css;
document.head.appendChild(style); document.head.appendChild(style);
` `,
{ css }
); );
}; };
const injectRemoteScript = async (tab, url) => {
return await executeScript(
tab,
`
return await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.type = 'text/javascript';
script.onload = () => resolve(true);
script.onerror = () => reject(new Error('Failed to load script: ' + url));
document.head.appendChild(script);
});
`,
{ url }
);
};
const injectLocalScript = async (tab, filePath) => {
try {
if (!fs.existsSync(filePath)) {
throw new Error(`文件不存在: ${filePath}`);
}
const content = fs.readFileSync(filePath, "utf8");
return await executeScript(
tab,
`
const script = document.createElement('script');
script.type = 'text/javascript';
script.textContent = content;
document.head.appendChild(script);
return true;
`,
{ content }
);
} catch (error) {
throw new Error(`注入本地脚本失败: ${error.message}`);
}
};
module.exports = { module.exports = {
clickElement, clickElement,
inputText, inputText,
@ -148,4 +191,6 @@ module.exports = {
getPageSize, getPageSize,
waitForElement, waitForElement,
injectCSS, injectCSS,
injectRemoteScript,
injectLocalScript,
}; };

View File

@ -266,6 +266,73 @@ export const browserCommands = {
}, },
], ],
}, },
{
value: "quickcomposer.browser.injectRemoteScript",
label: "注入脚本/样式",
icon: "style",
isAsync: true,
config: [tabConfig],
subCommands: [
{
label: "注入CDN脚本",
value: "quickcomposer.browser.injectRemoteScript",
icon: "javascript",
config: [
{
component: "VariableInput",
icon: "link",
width: 12,
placeholder: "输入远程脚本URL",
},
],
},
{
label: "注入本地脚本",
icon: "javascript",
value: "quickcomposer.browser.injectLocalScript",
config: [
{
component: "VariableInput",
icon: "folder",
width: 12,
options: {
dialog: {
type: "open",
options: {
title: "选择脚本",
filters: [
{
name: "JavaScript",
extensions: ["js"],
},
{
name: "all",
extensions: ["*"],
},
],
properties: ["openFile"],
},
},
},
placeholder: "输入本地脚本绝对路径",
},
],
},
{
label: "注入CSS",
value: "quickcomposer.browser.injectCSS",
icon: "style",
config: [
{
component: "CodeEditor",
icon: "style",
width: 12,
placeholder: "输入CSS代码",
},
],
},
],
},
{ {
value: "quickcomposer.browser.setCookie", value: "quickcomposer.browser.setCookie",
label: "Cookie操作", label: "Cookie操作",
@ -356,22 +423,6 @@ export const browserCommands = {
}, },
], ],
}, },
{
value: "quickcomposer.browser.injectCSS",
label: "注入CSS",
icon: "style",
isAsync: true,
config: [
tabConfig,
{
label: "CSS内容",
component: "CodeEditor",
icon: "style",
width: 12,
placeholder: "输入CSS代码",
},
],
},
{ {
value: "quickcomposer.browser.clickElement", value: "quickcomposer.browser.clickElement",
label: "元素操作", label: "元素操作",