Ajax Chrome扩展URL匹配模式：为什么规则不适用于Google.com？

我正在做一个扩展来定制谷歌的主页背景。所以我在清单中写了一些匹配规则，如下所示：

"content_scripts": [
    {
      "matches": ["https://www.google.com/", "http://www.google.com/"],
      "js": ["static/js/jquery.js", "static/js/contentscript.js"]
    }
],

以及

contentscript.js

中的一些脚本：

var imgURL = chrome.extension.getURL("static/images/bg.jpg");
$('body').css('background-image', 'url(' + imgURL + ')');

这个脚本对我来说很好，但是当我尝试搜索某个内容时，页面会跳转到

但是脚本在跳跃后仍在运行！如果我直接将长url粘贴到一个新选项卡中，它将不会工作

---

我认为它应该与iframe、Ajax或其他东西相关。有人能提供更多的细节吗？如何防止url更改后脚本运行？

您需要在

匹配项中包含通配符
*
，如下所示：

"content_scripts": [
    {
      "matches": ["https://www.google.com/*", "http://www.google.com/*"],
      "js": ["static/js/jquery.js", "static/js/contentscript.js"]
    }
],

如果你想在谷歌主页上应用一个样式，只需使用一个选择器，它非常特定于谷歌主页。有了Inspector，我很快发现主页上的
标记有一个类“hp”。此类不会显示在搜索结果中

删除JavaScript代码，然后使用

manifest.json的一部分
“内容脚本”：[
{
“匹配项”：[“*：//www.google.com/*”]，
“css”：[“我的谷歌风格.css”]
}
],
“网络可访问资源”：[
“静态/images/bg.jpg”
],


第一个通配符，
*
，表示“http”和“https”
最后添加的通配符无关紧要，因为“主页”要求在下一个样式表中强制执行
如果要在外部（=非扩展名）页面中显示图像，则该键是必需的

mygooglestyle.css
body.hp{
背景图片：url（“chrome”）-extension://__MSG_@@扩展名为“\u id\u\u/static/images/bg.jpg”）；
}


我回答的第一部分是对你的情况的建议。通常，如果您希望捕获每个（脚本化和用户发起的）URL更改，包括但不限于：


history.pushState
/
history.replaceState
location.hash='…'

用户返回/前进（并更改哈希/历史状态）

。。。然后您需要在后台/事件页面中使用API，尤其是和/或事件。为了响应这些事件，您将执行或

如果您只希望重写引用片段（又称位置散列），那么就不需要
webNavigation
API。实现将更加简单，因为您只需要在内容脚本中侦听全局
hashchange
事件。
我不确定当您直接访问搜索页面时为什么不加载它。我从来没有仔细检查过，但谷歌似乎有点棘手：当你从他们的主页上搜索时，我认为他们从来没有真正加载过新页面。他们只是大量编辑现有页面的DOM以包含搜索结果（我认为，使用允许您使用后退按钮）。因此，结果页面不是一个新页面，因此您的内容脚本仍然被加载。我看到的是，搜索结果页面有一个明显的重新加载操作，与Github完全不同，Github在不重新加载.PS的情况下更改其URL。来吧，你不需要jQuery来处理像更改背景图像这样琐碎的事情：
document.body.style.backgroundImage='url（'+chrome.extension.getURL（“static/images/bg.jpg”）+'
做了同样的事情并为您节省了许多字节。如果是这样，则以
https://www.google.com/
将被注入。我只是指谷歌主页。您是否可以添加一个带有
window.onhashchange
的检查，以便，如果
window.document.location.href！="https://www.google.com/“&&window.document.location.href！="http://www.google.com/“
，是否还原代码的更改？关于你的详细答案，请参见Tks。顺便说一句，我认为前缀是chrome-extension://__MSG_@@manifest v2中需要扩展\u id\uu/，否则注入将是“google.com/static/images/bg.jpg”：-@样式表中的Sam URL将相对于样式表进行解析。上次我检查时，没有必要将这些图像添加到清单文件的
web\u accessible\u resources
部分以使其工作。我仍然失败。相对路径被认为是Google的，而不是我的扩展，因此我在chrome开发者工具上看到的样式注入结果是“Google.com/static/images/bg.jpg”。在这里检查：
http://stackoverflow.com/questions/3559781/google-chrome-extensions-cant-load-local-images-with-css/8864212#8864212
@Sam我已经修改了我的答案，请查看修改历史记录，看看有什么不同。