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

f:id:elve:20220110070832p:plain

追記

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

ぎ、ぎふはぶにアップしてみました。コレでいいのかわからん(；´Д｀)
https://github.com/elve-hatena/hatena-extensions.git
publicにするの優良なのかな？(^_^;)　ﾜｶﾝﾈ

前置き

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

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

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

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

追記
前置き
チュートリアル
仕様を考える
ソース
課題
参考

チュートリアル

いやはや、拙者の苦手なJavaScriptですなぁ～。

Chrome 拡張機能のマニフェストファイルの書き方 – Qiita
1. 前提知識編 – Chrome 拡張機能を作ろう
 3. 機能追加編 – Chrome 拡張機能を作ろう
 Extensions – Chrome Developers
Getting started – Chrome Developers
この辺流し読みしてＧｏです～（go言語はよく知らない子）ｗ

仕様を考える

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

>URL:title>
選択文字列（改行含む）
<<

選択してなかったら

[URL:title]

がクリップボードに入ればＯＫかなー。せっかく作るので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の設定画面で設定すればいいのかな？
ぐぐりんぐの日々は続く