内容脚本在 chrome 扩展中不起作用答案

【问题标题】：Content Script is not working in chrome extension内容脚本在 chrome 扩展中不起作用
【发布时间】：2013-12-04 15:34:51
【问题描述】：

我在内容脚本中使用XMLHttpRequest。每当打开新选项卡时，该代码就可以工作，但只要更新选项卡，它就会停止工作。 tabupdation API 仅在后台工作。

清单：

{
    "manifest_version": 2,

    "name": "extension",
    "version": "1.0",
    "description": "",
    "icons" : {
        "48" : "48X48.png",
        "128": "icon1.png"
    },

    "background": {
        "scripts":    ["background.js"],
        "persistent": true    
    },    
    "content_scripts": [{
        "matches":    ["<all_urls>"],
        "js":         ["content.js"],
        "all_frames": true
    }]
}

内容脚本使用XMLHttpRequest。

var string="网页上的字符串";

 xmlhttp=new XMLHttpRequest();


xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

alert(xmlhttp.responseText);
}
}
 xmlhttp.open("GET","url/folderName/file.php?q=string",true,"userName","password");

 xmlhttp.send();

字符串实际上是我从网页检索的值，并在xhr中发送，但当标签URL更改之前的值时，而不是新的值。每当我在当前选项卡中打开 url 时，此代码都不起作用，例如就像我们在 youtube 中所做的那样，打开侧面建议的视频，但是如果我们在新标签中打开任何视频，则内容脚本工作/如果我们重新加载该选项卡，则内容脚本工作。

【问题讨论】：

您可能需要添加一些权限，但除非我们看到更多代码，否则我们只能猜测（这既没有多大帮助也没有多大乐趣）。请发布相关代码。
这是整个代码吗？您将 XHR 发送到哪里？
对不起，现在看代码。我不知道有什么问题。为什么在标签更新时代码不起作用
如何从网页中检索字符串？（例如。$(document).ready(…)？）
@mano：你看我下面的回答了吗？它回答了你的问题吗？如果是，请考虑将其标记为“已接受”。

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

您可能误解了 chrome.tabs.onUpdated 事件的概念。当标签的网页的内容更新时，它不会触发，但是当 tab's properties 更新时（例如，当您重新加载标签时，url属性已更新）。

点击将不同视频加载到当前网页的链接（例如通过 AJAX）不会触发 onUpdated 事件。

如果您想监听网页本身的变化，您应该查看 MutationObserver。
有关在 Chrome 扩展程序中使用 MutationObserver 的一些示例，您可以查看 here 和 there。

【讨论】：