私がズボラ病になってしまった件

·(編集済み)··

閲覧

この記事はに最終更新されました。一部の内容が古くなっている可能性があります。ご質問があれば著者にお問い合わせください。

AI翻訳中文日本語

要約：

この記事では、ブラウザで選択した文字を直接WeChatに送信できるプラグインを紹介している。作者は自分で建てたViking醤を使って機能を実現した。また、WebページのQRコードをURLに抽出してWeChatに転送する機能にも挑戦したが、CORS問題で成功しなかった。

近来ズボラ病がやや重症で、ネットサーフィン中に面白いものを見つけてスマホに送りたくなることもあるけど、毎回WeChatなどにログインするのが面倒で、WeChatを開いてスマホを持ち上げてQRコードを読み取るのがだるい。

そこで以前サーバーにServer醤のWecom醤を使ってVinking醤を建てていたのを思い出した。普段はブログのコメント通知を受け取るくらいだけど、ブラウザ側から直接Viking醤を使ってWeChatに送れば便利かもしれない。ちょっとした時間で簡単なスクリプトを作って、Tampermonkeyに入れて動かしてみた。

プラグインの基本原理は、まずwindow.getSelection().toString()でマウスで選択した文字を取得し、ctrl、alt、Pキーを監視する。選択範囲が空でなければctrl +alt +Pを押すと、選択した文字をWeChatに送信できる。ただしテスト中はWeChat側に長文の一部しか届かず、& 以降が届かないことが多かった。調べてみると& の処理を忘れていて、& 以降の文字列がURLパラメータ扱いになっていた。特定文字の処理を補完して、自分のニーズに合うようにした。

const REPLACEMENT_TEXT = '{and}';

function setupEventHandlers() {
    document.body.onmouseup = function() {
        let selectText = window.getSelection().toString().trim();
        if (selectText.includes("&")) {
            selectText = selectText.replace(/&/g, REPLACEMENT_TEXT);
        }
        if (selectText) {
            document.body.onkeydown = function(event) {
                if (event.ctrlKey && event.altKey && event.keyCode === 80) {
                    var Tip = confirm("已经获取选中文字:\n" + selectText + "\n需要转发到 Vinking酱 吗?");
                    if (Tip) {
                        /*处理转发*/
                    }
                }
            };
        }
    };
}

setupEventHandlers();

ついでにWebページのQRコードをURLに抽出してWeChatに転送するプラグインも書いた。jsQR.js、html2canvas.min.js、jQueryを使った。でもCORS問題に阻まれて、長時間格闘した末にズボラ病が発動して諦めた。

const BUTTON_STYLE = {
    position: 'fixed',
    bottom: '50px',
    right: '20px'
};

const createButton = document.createElement("button");
createButton.id = "getURL";
Object.assign(createButton.style, BUTTON_STYLE);
createButton.innerHTML = "截取二维码";
document.body.appendChild(createButton);

const createImage = document.createElement("canvas");
createImage.id = "qrcanvas";
createImage.style.display = 'none';
document.body.appendChild(createImage);

const c = document.getElementById("qrcanvas");
const ctx = c.getContext("2d");

createButton.onclick = async function() {
    try {
        const canvas = await html2canvas(document.body);
        const oImg = new Image();
        oImg.src = canvas.toDataURL();
        await new Promise(resolve => oImg.onload = resolve);
        c.setAttribute("width", oImg.width);
        c.setAttribute("height", oImg.height);
        ctx.drawImage(oImg, 0, 0, oImg.width, oImg.height);
        const imageData = ctx.getImageData(0, 0, oImg.width, oImg.height);
        const code = jsQR(imageData.data, imageData.width, imageData.height, { inversionAttempts: "dontInvert" });
        if (code) {
            const Tip = confirm("二维码获取成功，需要转发到 Vinking酱 吗?");
            if (Tip) {
                // 处理转发
            }
        } else {
            alert("没有找到二维码");
        }
    } catch (error) {
        console.error("Error capturing canvas:", error);
    }
}