最新の情報は以下のリンク先です マウスカーソル下の画像表示用 HTML コードをクリップボードにコピーする Google Chrome 拡張 ▼ 以下はバージョンアップ(仕様変更)の為、動作しません --------------------------------------------------------- 以下のコードは最も簡単でかつ利用価値の高いものです。必要なファイルは、拡張アプリケーションの基本定義である『background.html』と、全体の仕様を定義する『manifest.json』と、アイコンファイルが3つです( アイコンは必ずしも必要ではありません ) 以上の5つファイルを任意のディレクトリ内に配置して、Google Chrome から読み込むだけで、拡張機能として実装されて、デバッグも可能になります。もし、世の中に配布したいのであれば、そこからパッケージを作成する事も可能ですbackground.html(UTF-8N)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// *************************************************
// クリップボードへコピー
// *************************************************
function clip_Copy(str) {
document.getElementById('text').value = str;
document.getElementById('text').select();
document.getElementById('text').focus();
document.execCommand("Copy");
}
// *********************************************************
// 右クリックメニューの処理
// *********************************************************
function active_Action(info, tab) {
var str = "";
if ( info.mediaType == 'image' && typeof( info.srcUrl ) !== 'undefined' ) {
str = '<img src="' + info.srcUrl + '"';
str += ' style="border: solid 0px #000000" />';
clip_Copy( str );
chrome.tabs.executeScript(
null,
{ code: "alert('"+str+"');" },
function() {
}
);
}
}
// *********************************************************
// 初期処理
// *********************************************************
try {
chrome.contextMenus.removeAll();
}catch(e) {}
// 右クリックメニューを作成
chrome.contextMenus.create(
{
"title": "画像HTML取得",
"contexts":["image"],
"onclick": active_Action
}
);
</script>
</head>
<body>
<textarea name="text" id="text"></textarea>
</body>
</html>
{
"background_page": "background.html",
"description": "\u53F3\u30AF\u30EA\u30C3\u30AF\u3088\u308A\u6A19\u6E96\u7684\u306A \u753B\u50CF\u7528HTML \u3092\u53D6\u5F97\u3057\u307E\u3059",
"icons": {
"128": "icon128.png",
"16": "icon16.png",
"48": "icon48.png"
},
"name": "\u753B\u50CFHTML\u53D6\u5F97",
"permissions": [ "contextMenus", "tabs", "http://*/*", "https://*/*" ],
"version": "1.0"
}
まず最初にデベロッパーモードのチェックボックスをオンにします。そうすると、読み込み用のボタンが現れるので5つのファイルを配置したフォルダを選択します
ファイルを読み込んだ状態
詳細を表示した状態
background.html のリンクをクリックすると、非表示である background.html 用のデベロッパーツールが開きます( 通常は F12 でひらくもの ) id は、仮の id で、正式に登録されるとGoogle Chrome の環境フォルダ でダウンロードしたスクリプトを実行して、さらに extentions フォルダに入るとその中にあるはずです。 この拡張機能の要点 画像を右クリックすると、コンテキストメニューに登録した機能が表示されて、選択するとその画像を使用した HTML 記述がクリップボードにコピーされます。
クリップボードへのコピー background.html はもともと非表示なので、コピーするために必要な入力エリアを作成しておいて、データをセットして選択して document.execCommand("Copy"); でコピーします コンテキストメニューの追加 これは、API の処理なので、まず manifest.json で利用する API を宣言する必要があります。その上で、chrome.contextMenus.removeAll(); で既存のメニューを削除しておいて、chrome.contextMenus.create で作成します。 "contexts":["image"] の記述が、対象が画像のみであることを示しています。他には、 "page", "frame", "selection", "link", "editable", "video", "audio" というようなコンテンツを複数配列で指定する仕様になっています。 実際の処理 クリックすると、定義した function が呼び出されますが、その際に API から引数が渡されて、ある程度の情報をその場で利用する事ができます。この場合は、画像の URL を使って、IMG 要素を完成させています。 1) OnClickData 2) Tab 表示されているページへの通信 セキュリティ上の理由だと思われますが、直接表示しているページへのアクセスは禁じられており、メッセージを送る事によって互いに通信するような仕様になっているようです。 その中で簡単に background から呼び出せる方法がこの、chrome.tabs.executeScript を使った実行です。 この処理はメニューとは別の API 分類になるので、manifest.json で宣言しておく必要があります。 関連する記事 Twitter用埋め込みコードを取得する Google Chrome 拡張
|
|
【ツールの最新記事】
- 既存の Google Chrome 拡張のカスタマイズ( ブラウザのクイックリンク )
- 『Yahoo!24H番組』ボタン(2) / コンボボックス & localStorage 版
- 『Yahoo!大阪24H番組』ボタン
- Twitter用埋め込みコードを取得する Google Chrome 拡張
- Twitter用埋め込みコードを取得する Firefox アドオン
- Firecookie の改造 : Escape Codec Library: ecl.js を使って日本語表示を正しくするように変更
- レンタルサーバー用 MySQL 汎用メンテナンス
- VBScript : TCPDF 用埋め込みフォント作成スクリプト
- VBScript : TCPDFで ＭＳ ゴシック、ＭＳ Pゴシック、ＭＳ UIゴシック、ＭＳ 明朝、ＭＳ P明朝を非埋め込み型で利用できるように全てを自動化したスクリプトを作成時に気が付いたTCPD..
