Изменение HTML-содержимого из chrome.tabs.onUpdated

Question

Я работаю над расширением Chrome, моим первым.

Все работает как следует, кроме одной части.

Мой manifest.json включает background.js:

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

Когда я пытаюсь добавить HTML с JQuery, как это:

$("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>"); 
    } 
}); 
}); 

Ничего не происходит .. Любые идеи? спасибо ..

Answer 1

Проблема:
Вы инъекционный background.js как сценарий контента. (Chrome не заботится о том, что вы назовете его, только что вы поместили его в массив content_scripts js) Итак, в основном, вы можете использовать jQuery для прямого манипулирования веб-страницами DOM (как в первой попытке) - поскольку сценарии содержимого могут сделайте это, но вы не можете использовать chrome.tabs.* (как во второй попытке) - потому что скрипты содержимого не могут этого сделать.

Решение: Поскольку вы не можете манипулировать веб-страниц DOM от фона страницы, вы должны сделать это с помощью скрипта содержания:

1. Define background.js в качестве фона страницы (или еще лучше event page).
2. Определите новый файл (например, content.js как ваш сценарий содержимого).
3. От вашего слушателя chrome.tabs.onUpdated (на исходной странице) отправьте сообщение на скрипт содержимого соответствующей вкладки, используя chrome.tabs.sendMessage.
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); 
    } 
}); 

В содержании.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 !"); 
    } 
});