11

Chrome 拡張機能の構築で遊んでいます。現時点では、コンテキスト メニュー項目をまとめました。コンテキスト メニュー項目をクリックするとitemClicked()、バックグラウンド スクリプトで起動しますcontext_menu.js。

function itemClicked(info, tab) {
     alert("clicked");
}

アラートが発生します。ajaxリクエストを送信するようなこともできますitemClicked()

ただし、ページに要素を追加することはできません (またはあらゆる種類の DOM 操作)。これと同じくらい基本的なものでさえ機能しません:

  var d = document.createElement('div');
  d.setAttribute("css", "width: 100px; height: 100px; background-color: red; position: fixed; top: 70px; left: 30px; z-index: 99999999999;");
  document.body.appendChild(d);

そこで、同じコードをコンテンツ スクリプトに追加しようとしました。

chrome.contextMenus.onClicked.addListener(function(OnClickData info, tabs.Tab tab) {
  //code to append the input here
});

しかし、それでもうまくいきません。私は何を間違っていますか？

クリックした後、コンテキスト メニューでページに何かを追加するにはどうすればよいですか?

本当にありがとう！

編集：これが私のmanifest.jsonです（名前/説明などの無関係なものを削除しました...など）

{


  "permissions": [
    "activeTab",        
    "tabs",
    "cookies",
    "contextMenus"
  ],

  "background": {
    "scripts": ["context_menu.js"]
  },
  "browser_action": {
    "default_icon": "icon16.png",
    "default_css": "popup.css",
    "default_popup": "popup.html"
  },

  "content_scripts": [
    {      
      "matches": ["<all_urls>"],
      "js": ["vendor/jquery-1.8.2.min.js", "config.js", "content_script.js"]   
    }
  ],

  "web_accessible_resources": ["popup.html"]

}
4

1 に答える 1

20

おそらく、バックグラウンド ページ(およびそのより新しく、よりリソースに優しく、優先される兄弟であるイベント ページ) の概念と、コンテンツ スクリプトの概念を誤解しているでしょう。

コンテンツ スクリプト:

  • タブに読み込まれた特定の Web ページにバインドされます。
  • 孤立した世界 (JS コンテキスト) に住んでいますが、Web ページの DOM に直接アクセスできます。
  • バックグラウンド ページと通信できます (「メッセージ パッシング」を参照)。

背景ページ:

  • 拡張機能にバインドされています (拡張機能ごとに最大 1 つの背景 (またはイベント) ページがあります)。
  • 常にバックグラウンドのどこかにあります (イベント ページは時々「昼寝をします」が、いつでも起こすことができます)。
  • Web ページに直接アクセスしないでください。
  • コンテンツ スクリプト (およびその他のビュー) と通信できます (「メッセージ パッシング」を参照)。
  • クールなことを実行できます (クールなchrome.* API にアクセスできるため)。

chrome.contentMenus API は、バックグラウンド ページでのみ使用できます。したがって、コンテキスト メニューを作成し、onClickedそこで (バックグラウンド ページで) イベントをリッスンする必要があります。
コンテキスト メニューをクリックすると、プログラム インジェクションを使用して、アクティブなタブの Web ページにコード (またはコンテンツ スクリプト) を挿入できます。

以下は、この方法を示すサンプル拡張機能のソース コードです。

マニフェスト.json:

{
    "manifest_version": 2,
    "name":    "Test Extension",
    "version": "0.0",

    "background": {
        "persistent": false,   // <-- let's make it an event page
        "scripts": ["background.js"]
    },

    "permissions": [
        "contextMenus",
        "activeTab"   // <-- here, sufficient for our purpose
    ]
}

background.js:

/* Create a context-menu */
chrome.contextMenus.create({
    id: "myContextMenu",   // <-- mandatory with event-pages
    title: "Click me",
    contexts: ["all"]
});

/* Register a listener for the `onClicked` event */
chrome.contextMenus.onClicked.addListener(function(info, tab) {
    if (tab) {
        /* Create the code to be injected */
        var code = [
            'var d = document.createElement("div");',
            'd.setAttribute("style", "'
                + 'background-color: red; '
                + 'width: 100px; '
                + 'height: 100px; '
                + 'position: fixed; '
                + 'top: 70px; '
                + 'left: 30px; '
                + 'z-index: 9999; '
                + '");',
            'document.body.appendChild(d);'
        ].join("\n");

        /* Inject the code into the current tab */
        chrome.tabs.executeScript(tab.id, { code: code });
    }
});

(挿入されたコードが非常に複雑な場合は、.js ファイルを挿入することをお勧めします。詳細については、プログラムによるインジェクションを参照してください。)

于 2013-11-11T22:12:15.767 に答える