brookhong / Surfingkeys

Map your keys for web surfing, expand your browser with javascript and keyboard.
https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc
MIT License
5.31k stars 478 forks source link

有办法自定义 Omnibar Handler 吗? #937

Closed mwxxhdb closed 1 year ago

mwxxhdb commented 5 years ago

Error details

SurfingKeys: 0.9.43

Browser: Chrome 71.0.3578.98 (Official Build) (64-bit) Ubuntu 18.04

Context

mapkey('os', '#8测试 Omnibar', function () {
    Omnibar.listWords(['a', 'b', 'c']);
});

这段代码报错: Omnibar is not defined

希望能支持添加 Omnibar Handler 以及添加 Command 和屏蔽默认 Command

如果支持自定义 Omnibar Handler 比较麻烦,也可以做以下几个改进: 1. addSearchAliasX 的 callback_to_parse_suggestion 方法中,如果返回的记录中同时有 html 和 url,定位到某个选项后回车,能够跳转到 url 属性定义的地址。(目前 html 和 url 是互斥的,有 html 就无法回车打开 url,只能打开搜索地址加关键词的 Url,没有办法跳转到 suggestion 的 URL)【应用场景: 搜索豆瓣图书或豆瓣电影时,实现展示图片和名称等信息,需要用 html 属性,同时希望有选中的提示项能跳转到对应的 url】

  1. 希望增加一个 Autocomplete Handler 当 Omnibar 有输入时,调用自定义的 suggestion_callback 方法 callback 方法组装返回类似 SearchEngine 的记录 [{html: '', url: ''}] 【应用场景: 一些有固定规则的网址,例如 JIRA 的 Story 和 Bug 页面地址, 都是项目编号+数字格式。例如 http://jira.site.com/browse/PRO-1521, 和 http://jira.site.com/browse/BUG-2532,如果能在 Omnibar 里输入 1521 能自动提示出 PRO-1521 和 BUG-1521 会方便很多】
mwxxhdb commented 5 years ago
function parseDoubanSearchResult(response) {
    let res = [];
    if (response && response.text) {
        let list = JSON.parse(response.text);
        for (let i in list) {
            let img = list[i].pic || list[i].img;
            let year = list[i].year;
            let subtitle = list[i].author_name || list[i].sub_title;
            res.push({
                html: `<li>
                            <div style="float: left">
                                <img src="${img}" width="50" />
                            </div>
                            <div style="float: left; margin-left: 10px; padding-top: 3px;">
                                <div style="font-size: 16px; color: #1a2a3a;">${list[i].title}</div>
                                <div style="font-size: 12px; color: #3a4a5a; margin-top: 3px;">${subtitle}</div>
                            </div>
                            <div style="float: left; margin-left: 10px; padding-top: 10px; font-size: 12px; color: #3a4a5a;">${year}</div>
                       </li>`,
                props: {
                    url: list[i].url
                }
            });
        }
    }
    return res;
}

addSearchAliasX('d', '豆瓣电影', 'https://movie.douban.com/subject_search?search_text=', 's', 'https://movie.douban.com/j/subject_suggest?q=', function (response) {
    return parseDoubanSearchResult(response);
});
mapkey('od', '#8打开豆瓣电影搜索栏', function () {
    Front.openOmnibar({type: "SearchEngine", extra: "d"});
});
addSearchAliasX('s', '豆瓣图书', 'https://book.douban.com/subject_search?search_text=', 's', 'https://book.douban.com/j/subject_suggest?q=', function (response) {
    return parseDoubanSearchResult(response);
});
mapkey('os', '#8打开豆瓣图书搜索栏', function () {
    Front.openOmnibar({type: "SearchEngine", extra: "s"});
});

找到了同时自定义 html 并且有 url 的使用方式