バッキーの日々是爆食

アクセスカウンタ

zoom RSS 特定のウェブサイト向けのショートカットキーをサポートする拡張機能を作る方法

<<   作成日時 : 2018/05/18 09:37   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

独自の拡張機能を作ってとあるフォーラムの自分の投稿をショートカットキーを使って簡単に削除できるようにしましたが、いい機会なので特定のウェブサイト向けのショートカットキーをサポートする拡張機能を作る方法をご紹介しておきます。

いまChromeと Firefoxで動く拡張機能は WebExtensions版となりますが、作り方はいたって簡単
  1. ブラウザの Inspectorを使ってそのサイトの内部デザイン、HTML要素の構成、IDやクラス名を調べる
  2. メモ帳で2つのテキストファイルを作る(文字コードは UTF-8にしてください)
  3. ブラウザに読み込ませる
とたったこれだけ。

サイトの内部デザインを調べる必要があるのでここは少し苦労するかもしれませんが、クリックしたい場所とその前後を Inspectorで調べればだいたい判ります。

あとは、下記のようなファイルを2つ用意するだけです。
(インデントが無視されて無残な状態ですが、コピペして整形してください)

manifest.json

{
"manifest_version": 2,
"name": "Shortcut Keys for Delete My Post",
"description": "Additional Shortcut Keys for XXXXXXXXX Forum",
"version": "1.0",
"author": "backy0175",
"content_scripts": [{
"js": [ "script.js" ],
"matches": [
"*://XXXXXXXXX.ZZZZZ.com/forum/*",
"*://YYYYYYYYY.ZZZZZ.com/forum/*"
]
}]
}


name, description, authorは単なる文字情報なので重要ではありませんが、matchesには拡張機能が動作対象とするサイトのURLを記述します。
*はワイルドカード、カンマで区切ることで複数のサイトを指定できます。

script.js

// shortcut key table
var shortcutKey = new Object();
shortcutKey['Delete'] = "D"; // delete my post


// 2017/11/20
// support firefox and chrome
if (!("browser" in window)) {
window.browser = chrome;
}


function removeMyPost() {

var posts = document.querySelectorAll("._username");

for (var i = 0 ; i < posts.length ; i++) {

var text = posts[i].textContent;

if (text.search("自分") >= 0) {

var dropdowns = posts[i].parentNode.parentNode.getElementsByClassName("jfk-button-standard");
if (dropdowns.length > 0) {

// 操作メニューを開く
dropdowns[0].click();

var popups = document.getElementsByClassName("popupContent");
if (popups.length > 0) {
var divs = popups[0].getElementsByTagName("div");

for (var j = 0 ; j < divs.length ; j++) {
var id = divs[j].getAttribute("id");
if (id && id.search("delete_post") >= 0) {

// 削除メニューを実行
divs[j].click();

return true;
}
}

}
}
}
}

//return false;
return true;
}


function keydown(evt) {

// ALTキーと組み合わせたショートカットキーの場合
if (evt.altKey && !evt.ctrlKey && !evt.shiftKey) {

if (evt.keyCode == shortcutKey['Delete'].charCodeAt(0)) {
if (removeMyPost()) {
evt.codeventDefault();
}
}

}

}


document.addEventListener("keydown", keydown, false);



作成した拡張機能を Chromeにインストールするのは次の手順です。
  1. chrome://extensions を開く
  2. 開発者モードを有効にする
  3. LOAD UNPACKED をクリックして上記ファイルが入っているフォルダを指定する

参考:
"Getting Started Tutorial - Google Chrome"
https://developer.chrome.com/extensions/getstarted


あとは、実際にウェブサイトを開いてデバッグするだけです。
画面は狭くなりますが Alt + Ctrl + J で Developer Consoleを開くと Consoleタブでエラーメッセージなどを確認できるようになっています。
もしバグがあれば修正して(もちろん保存して)、拡張機能マネージャの該当拡張機能のところの再読み込みボタンを押し、サイトのページを再読み込みすると修正後の拡張機能が読み込まれるようになっています。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
特定のウェブサイト向けのショートカットキーをサポートする拡張機能を作る方法 バッキーの日々是爆食/BIGLOBEウェブリブログ
文字サイズ:       閉じる