0

これが単純すぎるように聞こえる場合は、ご容赦ください。

ユーザーがページ内のオブジェクトを右クリックすると、コンテキスト メニューが表示され、クリックされた div-class + の ID を取得するオプションが表示される chrome 拡張機能を作成しています。

私はこれに数日間取り組んでおり、コンテキストメニューに追加のボタンを追加することができました. これらのボタンのいずれかがクリックされると、ページのソースがログに記録されます。それを行うのに時間がかからなかったかもしれませんが、JavaScriptで書くのは初めてで、途中で行き詰まりました。

とにかく、ページの html コード全体は必要ありませんが、クリックされた div クラスが必要です。グーグルで調べたところ、これを行う最善の方法は、純粋なjavascriptの代わりにjqueryの「html」関数を使用することであることがわかりました。問題は、それが私にはうまくいかないことです。

これが私のコードです：

BackgroundPage (ここではすべて正常に動作しているようです)

    function genericOnClick(tab) 
    {
        console.log(tab.pageUrl);

        chrome.tabs.getSelected(null, function(tab) 
        {
            chrome.tabs.sendMessage(tab.id, {action: "getSource"}, function(source) {
            console.log(source);
            });
        });

    }


    // Create a parent item and two children.
    var parent1 = chrome.contextMenus.create({"title": "Rank Trigger", "contexts":["all"]});

    var child1 = chrome.contextMenus.create
    (

    {"title": "Rank 1", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);
var child2 = chrome.contextMenus.create
(
    {"title": "Rank 2", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);
var child3 = chrome.contextMenus.create
(
    {"title": "Rank 3", "contexts":["all"], "parentId": parent1, "onclick": genericOnClick}
);

ContentPage: (ここで問題)

chrome.extension.onMessage.addListener(function(request, sender, callback) 
{
    if (request.action == "getSource")
    {
     // callback(document.documentElement.outerHTML); //here i can get the page's whole source, I only want the clicked div class
     callback($('div class).html(); <--- something wrong here
    }

  });

マニフェスト ファイル:

{
  "name": "x",
  "description": "x",
  "version": "0.1",
  "permissions": ["contextMenus", "tabs"],
  "content_scripts": 
  [
    {
      "matches": ["http://*/*","https://*/*"],
      "js": ["jquery.js", "content.js"],
      "run_at": "document_end"
    }
  ],
  "background": 
  {
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

何か案は？繰り返しになりますが、私の質問は単純に思えますが、これらすべてを独学で学んでおり、何らかの理由で Web プログラミングはアプリケーション プログラミングよりも少し難しいと感じています。

どうもありがとう。

編集: 明確にするために、私が欲しい html ソースはこれです: <div class="story reviewed-product-story" data-story-id="488481648"....</div>. この div クラスが必要なので、解析して data-story-id を取得できます。最初に div クラスを取得せずに ID を取得する方法がある場合は、それも機能します (そして、おそらく望ましいこともあります)。

編集: Adeneo のおかげで、ページのソースの最初の div クラスの ID を取得できるようになりましたが、クリックされたものは取得できません。私が持っていたものの一歩前進しましたが、正確には必要なものではありませんでした。$('.story').data('story-id') を使用する前に、クリックされた div のソースを取得する必要があるかもしれません。助言がありますか？

4

1 に答える 1

1

私はそれが本来あるべきだと推測しています：

chrome.extension.onMessage.addListener(function(request, sender, callback) {
    console.log('message listener');
    if (request.action == "getSource") {
        callback( $('.story').data('story-id') );
    }
});
于 2013-02-15T16:08:32.040 に答える