User Script: search vocab on bunpro

Bunpro
#1

One of the things that annoys me the most when doing reviews is that I can not search for words I don’t know / want to add. So I made myself a user-script for this.

If you mark some text it will show a little “search on bunpro” button which then will open search for the word in a new tab.

Only tested on Firefox with Greasemonkey.

Just in case this is helpful to anyone

image
image1144×228 30.8 KB

image
image831×515 33.6 KB

Version that only works on Bunpro Reviews:


// ==UserScript==
// @name         Bunpro Search on Text Select
// @namespace    https://bunpro.jp/
// @version      1.0
// @description  Show a quick search link when selecting text on Bunpro reviews
// @match        https://bunpro.jp/reviews*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let popup = document.createElement('div');
    popup.style.position = 'absolute';
    popup.style.padding = '4px 8px';
    popup.style.background = '#2c3e50';
    popup.style.color = '#fff';
    popup.style.borderRadius = '6px';
    popup.style.fontSize = '13px';
    popup.style.cursor = 'pointer';
    popup.style.zIndex = '9999';
    popup.style.display = 'none';
    popup.textContent = 'Search on Bunpro';
    document.body.appendChild(popup);

    document.addEventListener('mouseup', function(e) {
        const selection = window.getSelection().toString().trim();
        if (selection.length > 0) {
            const range = window.getSelection().getRangeAt(0);
            const rect = range.getBoundingClientRect();
            popup.style.top = (window.scrollY + rect.top - 30) + 'px';
            popup.style.left = (window.scrollX + rect.left) + 'px';
            popup.style.display = 'block';
            popup.onclick = () => {
                const url = 'https://bunpro.jp/search?query=' + encodeURIComponent(selection);
                window.open(url, '_blank');
                popup.style.display = 'none';
            };
        } else {
            popup.style.display = 'none';
        }
    });

    document.addEventListener('scroll', () => popup.style.display = 'none');
})();

So then I thought why stop here?
I often see words on X or other immersion sources and want to add them to Bunpro…
Therefore:
Version that works everywhere if you mark Japanese text (might break on a lot of websites):

image

// ==UserScript==
// @name         Bunpro Search on Text Select
// @namespace    https://bunpro.jp/
// @version      1.0
// @description  Show a quick search link when selecting text on Bunpro reviews
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const jpRegex = /[\u3040-\u30FF\u4E00-\u9FFF]/;
    const popup = document.createElement('div');
    popup.style.position = 'absolute';
    popup.style.padding = '4px 8px';
    popup.style.background = '#2c3e50';
    popup.style.color = '#fff';
    popup.style.borderRadius = '6px';
    popup.style.fontSize = '13px';
    popup.style.cursor = 'pointer';
    popup.style.zIndex = '9999';
    popup.style.display = 'none';
    popup.textContent = 'Search on Bunpro';
    document.body.appendChild(popup);

    document.addEventListener('mouseup', function() {
        const selection = window.getSelection().toString().trim();
        if (selection.length > 0 && jpRegex.test(selection)) {
            const range = window.getSelection().getRangeAt(0);
            const rect = range.getBoundingClientRect();
            popup.style.top = (window.scrollY + rect.top - 30) + 'px';
            popup.style.left = (window.scrollX + rect.left) + 'px';
            popup.style.display = 'block';

            popup.onclick = () => {
                const url = 'https://bunpro.jp/search?query=' + encodeURIComponent(selection);
                window.open(url, '_blank');
                popup.style.display = 'none';
            };
        } else {
            popup.style.display = 'none';
        }
    });

    document.addEventListener('scroll', () => popup.style.display = 'none');
})();

!!
you can only install one of the scripts, not both. If you install both, it might not work. Script 2 does everything that Script 1 does, too.
!!

9 Likes
#2

This cuts down on lots of ‘cmd-c/cmd-v’-ing for me, thank you so much!

Weirdly, I can’t get the second script to work, but possibly it’s an inept user (me) error/iOS safari thing. The first script works great though.

1 Like
#3

sadly I don’t have a Mac to test on and safari doesn’t seem to exist for Linux. If you can show me the error/output of the developer console when you mark text or something, I will try to fix it based on that.

E: You can only install one of the scripts, not both, maybe this is the issue? Script 2 does everything script 1 does, anyway

#4

I would love this to be a native feature - probably my number 1 wish is to be able to look up a word and add it to a deck just by tapping on it. Being able to learn by expanding from words you’ve seen in sentences would be very organic.

2 Likes
#5

I agree, especially since there’s a big limitation that I don’t know how to work around without access to a vocabulary database (such as Bunpro would have), and that’s properly searching when something in conjugated.

I’m currently looking into possibilities on how to integrate this with yomitan instead, since Yomitan does this. It would probably be neat to have the “search on bunpro button” inside the yomitan window instead and search for the base-form. But I don’t know if it’s technically possible. I don’t have a whole lot of time until Friday, it’ll probably be something I’ll look into this weekend.

This was just a quick & dirty solution yesterday because my patience ended after the third copy-paste. If anyone has an idea on how to solve this better, I’m all ears.

1 Like