使用webviewer核心插件进行侧边栏搜索

经验分享
1

大概逻辑
①获取选中内容，调用核心插件webviewer在右侧搜索内容（可调整占据的比例）。
②当没有选中内容时，弹出窗口进行接收内容。

推荐使用quickadd，放在捕获还是宏中都可以，而且这代码除了弹窗外使用的都是官方api，所以可以任意支持js的插件中使用，依然可以执行侧栏搜索只不过失去了弹窗功能。

复制代码并粘贴到Capture format 
```js quickadd
// 获取选中内容
let searchQuery = app.workspace.activeEditor.editor.getSelection();

// 空值处理
if (!searchQuery) {
    try {
        searchQuery = await this.quickAddApi.inputPrompt(
            "🔍 未选中内容，请输入搜索关键词",
            "在此输入搜索内容...",
            ""
        );
    } catch (error) {
        return null;
    }

    // 二次确认用户输入有效性
    if (!searchQuery?.trim()) {
        return null;
    }
}

// 创建安全的URL参数
const encodedQuery = encodeURIComponent(searchQuery);
const bingSearchURL = `https://cn.bing.com/search?form=obsidian&q=${encodedQuery}`;

try {
    // 在右侧面板创建WebViewer视图
    const webViewLeaf = app.workspace.getLeaf('split', 'vertical');
    await webViewLeaf.setViewState({
        type: "webviewer",
        state: { 
            url: bingSearchURL,
            navigation: true,
            force: true
        }
    });
    
    // 调整面板比例并聚焦
    const setPanel = percent => {
        let right = document.querySelector('.workspace-split.mod-vertical.mod-root').lastElementChild;
        right.previousSibling.style.flexGrow = percent;
        right.style.flexGrow = 100 - percent;
    };
    
    setTimeout(() => {
        setPanel(60); // 主编辑区占60%，右侧WebViewer占40%，可以自行修改
        app.commands.executeCommandById('editor:focus-right');
    }, 50);
    
} catch (error) {
    console.error("WebViewer打开失败:", error);
}
```
1 个赞
2

下面是一个通用形式，直接让deepseek帮我写了一个输入框，这样就不依赖quickadd就可以出现输入框了

展开 
// 获取选中内容
let searchQuery = app.workspace.activeEditor.editor.getSelection();

// 空值处理
if (!searchQuery) {
    // 创建通用输入弹窗
    const inputDialog = Object.assign(document.createElement("div"), {
        style: `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background: var(--background-primary);
            border: 1px solid var(--background-modifier-border);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: 10000;
            min-width: 300px;
        `
    });

    // 创建输入框和按钮容器
    const inputField = document.createElement("input");
    inputField.style.cssText = `
        width: 100%;
        margin-bottom: 12px;
        padding: 8px;
        background: var(--background-primary);
        border: 1px solid var(--background-modifier-border);
        color: var(--text-normal);
    `;
    inputField.placeholder = "在此输入搜索内容...";

    const buttonContainer = document.createElement("div");
    buttonContainer.style.cssText = `
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    `;

    // 创建按钮
    const confirmBtn = document.createElement("button");
    confirmBtn.textContent = "搜索";
    confirmBtn.style.cssText = `
        padding: 6px 12px;
        background: var(--interactive-accent);
        color: white;
        border: none;
        border-radius: 4px;
    `;

    const cancelBtn = document.createElement("button");
    cancelBtn.textContent = "取消";
    cancelBtn.style.cssText = `
        padding: 6px 12px;
        background: var(--background-secondary);
        color: var(--text-normal);
        border: 1px solid var(--background-modifier-border);
        border-radius: 4px;
    `;

    // 构建弹窗结构
    buttonContainer.appendChild(cancelBtn);
    buttonContainer.appendChild(confirmBtn);
    inputDialog.appendChild(inputField);
    inputDialog.appendChild(buttonContainer);
    document.body.appendChild(inputDialog);
    inputField.focus();

    // 使用Promise处理用户输入
    searchQuery = await new Promise((resolve) => {
        let isResolved = false;
        
        const cleanUp = () => {
            document.body.removeChild(inputDialog);
            inputField.removeEventListener('keydown', handleKeyDown);
        };

        const handleKeyDown = (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                confirmHandler();
            } else if (e.key === 'Escape') {
                e.preventDefault();
                cancelHandler();
            }
        };

        const confirmHandler = () => {
            if (isResolved) return;
            isResolved = true;
            cleanUp();
            resolve(inputField.value);
        };

        const cancelHandler = () => {
            if (isResolved) return;
            isResolved = true;
            cleanUp();
            resolve(null);
        };

        confirmBtn.onclick = confirmHandler;
        cancelBtn.onclick = cancelHandler;
        inputField.addEventListener('keydown', handleKeyDown);
    });

    // 输入有效性检查
    if (!searchQuery?.trim()) return null;
}

// 创建安全的URL参数
const encodedQuery = encodeURIComponent(searchQuery);
const bingSearchURL = `https://cn.bing.com/search?form=obsidian&q=${encodedQuery}`;

try {
    // 在右侧面板创建WebViewer视图
    const webViewLeaf = app.workspace.getLeaf('split', 'vertical');
    await webViewLeaf.setViewState({
        type: "webviewer",
        state: { 
            url: bingSearchURL,
            navigation: true,
            force: true
        }
    });
    
    // 调整面板比例并聚焦
    const setPanel = percent => {
        let right = document.querySelector('.workspace-split.mod-vertical.mod-root').lastElementChild;
        right.previousSibling.style.flexGrow = percent;
        right.style.flexGrow = 100 - percent;
    };
    
    setTimeout(() => {
        setPanel(60); // 主编辑区占60%，右侧WebViewer占40%，可以自行修改
        app.commands.executeCommandById('editor:focus-right');
    }, 50);
    
} catch (error) {
    console.error("WebViewer打开失败:", error);
}