Chromeの拡張機能を作る方法
簡単にChromeの拡張機能を作る方法が紹介されていて真似してみたら、本当に簡単にできたのでメモしておきます。
元の記事は超簡単にChromeの拡張機能を作ってみる【誰でもできるよ】 #JavaScript - Qiitaです。ありがとうございました。
作りたい拡張機能
DとVを押すと、現在開いているページのタイトルとURLを取得し、「<a href=url>タイトル</a>」という文字列をコピーして、クリップボードに入れます。
フォルダ
どこでもいいので適当なフォルダを作ります。名前も適当でいいです。
manifest.json
次の通り書いてmanifest.jsonとしてフォルダに保存します。
{
"manifest_version": 3,
"name": "リンク生成",
"version": "1.0.0",
"description": "現在のページのタイトルとURLを取得しリンクを作成。",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
"manifest_version": 3,
"name": "リンク生成",
"version": "1.0.0",
"description": "現在のページのタイトルとURLを取得しリンクを作成。",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
]
}
content.js
次の通り書いてcontent.jsとしてフォルダに保存します。
document.addEventListener('keydown', function (event) {
keysPressed[event.key] = true;
if (keysPressed['d'] && keysPressed['v']) {
copyTitleAndURL();
}
});
document.addEventListener('keyup', function (event) {
delete keysPressed[event.key];
});
let keysPressed = {};
function copyTitleAndURL() {
const url = window.location.href;
const title = document.title;
let htmlLink = `<a href="${url}">${title}</a>`;
navigator.clipboard.writeText(htmlLink);
}
keysPressed[event.key] = true;
if (keysPressed['d'] && keysPressed['v']) {
copyTitleAndURL();
}
});
document.addEventListener('keyup', function (event) {
delete keysPressed[event.key];
});
let keysPressed = {};
function copyTitleAndURL() {
const url = window.location.href;
const title = document.title;
let htmlLink = `<a href="${url}">${title}</a>`;
navigator.clipboard.writeText(htmlLink);
}
Chromeに反映する方法
Chromeの右上の三点アイコンをクリックし、拡張機能‐拡張機能を管理を選択します。
拡張機能が開くのでここに先程のフォルダをドラッグアンドドロップします。
これで使えるようになります。
ファイルを書き換えた場合は更新アイコンをクリックすると反映します。
今回のようにページから情報を取得する拡張機能の場合はページの更新も必要です。
[ 2024年3月31日 | カテゴリー: デジタル | タグ: Chrome , 拡張機能 ]
« アレサ・フランクリンの凄さを知る方法 | 「夫婦同姓が続くと「全員が佐藤さん」」は本当か？ »
コメントを残す