2

Chrome拡張機能を作成するのは初めてで、簡単なチュートリアルを実行しましたが、必要なものを見つけるのに苦労しています。ユーザーがウェブページ上の画像を選択し、その画像のURLを拡張機能にコピーできるようにする拡張機能が必要です。誰かが私を助けることができますか？例を見れば、拡張機能がページとどのように相互作用するかをよりよく理解できると確信しています。

4

2 に答える 2

6

あなたの質問について私が理解していることから、画像を右クリックすると表示されるコンテキストメニュー項目を作成したいと思います。たとえば、バックグラウンドスクリプトでは、次を使用します。

chrome.contextMenus.create({
    title: "Use URL of image somehow",
    contexts:["image"],
    onclick: function(info) {
        handleImageURL(info.srcUrl);
    }
});

function handleImageURL(url) {
    // now do something with the URL string in the background page
}

これにより、画像を右クリックした場合にのみ、すべてのページに表示されるコンテキストメニュー項目が追加されます。ユーザーがそれを選択するとonclick、メニュー項目のハンドラーがhandleImageURL引数として画像のURLを使用して起動します。URLは、localStorageリストに保存したり、Ajaxを介してサーバーに送信したり、現在のタブのリスニングコンテンツスクリプトにメッセージを渡したりするなど、任意の方法で処理できます。

別の方法で編集：

すべてのページに挿入されるコンテンツスクリプトが必要になる場合があります。スクリプトは、ロード時にイベントリスナーをすべての画像要素にバインドできます。

// in my_content_script.js...
var imgs = document.getElementsByTagName("img");
for(var i = 0, i < imgs.length; ++i) {
    imgs[i].addEventListener("click", function() {
        alert(this.src);
        // do things with the image URL, this.src
    });
}

のすべてのサブドメインに挿入するにはexample.com、マニフェストに次のものが含まれます。

...
"content_scripts": {
    "matches":["*://*.example.com/*"],
    "scripts":["my_content_script.js"]
},
...

このpure-JSソリューションは、ロード時に動的に追加されたイメージにリスナーをアタッチしないことに注意してください。jQueryを使用してコンテンツスクリプトでこれを行うには、次を使用します。

$(document).on("click", " img", function() {
    alert(this.src);
});

そして、jQueryファイル名をscriptsマニフェストの配列の横に追加しますmy_content_script.js。

于 2012-05-03T04:50:57.940 に答える
0

このGoogleChrome拡張機能のサンプルに基づく：

var images = [].slice.apply(document.getElementsByTagName('img'));
var imageURLs = images.map(function(image) {
  return image.src;
});
chrome.extension.sendRequest(images);

より詳細な例（リクエストの処理方法など）については、私が作成したImageDownloaderという拡張機能を確認してください。

于 2012-07-13T17:15:12.433 に答える