jquery - 更改 chrome.tabs.onUpdated 中的 HTML 内容

Question

我正在开发 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>");
    }
 });
});

什么也没发生..有任何想法吗？谢谢..

Answer 1

问题:
您正在注入(inject)background.js作为内容脚本。 (Chrome 不关心你给它起什么名字，只关心你把它放在 content_scripts 的 js 数组中)所以，基本上，你可以使用 jQuery 直接操作网页 DOM(就像你的第一个例子)尝试)- 因为内容脚本可以做到这一点，但您不能使用chrome.tabs.* (就像您的第二次尝试一样)-因为内容脚本无法做到这一点。

解决方案:由于您无法从后台页面操作网页 DOM，因此您必须通过内容脚本来完成此操作:

1. 定义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);
    }
});

在 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 !");
    }
});