1

私は最初のChrome拡張機能に取り組んでいます。

一部を除いて、すべてが正常に機能します。

私の manifest.json には background.js が含まれています:

"content_scripts": [
{
  "matches": ["http://*/*","https://*/*"],
  "css": ["ui.css"],
  "js": ["jq.js","background.js"]
}
]

次のようにjQueryでhtmlを追加しようとすると：

$("body").before("<code>");

それは完璧に動作します。しかし、私がこれを次のようにしたいとき：

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
var pageUrl = changeInfo.url;
$.ajax({
    url: "URL",
    data: {DATA},
    datatype: "json",
    type: "POST",
    success: function(data) {
       $("body").before("<code>");
    }
 });
});

何も起こりません.. 何かアイデアはありますか? ありがとう..

4

1 に答える 1

3

問題:コンテンツ スクリプトとして挿入しています
。background.js（Chromeは名前を気にしません.content_scriptsの配列に入れるだけですjs）したがって、基本的に、jQueryを使用してWebページDOMを直接操作できます（最初の試行のように）-コンテンツスクリプトでそれができるため、ただし、 （2回目の試行のように）使用できませんchrome.tabs.*-コンテンツスクリプトではそれができないためです。

解決策: バックグラウンド ページから Web ページの DOM を操作することはできないため、コンテンツ スクリプトを使用して操作する必要があります。

  1. background.js背景ページ (またはできればイベント ページ) として定義します。
  2. 新しいファイルを定義します (たとえばcontent.js、コンテンツ スクリプトとして)。
  3. リスナー (バックグラウンド ページ)から、 chrome.tabs.sendMessagechrome.tabs.onUpdatedを使用して、対応するタブのコンテンツ スクリプトにメッセージを送信します。
  4. コンテンツ スクリプトで、バックグラウンド ページからのメッセージをリッスンし ( chrome.runtime.onMessageを使用)、実行します。$("body").before("<code>");

(注: 代わりのアプローチがたくさんあるので、特定の要件により適したものを選択する必要があります。)

完全を期すために、上記で説明した内容に基づいたサンプル拡張のコードを以下に示します。

manifest.json で:

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

    "background": {
        "persistent": false,
        "scripts": ["./bg/background.js"]
    },
    "content_scripts": [{
        "matches": ["*://*/*"],
        "js":         ["./fg/content.js"],
        "run_at":     "document_start",
    }],
    "permissions": ["tabs"]
}

background.js で:

chrome.tabs.onUpdated.addListener(function(tabId, info, tab) {
    console.log("One of my tabs updated: ", info);
    if (info.url) {   // <-- Not all `info` objects contain a `url` field
                      //     (Also, if a tab is refreshed, the URL is not changed,
                      //      so you will never get and `info` object with a `url` field)
        console.log("...pretending to make an AJAX request...");
        var pageURL = info.url;
        setTimeout(function() {
            // ...let's simulate an AJAX request...
            // ...now let's pretend out data arrived...
            chrome.tabs.sendMessage(tabId, {
                cmd: "doYourStuff",
                kind: "fancy"
            });
            console.log("Message sent !");
        }, 2000);
    }
});

content.js で:

chrome.runtime.onMessage.addListener(function(msg) {
    console.log("Someone sent us this: ", msg);
    if (msg.cmd && (msg.cmd == "doYourStuff")) {
        alert("Watch me doing " + kind + " stuff !");
    }
});
于 2013-11-08T18:03:12.897 に答える