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

问题：
您正在注入background.js作为内容脚本。（Chrome并不关心你的名字，只是你把它放在content_scripts的js数组中）所以，基本上，你可以使用jQuery来直接操作网页DOM（比如你的第一次尝试） - 因为内容脚本可以做到这一点，但你不能使用chrome.tabs.*（就像你第二次尝试一样） - 因为内容脚本不能这样做。

解决方案： 由于您无法从后台页面操作Web页面DOM，因此必须通过内容脚本执行此操作：

将background.js定义为背景页面（或者更好 event page ）。
定义新文件（例如content.js作为您的内容脚本）。
从chrome.tabs.onUpdated听众（在后台页面中），使用 chrome.tabs.sendMessage 向相应标签的内容脚本发送消息。
在您的内容脚本中，从后台页面收听消息（使用 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 !");
    }
});

从chrome.tabs.onUpdated更改HTML内容

1 个答案: