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

【问题标题】：Chrome-extension URL match patterns:Why rules are not working for Google.com?Chrome 扩展程序 URL 匹配模式：为什么规则不适用于 Google.com？
【发布时间】：2013-07-29 09:45:46
【问题描述】：

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

"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 + ')');

该脚本适用于https://www.google.com，但是当我尝试搜索某些内容时，页面会跳转到https://www.google.com/#newwindow=1&sclient=psy-ab&q=Google&oq=Google&gs_l=hp.3..35i39l2j0i20l2j0l6.4788.5717.2.5939.5.3.2.0.0.0.142.397.0j3.3.0....0.0..1c.1.20.hp.xCFVga8gVZU&bav=on.2,or.r_cp.r_qf.&bvm=bv.49784469%2Cd.dGI%2Cpv.xjs.s.en_US.MpiVkF51mpA.O&fp=806ba48f5b2ed550&biw=1920&bih=963

但是跳跃后脚本仍然工作！如果我直接将长网址粘贴到新标签页中，它不会工作！

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

【问题讨论】：

我不知道为什么当您直接访问搜索页面时它没有加载。我从来没有仔细检查过它，但谷歌似乎有点棘手：当你从他们的主页进行搜索时，我认为他们实际上从未加载过新页面。他们只是大量编辑现有页面的 DOM 以包含搜索结果（并使用 history API 允许您使用后退按钮，我认为）。因此，结果页面不是一个新页面，因此您的内容脚本仍在加载中。
我看到的是搜索结果页面有明显的重新加载动作，和Github不重新加载就改变URL的做法截然不同。
附言。来吧，你不需要 jQuery 来做一些像改变背景图片这样微不足道的事情：document.body.style.backgroundImage = 'url(' + chrome.extension.getURL("static/images/bg.jpg") + ')'; 做同样的事情并为你节省很多字节。

标签： ajax google-chrome iframe google-chrome-extension google-search

【解决方案1】：

如果您想将样式应用到 Google 的主页，只需使用非常特定于 Google 主页的选择器即可。通过 Inspector，我很快发现主页上的<body> 标签有一个类“hp”。此类不会出现在搜索结果中。

删除你的 JavaScript 代码，然后使用

`manifest.json`的一部分

"content_scripts": [
    {
      "matches": ["*://www.google.com/*"],
      "css": ["my-google-style.css"]
    }
],
"web_accessible_resources": [
    "static/images/bg.jpg"
],

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

`my-google-style.css`

body.hp {
    background-image: url("chrome-extension://__MSG_@@extension_id__/static/images/bg.jpg");
}

我回答的第一部分是针对您的案例的建议。一般来说，如果您想捕获每个（脚本化和用户启动的）URL 更改，包括但不限于：

history.pushState / history.replaceState
location.hash = '...';
用户后退/前进（并更改哈希/历史状态）

...那么您需要在后台/事件页面中使用chrome.webNavigation API，尤其是onHistoryStateUpdated 和/或onReferenceFragmentUpdated 事件。为了响应这些事件，您将要么 send a message 要么执行 content script。

如果您只希望重写参考片段（也称为位置哈希），则不需要 webNavigation API。实现会更简单，因为您只需要在内容脚本中监听全局hashchange 事件。

【讨论】：

谢谢你的长答案。顺便说一句，我认为前缀 chrome-extension://__MSG_@@extension_id__/ 在清单 v2 中是必需的，否则注入将是“google.com/static/images/bg.jpg”:-)
@Sam 样式表中的 URL 是相对于样式表进行解析的。上次我检查时，无需将这些图像添加到清单文件的 web_accessible_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 我已经修改了我的答案，请查看修改历史，看看有什么不同。

【解决方案2】：

您需要在您的matches 中加入通配符*，如下所示：

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

【讨论】：

如果是这样，每个以https://www.google.com/开头的链接都会被注入。我只是说谷歌主页。
您能否添加与window.onhashchange 的检查，以便如果window.document.location.href != "https://www.google.com/" && window.document.location.href != "http://www.google.com/" 恢复您的代码更改？另见stackoverflow.com/a/2162174/206410

manifest.json的一部分

my-google-style.css

`manifest.json`的一部分

`my-google-style.css`