スナックelve 本店

バツイチ派遣40代女性の日記です

はてなブログで引用するのにちょっと便利な機能拡張を作った・・・(完成)

f:id:elve:20220110070832p:plain

追記

連続利用ができないの、変数が生き続けてるんだよねぇと思って関数化したらうまくいきました。
ソース変更済みです。

ぎ、ぎふはぶにアップしてみました。コレでいいのかわからん(;´Д`)
https://github.com/elve-hatena/hatena-extensions.git

前置き

はてな(記法)を愛する皆さんこんにちは。エルベです。

はてな記法、便利ですよね。
引用を割とする方なので Copy URL+という拡張機能を使っていました。
chrome.google.com

f:id:elve:20220110062137p:plain
こんな感じで使っていたのですが、選択部分の文章の改行が無視されてしまう・・・。
・・・って今アップデートしたら改行生きてるんで解決してしまったんだが、まぁまぁ・・・(;´Д`)

この際だからブログ用の機能拡張を勉強がてらに作ろう、と、こう思ったわけでありまする~。

仕様を考える

ホントはアイコンなんかもいらんし、ショートカットでコピーできりゃそれでいいと思ったけどそうはいかんざき(古)なようです。見えないマルウェア的なの走ってても怖いもんねw
やりたいのは~
現在のURL取得
文字選択してたら

>URL:title>
選択文字列(改行含む)
<<

選択してなかったら

[URL:title]

クリップボードに入ればOKかなー。せっかく作るのでgoogle、ウィキペデイア、音声(mp3)、動画(mp4)にもそれぞれのコード入れますか~。

google

[google:URL]

ウィキペデイア

[wikipedia:URL]

音声(mp3)

<audio src="URL" controls></audio>

動画(mp4)

<video src="URL" controls></video>

コレでOK。
どっかにフォルダ作ってImageフォルダはhttps://storage.googleapis.com/web-dev-uploads/file/WlD8wC6g8khYWPJUsQceQkhXSlv1/wy3lvPQdeJn4iqHmI0Rp.zipを解凍して突っ込もうね。いっくよー

ソース

manifest.json

{
    "name": "copyHatena",
    "description": "copyHatena",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["storage", "activeTab", "scripting"],
    "icons": {
        "16": "/images/get_started16.png",
        "32": "/images/get_started32.png",
        "48": "/images/get_started48.png",
        "128": "/images/get_started128.png"
    },

    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_title": "copyHatena"
    },
    "commands": {
        "copyHatena": {
            "suggested_key": {
                "default": "Ctrl+Shift+1",
                "mac": "MacCtrl+Shift+1"
            },
            "description": "copy for hatena"
        }
    }
}

background.js

chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['content.js']
    });
});

content.js

function main() {
    allurl = location.href;
    prtcl = location.protocol;
    hst = location.host;
    localpath = location.pathname;
    localpara = location.search;

    const selectedText = window.getSelection().toString();
    //テキストを選択していたら引用記法
    //google
    //[google:検索ワード]
    if (hst.match(/.*google.com.*/g)) {
        result = localpara.replace(/.*q=([^&]*)&.*/g, '$1');
        result = decodeURI(result)
        if (result == null) {
            result = "NULL";
        }
        copyToClipboard("[google:" + result + "]");
        //wikipedia
        //[wikipedia:項目目]
    } else if (hst.match(/.*wikipedia.org.*/g)) {
        result = localpath.replace(/\/wiki\/(.*)/g, '$1');
        result = decodeURI(result)
        if (result == null) {
            result = "NULL";
        }
        copyToClipboard("[wikipedia:" + result + "]");
    } else if (localpath.match(/\.mp3/g)) {
        //mp3
        str = '<audio src="' + prtcl + '\/\/' + hst + localpath + '" controls></audio>';
        copyToClipboard(str);
    } else if (localpath.match(/\.mp4/g)) {
        //mp4
        str = '<video src="' + prtcl + '\/\/' + hst + localpath + '" controls></video>';
        copyToClipboard(str);
    } else if (selectedText) {
        //>ページのURL:titel>
        //選択文章(改行コード含む)
        //<<
        str = ">" + allurl + ":title>\n" + selectedText + "\n<<\n";
        copyToClipboard(str);
    } else {
        //[URL:title]
        copyToClipboard("[" + allurl + ":title]");
    }

}
//https://mseeeen.msen.jp/copy-text-to-clipboard-with-javascript-in-2021/
async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text)
    } catch (error) {
        alert((error && error.message) || 'コピーに失敗しました')
    }
}
main();

課題

このフォルダを機能拡張のでぺろっぱモード? から読み込んでボタンを固定。
目的のページで押せば動くんだけどさー何でかわからんけど、各タブで1回しか効かないのよね~。
2回目から、どうやって動かせばいいんだろ? なんか開放しないとダメなんだろうけど・・・。

あと、ショートカットキーはマニュフェストに書いても全然ダメだった。Chromeの設定画面で設定すればいいのかな?
ぐぐりんぐの日々は続く

参考

decodeURI() - JavaScript | MDN
if...else - JavaScript | MDN
JavaScript で任意のテキストをクリップボードにコピーする|まくろぐ
JavaScript でクリップボードにテキストをコピーする (2021年版) | MSeeeeN | 大阪発 IT メディア by MSEN
JavaScriptの文字列マッチングまとめ(indexOf, lastIndexOf) - Qiita
[JavaScript]クリップボードを使ったコピーとペースト - Qiita
任意のサイトで任意のJavaScriptを自動実行させるChrome拡張 - Qiita
JavaScriptでクリップボードに文字をコピーする(ブラウザ) - Qiita
【JavaScriptの基本】可読性を上げるためのif文の基本形・省略形の解説 | ワードプレステーマTCD
【JavaScriptの基本】ダイアログボックス「alert, prompt, confirm」の使い方 | ワードプレステーマTCD
Javascriptで選択範囲の文字列・DOMを取得、操作する方法 │ Web備忘録
javascript : ブラウザのコンテキストメニューに追加しますか?
JavaScript | コメントを記述する
JavaScript | 現在のページのURLを取得する(location.href)
【JavaScript入門】文字列の検索まとめ(indexOf/search/match/test) | 侍エンジニアブログ
【JavaScript入門】文字列の分割と切り出し(substr/substring/slice) | 侍エンジニアブログ
【JavaScript入門】returnの使い方と戻り値・falseのまとめ! | 侍エンジニアブログ
javascript — JavaScriptでのワイルドカード文字列比較
Javascript:任意の文字列を含むかどうかの確認方法 | WWWクリエイターズ